console.log Is the Least Interesting Thing About the Console

Watching other developers debug is how I learn the best tricks, and the biggest surprise is always how few people venture past console.log. The console object has been quietly excellent for a decade. These are the pieces I use daily.

console.table: stop expanding objects one by one

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

Arrays of objects render as an actual sortable table, and the second argument picks columns. For comparing twenty rows of API output, it's not even close - table wins.

console.group: fold your noise

console.groupCollapsed('cart sync');
console.log('local items', local);
console.log('server items', remote);
console.log('diff', diff);
console.groupEnd();

Grouped logs collapse into one expandable line. Wrap chatty subsystems in groupCollapsed and your console stays readable even with logging left on.

console.time: the poor man's profiler

console.time('render');
renderTable(rows);
console.timeEnd('render');   // render: 47.3 ms

Good enough to answer "is this actually slow?" before reaching for the Performance tab. For anything serious, graduate to performance.mark() and measure(), but time/timeEnd covers 80% of cases.

console.trace: who called this?

Drop console.trace('saved!') inside a function that's being called mysteriously often, and you get a stack trace for every call without pausing execution. Great for hunting duplicate event bindings.

DevTools-only helpers (these are not in your code, they're in the console)

• $0 - the element currently selected in the Elements panel. Click a node, then type $0.dataset in the console. $1 is the previously selected one.
• $_ - the result of the last expression. Run something, decide you wanted to keep it, type const x = $_.
• copy(obj) - puts any value on your clipboard as JSON. copy(performance.getEntries()) and paste straight into a file.
• $$('selector') - querySelectorAll shorthand that returns a real array.

These four are features of the browser console itself (Chrome, Edge, Firefox and Safari all support them), so don't ship them in source files.

Two formatting bonuses

Log with CSS: console.log('%cDEBUG', 'background:#222;color:#0f0;padding:2px 6px') - handy for making your own messages findable in noisy consoles. And logging several values beats concatenating: console.log('user', user, 'cart', cart) keeps objects expandable instead of flattening them into strings.

None of this replaces a real debugger, but a well-used console gets you shockingly far before you need breakpoints.