Production Debugging & Profiling

DevTools is a full-featured IDE for the running browser. Most engineers use 5% of it. This chapter covers the architecture of each panel, essential shortcuts, advanced Console APIs, the Sources panel's debugging arsenal, and DOM/XHR/event listener breakpoints that let you pause on behavior instead of guessing at lines.

The Performance panel records everything the browser does — scripting, rendering, painting, garbage collection — across time. Learning to read flame graphs transforms you from someone who guesses at performance problems into someone who sees them directly. This chapter teaches you to record traces, decode the flame chart, identify long tasks, and find the critical path.

Memory leaks don't crash your app immediately — they slowly degrade performance until the tab freezes. The Memory panel's heap snapshots let you photograph the entire JavaScript heap, compare snapshots to find what's growing, and trace retainer chains to find exactly why an object stays alive. This chapter covers all three profiling modes and the techniques that make leak hunting systematic.

The browser splits your page into layers, rasterizes each one independently, and composites them on the GPU. When layers are managed well, animations run at 60fps without touching the main thread. When they're managed poorly, you get layer explosions, excessive GPU memory, and invisible performance cliffs. This chapter teaches you to see, understand, and control the layering system.

Every byte your page loads passes through the Network panel. The waterfall chart reveals the loading sequence — what blocks what, which resources are slow, and where the critical chain breaks. This chapter teaches you to read waterfall colors, dissect request timing, trace dependency chains through the Initiator column, and identify the blocking resources that determine your page load speed.

Reading about tools is not the same as using them under pressure. This chapter walks through four realistic production incidents step by step — from symptom to root cause to fix — using the DevTools techniques from previous chapters. Each walkthrough follows the same investigative structure: observe symptoms, form a hypothesis, gather evidence, identify root cause, implement fix, verify.

Memory leaks are the most insidious production bugs — they don't crash, they don't error, they silently degrade until the tab dies. This chapter provides a systematic, repeatable process for finding and fixing memory leaks: confirm the leak, reproduce minimally, compare heap snapshots, trace retainer chains, identify the GC root, apply the fix pattern, and verify the leak is gone.