Frontend Debugging
Reproduce, then work the layers: network, console, DOM and CSS, application state, performance, memory. A method, not a tour of a devtools panel.
Reproduce, work the layers in order, narrow by bisection, fix, and then prove the signal moved. The method is the skill; the panels are interchangeable.
Seven panels, seven questions. Learn which question each one answers and what it structurally cannot tell you, and the UI can change underneath you without costing you anything.
Read the waterfall for its shape, not its totals. Then learn the three ways the network panel lies: the CORS error that is a 500, the cache row that is not a hit, and the request that is missing because a service worker answered it.
Separate a frame that took too long from a frame that was never attempted, then find which pipeline stage the change is actually costing — with the forced-layout warning, paint flashing and layer borders as your three cheapest instruments.
A wrong value on screen is the end of a sequence, not a snapshot. Reconstruct the transitions, then answer the question that resolves most of these bugs: which copy of this data is authoritative?
Three snapshots across a repeated cycle, then follow the retainer chain to whatever is holding the thing that should have gone. Growth is not a leak until you can say what is keeping it alive.