All tooled up and nowhere to go?
summary
A rapid tour of Chromium developer tools that points to concrete, usable features: use pretty print and workspaces to edit live files, replace console.log with breakpoints and DOM breakpoints (including node removal), inspect stacking contexts with the 3D view, tweak timing in the animation editor, pick colors and edit box‑shadows visually, simulate devices, network and media queries, test reduced‑motion and color‑blind/high‑contrast views, run DevTools inside editors and even preview a real browser in DevTools in VS Code, and file feedback directly from the tools.
AI-written summary · about
chapters (16)
- 0:00Start
- 0:16COMPLETE STACK
- 3:07A demands gap...
- 3:27An assumptions gap...
- 5:20Use cases drive new features
- 5:52Usage gap
- 6:47Editor in the browser...
- 7:09Upgrading your dev experience...
- 10:41Animation Editor
- 10:563D View
- 11:52Easy to miss extra features...
- 12:21Colour Picker
- 12:35Shadow Editor
- 19:38Browser task manager!
- 23:14What makes me happy?
- 24:17Little touches that go a long way...
related talks
20mGoing steady with the Chrome Dev Tools
35mOptimise your Web Development Workflow
50mChrome Developer Tools Deep Dive
20mJavaScript Authoring Tooling
43mWork Smarter, not Harder with Chrome DevTools
48mUsing Chrome Developer Tools
33mEssential JavaScript debugging tools for the modern detective
43mModern web debugging with devtools