Chrome DevTools Tips – Styles Pane & Elements Panel
Become more efficient when working with CSS and HTML in Chrome Developer Tools.
Become more efficient when working with CSS and HTML in Chrome Developer Tools, from copying values in the Styles pane efficiently, navigating the Elements panel to using the command palette, working with colors, to identifying potential CSS improvements.
Chapters
- 00:00 Intro
- 00:15 Open DevTools using keyboard shortcuts
- 00:38 Copy values from Styles pane (declaration, rule, property)
- 02:04 View and copy all CSS Changes (Show Changes Drawer)
- 03:45 Navigate Elements panel (expand recursively, collapse children)
- 04:49 More Elements panel tips (Scroll into view, hide element)
- 05:43 Hovering in DevTools (highlighting elements, hiding info popup)
- 07:57 Select elements with pointer-events: none;
- 08:41 Working with colors (Color Palettes — CSS Variables, Custom, Page colors)
- 12:48 Capture an overview of your page’s CSS (CSS Overview)
- 14:53 Conclusion and more info
