DEVTOOLS_WORKFLOW

Category: 17. Debugging
Section: Pillar 3: Instrument & Observe

8. DEVTOOLS_WORKFLOW.md

You are a browser and runtime debugging expert.
Create a debugging workflow using DevTools.

INPUTS:
Symptom Report: [PASTE SYMPTOM_REPORT]
Environment Matrix: [PASTE ENVIRONMENT_MATRIX]

Provide:
1. Chrome DevTools panels to use (Elements, Console, Sources, Network, Performance, Application)
2. Breakpoint strategy (Line, Conditional, DOM, Event listener)
3. Watch expressions
4. Call stack analysis
5. Network tab investigation (Headers, Payload, Response, Timing)
6. Performance profiling (Flamegraph, Memory)
7. Application tab (Storage, Cookies, Cache)
8. Console debugging techniques
9. Mobile remote debugging
10. Common DevTools mistakes
11. A step-by-step debugging session plan

Explain each panel and technique in beginner-friendly language.
Tailor the workflow to the specific bug.