You will spend thousands of hours in DevTools. These ten tricks repay learning them immediately.
The list
- $0 in Console = currently selected element.
$0.style.color = "red" - console.table(arrayOfObjects) — readable data instead of expandable mush
- Cmd/Ctrl+Shift+P — command palette: type "screenshot" for full-page capture, "coverage" for unused CSS
- Network → throttling — feel your site on Slow 4G like your real users do
- Elements → :hov — force :hover/:focus states to debug them calmly
- Right-click element → Break on → subtree modifications — find WHAT JS changes this DOM node
- Console $$('.card') — querySelectorAll shorthand, returns a real array
- Sources → right-click a line → conditional breakpoint — break only when
i > 500 - copy(object) — any console value straight to clipboard as JSON
- Lighthouse tab — performance/SEO/accessibility audit with concrete fixes
Practice on this very page — open DevTools and inspect how the design system variables work.
← All Articles