Browser DevTools: The Debugging Features Most Developers Never Use

Beyond console.log: breakpoints in the Sources tab let you pause execution and inspect every variable in scope, step through code line by line, and modify variables mid-execution. Conditional breakpoints pause only when a specific condition is true — invaluable for finding a bug that only occurs on the 5th iteration of a loop. Logpoints (right-click in Sources → Add logpoint) print to the console without stopping execution and without modifying your source code. The Call Stack panel shows exactly which functions led to the current execution point. The Watch panel monitors specific expressions as you step through code. XHR/fetch breakpoints in the Sources panel pause whenever a fetch request matching a URL pattern is made.

The Network tab records every HTTP request your page makes. Key features: filter by type (XHR/Fetch shows only API calls), filter by URL string to find specific requests, click any request to see full request headers, request body, response headers, and response body. The Timing tab shows exactly how long each phase took (DNS lookup, connection, waiting for response, downloading). The Preserve Log checkbox keeps all requests even after page navigation — useful for debugging forms that redirect on submit. Block specific requests to test how your app handles failures. Throttle the network to 'Slow 3G' to test performance on poor connections.

The Performance tab records everything the browser does — JavaScript execution, rendering, painting, network requests — in a flame graph timeline. Use it when your page feels slow but you can't identify what's causing it. Record a 3-5 second sample of the interaction that's slow, then examine the flame graph. Long JavaScript tasks (solid bars over 50ms) block rendering and cause jank. Expensive layout/paint operations are visible as purple and green bars. The Summary at the bottom shows where time is spent: scripting, rendering, painting, idle. The Bottom-Up and Call Tree tabs show which specific functions consumed the most time. This is the tool that turns 'it feels slow' into 'this specific function takes 200ms and runs 100 times'.