JavaScript Debugging with Chrome DevTools (and Friends)
Breakpoints, async stacks, network replay, and console tricks—fix front-end bugs faster without guesswork.
Frontend & debugging Intermediate 6 min read
·
Browser DevTools attach to the JavaScript VM so you can pause before bad state commits. Breakpoints exist because stepping beats console.log when async reorders execution; the Network tab exists because half of “mystery bugs” are wrong status codes or CORS—not logic errors.
Pair with Node.js --inspect for server-side breakpoints.
Sources panel
Why breakpoints: Inspect closures and variables at the exact line; logs cannot rewind time.
Stepping
Why blackbox vendor code: Keeps you inside app sources instead of stepping through minified React internals.
Async and promises
Why async stack traces: Without them, errors appear to originate inside Promise.then instead of your async function.
Network tab
Why replay XHR: Reproduces failing calls without reloading the whole app state.
Console tricks
Why console.table: Arrays of objects render as sortable tables—faster mental parsing than nested logs.
console.table(rows)
debugger; // hard stop when DevTools open
Frequently asked questions
Source maps?
Enable in bundler config so TS/JSX map to original files.
Mobile Safari?
Use Web Inspector tethered to a device; workflow is similar.
Performance tab?
Record a session to find long tasks and forced layouts.
Logpoints?
Right-click a line → add logpoint to avoid editing code for temporary prints.