Work Smarter, not Harder with Chrome DevTools
summary
Live demos show Chrome DevTools features that find and fix real problems: CSS Overview captures all page colors and links each color to the elements (example site shows 11 contrast issues), the color picker suggests accessible replacements, and Emulate vision deficiencies simulates color blindness (1 in 10 men, 1 in 200 women). Rendering tools include paint flashing to spot excessive repaints and designMode for quick text edits. Recorder captures and replays clicks and exports Puppeteer JSON, overrides let you mock or block network responses, and a built‑in Ask AI assistant suggests fixes.
AI-written summary · about
chapters (18)
- 0:00Introduction and audience check
- 3:58What are Chrome DevTools
- 5:24CSS overview and color issues
- 9:37Emulating vision deficiencies
- 11:05Fixing contrast ratio problems
- 13:54Accessibility tree inspection
- 16:01Detecting rendering issues
- 18:11Design mode for quick edits
- 19:59Centering elements with AI
- 24:43Recording user interactions
- 29:00Network performance and metrics
- 30:28Local and field performance data
- 33:18Annotating performance entries
- 36:54Lighthouse audits and insights
- 37:39AI assistant for network issues
- 39:29Overriding API responses
- 41:58Blocking requests for testing
- 42:39Summary and closing tips
related talks
43mHow to use Chrome DevTools to improve accessibility of your webpage
47mHow to use Chrome DevTools to improve accessibility of your webpage
11mChrome DevTools for designers
20mGoing steady with the Chrome Dev Tools
10mThe CSS-ential Guide to New DevTools Features
48mUsing Chrome Developer Tools
35mOptimise your Web Development Workflow
11mWhat's new in DevTools