The diagnostic toolkit.
WHAT THE MAIN PANELS PROVIDE
- Elements: the document and applied styles
- Console: errors, logging and evaluation
- Sources: code, breakpoints and debugging
- Network: every request, with timing and size
- Performance: where time is spent
- Memory: allocation and leaks
- Application: storage, service workers and manifests
- Lighthouse: automated auditing
WHAT MOST PEOPLE USE
The console and elements, and little else.
WHAT THEY MISS
The network and performance panels, which answer questions guessing cannot.
WHAT TO LEARN FIRST
Reading errors properly, including the file and line Inspecting which style rule applied and why Reading the network panel
WHAT THE ELEMENTS PANEL ANSWERS
Why a style did not apply, by showing which rule won and what overrode it.
WHY THAT MATTERS
Most styling confusion is a cascade question, and this answers it definitively.
WHAT TO USE FOR QUICK EXPERIMENTS
Editing styles live, before changing code.
WHAT TO REMEMBER
Changes are lost on reload.
WHAT TO ENABLE
Device simulation, for approximate mobile testing.
WHAT IT DOES NOT REPRODUCE
Real performance, touch behaviour or network conditions.
