Memory Profiling and Debugging

The 5 most common memory leak patterns in frontend apps — detached DOM trees, forgotten listeners, closures over large scopes, timer references, and growing collections — with real-world detection and prevention strategies.

Master Chrome DevTools heap snapshots — the Summary, Comparison, Containment, and Statistics views, the three-snapshot technique, and how to filter by constructor to track down memory leaks.

Chrome DevTools allocation instrumentation timeline and allocation sampling profiler — recording allocations over time, reading blue and grey bars, finding hotspots, and choosing the right tool for the job.

The two numbers every engineer must understand in heap snapshots — shallow size (own bytes), retained size (bytes freed on GC), dominator trees, and why a tiny object can retain gigabytes.

How to read retaining paths in heap snapshots — GC roots, retainer chains, and the step-by-step debugging workflow for finding the unexpected reference keeping a memory leak alive.

Chrome DevTools Performance panel — recording sessions, reading flame charts, identifying long tasks, bottom-up vs top-down vs call tree views, self time vs total time, and understanding rendering phases.

Long tasks, their impact on INP, the Long Animation Frames API (LoAF), yielding strategies, layout thrashing, forced reflow, the fastdom pattern, and how to spot these issues in the Performance panel.

React DevTools Profiler — recording renders, flamegraph vs ranked views, detecting unnecessary renders, component highlight, and a data-driven React.memo/useMemo/useCallback decision framework.

The scientific method applied to debugging — observe, hypothesize, predict, test, conclude. Plus git bisect, minimal reproduction, rubber duck debugging, printf vs breakpoints, and time-travel debugging.

The Performance API — performance.mark(), performance.measure(), PerformanceObserver for longtask, LCP, FID, layout-shift entries, Resource Timing, User Timing, and sending custom metrics to analytics.