Performance and debugging

What you'll learn

• What each devtools panel is for, and when to reach for which
• Breakpoints — line, conditional, logpoint, DOM, XHR, event-listener
• The console methods beyond log: table, group, time, trace, dir, assert, %c
• Source maps — what they are, when they lie, how to verify yours
• Debounce, throttle, and requestAnimationFrame — the three patterns that fix most jank
• Measuring with performance.now, marks, measures, and PerformanceObserver
• Memory leaks, heap snapshots, and the detached-DOM trap
• Reading flamegraphs to find the slow path

1. 01
   The devtools tour

   Elements, Console, Sources, Network, Performance, Memory, Application — what each panel is actually for.
   14 min
2. 02
   Breakpoints and stepping

   Line, conditional, logpoint, DOM, XHR, event-listener — and step in, over, out without losing your place.
   15 min
3. 03
   Console beyond log

   table, group, time, trace, dir, assert, and %c styling — the methods that turn console.log into a real tool.
   11 min
4. 04
   Source maps

   What source maps are, how to verify yours work, and the moments they quietly lie about line numbers.
   11 min
5. 05
   Debounce, throttle, and requestAnimationFrame

   Three patterns that fix most jank in frontend code, and how to pick the right one.
   16 min
6. 06
   Measuring performance

   performance.now, mark and measure, PerformanceObserver, and reading Web Vitals from your own JavaScript.
   16 min
7. 07
   Memory and leaks

   What causes leaks, how to read a heap snapshot, and the detached-DOM trap that catches every frontend.
   16 min
8. 08
   Profiling

   The Performance panel, flamegraphs, and tracing through a recording to find the slow path.
   14 min