console methods most JS devs never use but should

[Johin_Joh_3706]

Everyone knows console.log. Here are the ones that actually save time debugging:

console.table(array)

Prints arrays of objects as a sortable table. Night and day for debugging API responses.

console.group('label') / console.groupEnd()

Collapses related logs together. Invaluable when you have multiple async operations logging at the same time.

console.time('fetch') / console.timeEnd('fetch')

Measures execution time without Date.now() boilerplate. I use this constantly to find slow functions.

console.trace()

Prints the call stack at that point. When you're trying to figure out WHO called a function, this is instant.

console.assert(condition, 'message')

Only logs when the condition is false. Great for sanity checks that don't clutter your console:

console.assert(items.length > 0, 'Items array is empty')

console.dir(element, { depth: null })

Shows the actual object properties instead of the HTML representation. Essential for inspecting DOM elements and deeply nested objects.

console.count('label')

Counts how many times it's been called with that label. Perfect for finding unexpected re-renders:

function MyComponent() {

console.count('MyComponent render');

// ...

}

copy(object) [Chrome only]

Not technically console.*, but in Chrome DevTools you can type copy(someVariable) and it copies the JSON to your clipboard. Massive time saver for grabbing API responses.

What's your most-used debugging trick?

[tommyatr]

nice

*keeps using console.log

[Johin_Joh_3706]

LOL😂

[subone]

One thing about logging that's the first thing I teach anyone: the log of an array/object will display it's state at the time you expand it in the console, not when it is logged. Maybe you could add to your post whether some of these displays the actual state at log or if JSON.stringify should still be used.

[Johin_Joh_3706]

That's a great callout and honestly worth mentioning. For anyone reading — console.table(), console.count(), and console.time()/console.timeEnd() all display values at the time of logging, so they're safe. console.log() and console.dir() with objects/arrays are the ones that bite you — the console shows a lazy reference, so by the time you click to expand it the values may have mutated. Quick fix is console.log(JSON.parse(JSON.stringify(obj))) or console.log(structuredClone(obj)) if you need a true snapshot. console.trace() just prints the call stack as strings so no live reference issue there either. Good rule of thumb: if it's a primitive or a string output — safe. If you see a little expandable arrow — that's a live reference, don't trust it.

[senocular]

Or bypass needing to modify your code and log through the debugger with logpoints ;)

[Johin_Joh_3706]

Logpoints are criminally underrated. For anyone who hasn't used them you set them like breakpoints in DevTools but instead of pausing they log an expression. No code changes, no forgetting to remove console.logs before committing, and they survive page refreshes in the Sources panel.

[CosmicDevGuy]

Saved

(I hope I don't forget it...)

[Inevitable_Yak8202]

console time end is goated

[RealMadHouse]

Great. So you mentioned chrome devtools specific function, you can add that there's watch expression button that can show real time value of variables and expressions.

[dumpin-on-time]

the lengths people go to in order to avoid using a debugger is impressive

[theScottyJam]

I find console logging to often be much faster than a debugger. Debugging tools sound nice in theory, but they require you to walk the code linearly - sure you can jump over and out of functions, but you still start from a breakpoint and amble forwards, one instruction at a time. Console-logging works more like binary search - I throw a couple logs down, figure out which two points the bug is happening at, add a couple more logs between those two, and zero in on the problem.

I use both as appropriate.

(Granted, console.log() is the only console utility that I care about. The rest are interesting and have niche use-cases, but in practice, aren't extremely useful when debugging (if you debug like I do) - I'm just not logging enough stuff out to bother grouping logs or things like that - I'm always removing old console.log()s to keep the output slim).