Console Log Debugging: Techniques Beyond console.log()

Every JavaScript developer starts with console.log(). But the Console API has much more to offer. Here are techniques that can dramatically speed up your debugging.

console.table() for structured data

When you're inspecting arrays of objects, console.log() gives you a collapsed tree. console.table() renders it as a sortable table — instantly readable.

const users = [
  { name: "Alice", role: "admin", active: true },
  { name: "Bob", role: "user", active: false },
];
console.table(users);

You can even pass a second argument to select which columns to display: console.table(users, ["name", "role"])

console.trace() for call stacks

When a function is called from multiple places, console.trace() shows you exactly how you got there. This is invaluable for understanding unexpected code paths.

function processOrder(order) {
  console.trace("processOrder called");
  // ...
}

console.time() for performance

Need to know how long something takes? Wrap it in a timer:

console.time("api-call");
await fetch("/api/data");
console.timeEnd("api-call");
// api-call: 142.5ms

console.group() for organization

When you have related logs, group them to keep the console organized:

console.group("User Authentication");
console.log("Token:", token);
console.log("Expiry:", expiry);
console.log("Permissions:", permissions);
console.groupEnd();

Use console.groupCollapsed() to start the group collapsed by default.

console.assert() for conditional logging

Only log when something is wrong:

console.assert(response.ok, "API returned error:", response.status);
// Only prints if response.ok is false

console.count() for frequency

Track how many times a code path is hit:

function handleClick(id) {
  console.count(`click-${id}`);
}
// click-submit: 1
// click-submit: 2
// click-cancel: 1

Styled console output

Make important logs stand out with CSS:

console.log(
  "%c WARNING: Cache expired",
  "color: orange; font-weight: bold; font-size: 14px;"
);

Capturing console logs in production

These techniques are great during development, but bugs often happen in production where you can't open DevTools. Recording tools that capture console output alongside screen video let you see all of these logs in context — even after the browser tab is closed.

The takeaway

The Console API is more powerful than most developers realize. Using the right method for the right situation makes debugging faster and your console output more readable. And when you combine these techniques with a recording tool that captures everything, you have a complete debugging toolkit.