JavaScript Debugging Techniques That Save Hours
Beyond console.log: conditional breakpoints, logpoints, and source maps in 2026.
Conditional Breakpoints
In Chrome DevTools or VS Code, right-click a line number and add a condition:
``
i === 437 && user.role === 'admin'
`
The debugger pauses only when the condition is true. Saves stepping through 436 iterations.
Logpoints
Logpoints log to the console without modifying source. Right-click → Add logpoint → 'value:', value. The expression evaluates each pass; nothing is committed to git.
Async Stack Traces
Modern DevTools show async stacks across await boundaries by default. Verify "Async stack traces" is enabled in Sources → Settings.
Source Maps in Production
Generate maps for production bundles, but serve them only to authenticated devs (or to your error tracker via upload):
`bash
# Vite
build: { sourcemap: 'hidden' }
`
hidden writes maps but omits the //# sourceMappingURL comment, so users do not download them.
debugger Statement
`js
if (suspicious) debugger;
`
Pauses only when DevTools is open. Useful for hard-to-reproduce issues.
Performance Profiling
The Performance panel shows which functions actually cost time. Profile production builds — dev builds are misleading.
Memory Snapshots
Take heap snapshots before and after a suspected leak. Compare retained sizes. Map/Set keyed by DOM nodes is a common leak source — WeakMap/WeakSet fix it.
Network Throttling
Test on Fast 4G and Slow 4G in DevTools. If your app breaks on slow networks, fix it before users find out.
Console Tricks
- console.table(rows) — tabular display
- console.group() / console.groupEnd() — collapsible logs
- console.time('label') / console.timeEnd('label')` — quick timing
For production error tracking pair with [promise error handling guide](/blog/promise-error-handling-guide).