DevTools let you inspect live HTML/CSS, debug JavaScript, profile performance, and simulate mobile viewports.
Panels to learn first
- Elements — DOM tree, styles, box model
- Console — logs, errors, quick JS experiments
- Network — requests, status codes, timing
Habits
- Reproduce the bug with DevTools open.
- Check console for red errors before blaming CSS.
- Use device toolbar to test narrow widths.
Self-check
- How do you open DevTools in your browser?
- Where do you see which CSS rule won the cascade?
Interview prep
- You see a white screen after deploy—where do you look first?
Usually the Console for JavaScript errors, then Network for failed requests—many “blank UI” bugs are one failed fetch or thrown exception.
- Why disable cache while debugging front-end assets?
Browsers cache aggressively; you might be running stale JS/CSS while thinking the new build is live.