Stop Using console.log — Here Are Better Debugging Tools

I used console.log for years. Then I discovered these tools and felt embarrassed.

1. console.table()

Got an array of objects? Stop scrolling through nested logs.

const users = [
  { name: "Alice", role: "admin", active: true },
  { name: "Bob", role: "user", active: false },
  { name: "Charlie", role: "user", active: true },
];

console.table(users);

This prints a beautiful formatted table in your console. You can even filter columns:

console.table(users, ["name", "role"]);

2. console.group() / console.groupEnd()

Nested logs are unreadable. Group them.

console.group("User Authentication");
console.log("Checking token...");
console.log("Token valid");
console.group("Permissions");
console.log("Role: admin");
console.log("Access: full");
console.groupEnd();
console.groupEnd();

Collapsible sections in your console. Use console.groupCollapsed() to start collapsed.

3. console.time() / console.timeEnd()

Stop doing Date.now() math.

console.time("API call");
await fetch("/api/users");
console.timeEnd("API call");
// API call: 142.3ms

4. console.assert()

Only logs when something is wrong.

console.assert(user.age > 0, "Age must be positive", user);
console.assert(response.ok, "API failed", response.status);

Zero noise when things work. Loud when they do not.

5. console.trace()

Where did this function get called from?

function processPayment(amount) {
  console.trace("Payment processed");
  // ... logic
}

Prints the full call stack. Invaluable for debugging event handlers and callbacks.

6. Structured Clone for Deep Logging

Ever logged an object and saw it change by the time you expanded it? The console shows a live reference.

// Bad: shows current state when expanded
console.log(myObject);

// Good: snapshots the object at this moment
console.log(structuredClone(myObject));

7. Conditional Breakpoints

Right-click any line number in Chrome DevTools Sources tab and select "Add conditional breakpoint".

Only pauses when the condition is true. No more stepping through 1000 iterations.

8. The debugger Statement

Forget clicking in DevTools. Drop this in your code:

if (someWeirdCondition) {
  debugger;
}

Chrome pauses right there with full access to scope, call stack, and variables.

The console API has 20+ methods. Most developers use one. Do not be most developers.

What is your favorite debugging trick?

DEV Community