Browser DevTools: Advanced Debugging Techniques

Browser DevTools are essential for web development. Beyond basic inspection, advanced features help debug complex issues and optimize performance.

Console and Debugging

The Console panel provides JavaScript REPL. Use console.assert, console.group, and console.table for structured logging. Blackbox scripts to ignore third-party code in stack traces. Live expressions evaluate JavaScript continuously.

Source panel sets breakpoints: line breakpoints, conditional breakpoints, XHR/fetch breakpoints, and event listener breakpoints. Logpoints log to console without pausing execution. The call stack panel shows the execution context. Scope panel inspects current variable values. Watch expressions evaluate custom expressions at breakpoints.

Network Panel

The Network panel shows all network requests. Waterfall charts visualize timing breakdown. Use filters (XHR, JS, CSS, Img, Media, Font, Doc, WS, Manifest) to focus on specific resource types.

Request blocking simulates missing resources. Import/export HAR files for sharing request data. Throttling simulates slow connections (Slow 3G, Fast 3G, custom). Profile network activity during page load for Web Vitals optimization.

Performance Panel

Performance recordings capture a timeline of page activity. FPS, CPU, and network bars show resource usage over time. Flame charts visualize JavaScript call stacks. Frame analysis identifies jank and frame drops.

Timing breakdown: Loading (resource loading), Scripting (JavaScript execution), Rendering (style calculation, layout), Painting (compositing, paint). Identify long tasks (>50ms) that block user interaction.

Memory Panel

JavaScript heap snapshot collects object references and memory usage. Allocation instrumentation timeline records heap allocations over time. Allocation sampling profiles memory allocation with low overhead.

Find detached DOM nodes (elements removed from DOM but retained in JavaScript). Check closure variables that may leak memory. Compare heap snapshots before and after user actions to detect leaks. Monitor garbage collection frequency.

Elements and Styles

CSS Grid and Flexbox inspectors visualize layout. Hover on grid/flex display to see overlay. The box model highlights margin, padding, border, content. Computed styles show final values after specificity resolution. Force state simulates :hover, :active, :focus.