Platform under construction

JavaScript Basics

Basic

Console

The console is your first debugging instrument: it shows values, warnings, errors, tables, timings and groups while code runs.

console.group("Checkout");
console.log("Subtotal", 120);
console.warn("Coupon expired");
console.groupEnd();

JavaScript Basics

The console is for developers, not for users.

Every browser has developer tools, and the Console panel is usually the fastest way to inspect what JavaScript is doing.

console.log is the familiar starting point, but the console has more: warn, error, table, group, time and trace can make debugging much clearer.

The important discipline is knowing when to remove or reduce logs. A useful debug log in development can become noisy or risky in production.

console.log

Shows general values during development.

console.warn

Marks something suspicious that does not stop the program.

console.error

Marks an error or failed operation clearly.

console.table

Displays arrays and objects in a table for easier scanning.

Examples

Good JavaScript is clear, scoped and easy to debug.

Useful debugging output

const users = [
  { name: "User A", tasks: 12 },
  { name: "User B", tasks: 18 },
];

console.group("User activity");
console.table(users);
console.log("Total users:", users.length);
console.groupEnd();

Noisy production logging

console.log("test");
console.log(user);
console.log(password);
console.log("why is this broken????");

Rules that matter

Learn the decision before memorizing the keyword.

JavaScript becomes much easier when you understand why a pattern exists. The syntax is only the surface; the real skill is choosing the right behavior for the interface.

Log names and values

console.log("total", total) is clearer than console.log(total).

Use the right method

Warnings, errors, tables and groups communicate intent better than endless log lines.

Never log secrets

Passwords, tokens, session data and private user information do not belong in the console.

Clean up before release

Keep intentional diagnostics, remove random development noise.

Use timing when performance matters

console.time and console.timeEnd can expose slow blocks quickly.

Use breakpoints too

The console is powerful, but DevTools breakpoints are often better for step-by-step debugging.

Production thinking

JavaScript quality is visible in behavior, reliability and trust.

Why does this matter?

Debugging is part of programming. The console gives you direct feedback, so you can understand reality instead of guessing from the code in your head.

Accessibility

Console messages do nothing for users. If a user needs feedback, put it in the interface with readable text and appropriate live regions when needed.

Production note

Production logging should be intentional, privacy-aware and ideally connected to real monitoring for errors that matter.

SEO note

Console errors can reveal broken scripts that affect rendering, navigation and user behavior. Search crawlers will not fix broken JavaScript for you.

Live code lab

Change the HTML, CSS or JavaScript and run the result.

The preview runs inside an isolated iframe. The JavaScript is placed inside the HTML editor for now, so every example stays together and remains easy to understand.

Mini assignment

Try this now.

Replace console.log with console.warn and compare the Console display.
Use console.group around the table and total.
Remove the visible output and explain why users would no longer see feedback.

Practice assignment

Do this before moving to the next topic.

Open DevTools in your browser.
Run console.log, console.warn and console.table manually.
Add one useful console message to a click handler.

HTML + JavaScript CSS

Live preview

Self-check

Before you continue, prove that you understand Console.