11 parts · 29 chapters

DevTools, With a Companion App

DevTools is the browser showing you its own pipeline. Every panel is a window onto a stage the Browser course drew: Elements onto the DOM and the cascade, Performance onto the event loop and the frame, Memory onto the heap, Network onto the socket. Reading a panel well is reading the mechanism behind it, and the habit this course installs is to look at the panel before guessing at the cause.

Each part explains one panel, what each column and track actually measures, and the mistakes people make reading it. Then it sends you into the companion lab app, where a route triggers one specific pathology: a detached list, a layout thrash, a non-passive scroll, an IndexedDB await trap, a CORS failure, a bfcache blocker. You record it, read it, and fix it with the provided toggles. The last part runs five full diagnoses end to end.

Start reading · Part 0 Present as slides
panels · pathologies · the habit of lookingsenior → staff · anyone who debugs in a browser
the lab appOne React app, a route per pathology, with the panel to open and what to look for on every page.
Elements and StylesComputed versus cascade, the box model, layout overlays, forced states, DOM breakpoints, the accessibility pane.
Console and SourcesLogging levels, live expressions, utilities; breakpoints of every kind, stepping, blackboxing, source maps, workspaces.
NetworkReading a waterfall, the timing breakdown, priorities, throttling, cache behaviour, HAR files.
PerformanceRecording, the flame chart, long tasks, layout and paint events, the Interactions track, frames, bottom-up.
MemoryHeap snapshots, allocation timelines, detached nodes, retainers, and finding a leak for real.
Application, Rendering, LayersStorage inspection, service workers, bfcache tests; paint flashing, layout shift regions, layer borders; coverage.
diagnosisSlow load, janky scroll, memory growth, broken cache, hydration mismatch: walked end to end.
00

The App and the Method

What DevTools is · The companion app and its routes · The method: look before you guess
3 ch · ~20 min01

Elements and Styles

The tree is the DOM, not the source · Styles versus Computed · The box model and the layout overlays · Forced states, DOM breakpoints and listeners
4 ch · ~30 min02

Console

What the console is for · The console as a REPL into the page
2 ch · ~20 min03

Sources

Breakpoints of every kind · Paused: the stack, the scope, stepping and the ignore list · Source maps and workspaces
3 ch · ~25 min04

Network

Reading a waterfall · Priorities, throttling and the cache
2 ch · ~25 min05

Performance

Recording, and the tracks · The events, and what each one means · Patterns to recognise at a glance
3 ch · ~35 min06

Memory

Heap snapshots: three, not one · Allocation timelines and live counters
2 ch · ~25 min07

Application

Storage, tier by tier · Service workers, bfcache and background services
2 ch · ~25 min08

Rendering, Layers and Coverage

The Rendering drawer · Layers and Coverage
2 ch · ~20 min09

Lighthouse and Recorder

Lighthouse: what the score is made of · The Recorder: flows you can replay, measure and export
2 ch · ~20 min10

Putting It Together

Diagnosis 1: a slow load · Diagnosis 2: a janky scroll · Diagnoses 3, 4, 5: memory growth, a broken cache, a hydration mismatch · The course, in one page
4 ch · ~30 min
The companion appThe lab lives at lab/dist/; routes marked with a dot need node server.mjs for real HTTP behaviour. Each chapter names its route; each route names its panel.