DevTools, more than just a debugger
summary
Shows concrete DevTools actions and surprising outcomes: the Flexbox inspector reveals that Flex basis is a starting size not final, and setting flex-basis: 0 produces exact 2:1 growth ratios; the Grid overlay displays area names, line numbers and Firefox-only subgrid aligns nested content to parent tracks; shape-outside plus clip-path make text flow around non-rectangular images; a live demo (hosted online) wires these together in a working chat/layout/game prototype so each feature is seen, toggled and copied from the panel.
AI-written summary · about
chapters (8)
- 0:00Introduction
- 10:45Grid Template Areas
- 15:13SubGrid
- 21:23Shape Outside Clip Path
- 25:10Shape Outside Image
- 27:04Chat Interface
- 28:54Height
- 30:16Mixed Layout
related talks
43mDevTools, the CSS advocate in your browse
43mDevTools, the CSS Advocate in Your Browser
42mUsing DevTools to Understand Modern CSS Layouts
33mUsing DevTools To Understand Modern CSS Layouts – Chen Hui Jing at
25mDevTools Deep Dive
11mChrome DevTools for designers
28mWe have DevTools. What about DesignTools?
11mWhat's new in DevTools