Chrome DevTools for designers

on YouTube ↗11m

" summary

Demonstrates specific fixes: runs CSS Overview to find contrast failures, uses the color picker’s contrast suggestions to reach AAA, enables the automatic contrast reporting experiment, and patches a misplaced dot in a webp image path to reproduce a bug. Emulates dark mode, toggles reduced-motion to verify a 5-turn animation becomes 0.5 turn and changes translateX to translateY to fix direction, and uses the flexbox overlay and flexbox editor while toggling dual‑screen emulation to resolve footer layout on foldables.

AI-written summary · about

" chapters (5)

1. 0:00Intro
2. 0:25Contrast
3. 3:31Mobile
4. 6:34Layout
5. 8:44Bug fixes

" related talks

• 43mWork Smarter, not Harder with Chrome DevToolsDominika Zając · React Paris 2025
• 11mWhat's new in DevToolsJecelyn Yeen · Chrome Dev Summit 2020
• 10mThe CSS-ential Guide to New DevTools FeaturesRebecca Davidsson · Devworld Conference 2025
• 25mDevTools Deep DiveAlex Lakatos · JSPoland Conf 2017
• 43mHow to use Chrome DevTools to improve accessibility of your webpageDominika Zając · Copenhagen Developers Festival 2023
• 28mWe have DevTools. What about DesignTools?Razvan Caliman · CSSconf EU 2018
• 47mHow to use Chrome DevTools to improve accessibility of your webpageDominika Zając · NDC London 2023
• 20mGoing steady with the Chrome Dev ToolsPaul Irish · JSConf US 2011