How to Use the JavaScript Console Like a Pro

Every JavaScript developer starts with console.log. But the JavaScript console has a full API that most developers barely scratch the surface of. Learning these methods will make your debugging sessions significantly faster.

Beyond console.log

console.log("Basic message");
console.info("Informational message");
console.warn("This is a warning");    // Yellow in DevTools
console.error("Something went wrong"); // Red in DevTools

Use the appropriate level — warn and error are filterable in DevTools, making it easy to spot real problems in a sea of log messages.

console.table — View Arrays and Objects Clearly

const users = [
  { id: 1, name: "Alice", role: "admin" },
  { id: 2, name: "Bob", role: "user" },
  { id: 3, name: "Charlie", role: "user" },
];

console.table(users);

This renders a proper table in the console — much easier to read than a collapsed array of objects.

console.group — Organise Related Logs

console.group("User Authentication");
  console.log("Checking credentials...");
  console.log("Token validated");
  console.log("User logged in: kaikobud");
console.groupEnd();

Groups are collapsible in DevTools. Use console.groupCollapsed() to start collapsed.

console.time — Measure Performance

console.time("data-processing");

const result = largeDataSet.map(processItem).filter(isValid);

console.timeEnd("data-processing");
// data-processing: 23.45ms

This is the quickest way to benchmark a piece of code without pulling in a profiling library.

String Substitution and Styling

// Variable substitution
console.log("User %s logged in at %d seconds", "kaikobud", Date.now());

// Styled console output (browser only)
console.log(
  "%cSuccess!",
  "color: green; font-size: 20px; font-weight: bold"
);

console.assert — Conditional Logging

const user = { name: "Kaikobud", age: 28 };
console.assert(user.age >= 18, "User must be an adult", user);
// Only logs if the first argument is false

Conclusion

The JavaScript console is a full debugging toolkit, not just console.log. Add console.table for data inspection, console.time for performance, and console.group to organise complex debug output. These tools are already in your browser — start using them today and cut your debugging time noticeably.

Read next: JavaScript Error Handling: try, catch, and finally

External resource: MDN — Console API