Chrome DevTools provides powerful debugging capabilities through the Sources panel for breakpoints, Console for runtime inspection, Network tab for request analysis, and Performance profiler for identifying bottlenecks in JavaScript applications.
Beyond line breakpoints, DevTools supports conditional breakpoints, logpoints, DOM mutation breakpoints, and XHR/fetch breakpoints for targeted debugging.
console.table() for structured data, console.group() for organization, console.time() for measurement, and $0 to reference the selected DOM element.
Record all HTTP requests with timing waterfalls, filter by type, throttle connection speed, and block requests to test error handling paths.
Source maps connect minified/bundled code back to original source, enabling breakpoints and readable stack traces in production-like builds.
Chrome DevTools is the most important debugging tool for JavaScript developers. While console.log is the most common debugging technique, mastering DevTools transforms your ability to diagnose and fix complex issues. Interviewers frequently ask about debugging strategies and specific DevTools features to gauge practical development experience.
The Sources panel is where real debugging happens. Setting a breakpoint pauses execution at a specific line, letting you inspect the call stack, variable values, and scope chain at that exact moment. Beyond line breakpoints, DevTools supports: conditional breakpoints (only pause when an expression is true — right-click the line gutter), logpoints (log a value without pausing — like console.log without modifying code), DOM breakpoints (pause when a DOM node is modified, removed, or has attribute changes), and XHR/fetch breakpoints (pause when a request URL contains a specific string).
Once paused at a breakpoint, you can: Step Over (F10) to execute the current line and move to the next, Step Into (F11) to enter a function call, Step Out (Shift+F11) to finish the current function and return to the caller, and Resume (F8) to continue until the next breakpoint. The Call Stack panel shows you exactly how execution reached the current point.
The Console API offers much more than log(). console.table() displays arrays and objects as formatted tables. console.group()/console.groupEnd() creates collapsible sections. console.time()/console.timeEnd() measures execution duration. console.trace() prints a stack trace. console.assert() only logs when a condition is false. $0 in the Console references the currently selected element in the Elements panel, and $_ references the last evaluated expression.
The Network tab records all HTTP requests with timing, headers, payloads, and responses. Key features: filter by type (XHR, JS, CSS, images), search across all request/response bodies, throttle network speed to simulate slow connections, block specific requests to test error handling, and examine the waterfall chart to identify sequential requests that could be parallelized. The "Preserve log" checkbox keeps requests across page navigations.
The Performance tab records a timeline of everything the browser does: JavaScript execution, layout calculations, paint operations, and compositing. The flame chart shows which functions took the longest, helping identify performance bottlenecks. Look for long tasks (over 50ms) that block the main thread and cause jank. The "Bottom-Up" and "Call Tree" views help trace expensive operations to their source.
Source maps connect your minified/bundled/transpiled production code back to the original source. When source maps are available, DevTools shows your TypeScript, JSX, or unminified JavaScript instead of the transformed output. Breakpoints set in the original source work correctly. All modern bundlers (Vite, webpack, esbuild) generate source maps, though you may want to disable them in production for security (use "hidden" source maps that work with error monitoring but are not publicly accessible).
Knowing when to use which tool separates junior from senior developers. Use breakpoints (not console.log) for complex state issues. Use the Network tab for API debugging. Use the Performance profiler for rendering issues. Use the Memory tab for leak detection. Demonstrating a systematic debugging approach — reproduce, isolate, identify, fix, verify — is more valuable than knowing every DevTools feature.
Fun Fact
Chrome DevTools has a hidden 'Layers' panel (enable via More Tools) that visualizes the compositor layers of your page in 3D. This is invaluable for understanding why CSS properties like transform and opacity are GPU-accelerated while properties like top and left trigger expensive layout recalculations.