Uploaded June 2023 | Updated September 2026, 1 hour ago
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.
Links
π§ͺ DevTools experiments you should enable video: youtu.be/7MgVds-MNx4
π¨ CodePen Demo: codepen.io/ZoranJambor/pen/vYpzGwV
Subscribe to CSS Weekly Newsletter:
π css-weekly.com
Course Mastering Prettier & Stylelint
π₯ Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
π·οΈ Use coupon code YOUTUBE15 to get an additional 15% off on the already discounted, pre-launch price.
π 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
Keep up-to-date with CSS Weekly:
π Twitter: twitter.com/CSSWeekly
π Instagram: instagram.com/cssweekly
π Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
π Blog: zoranjambor.com
π Twitter: twitter.com/zoranjambor
π LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#devtools #css
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.
Links
π§ͺ DevTools experiments you should enable video: youtu.be/7MgVds-MNx4
π¨ CodePen Demo: codepen.io/ZoranJambor/pen/vYpzGwV
Subscribe to CSS Weekly Newsletter:
π css-weekly.com
Course Mastering Prettier & Stylelint
π₯ Learn everything about best linting tools while supporting CSS Weekly: masteringlinting.com
π·οΈ Use coupon code YOUTUBE15 to get an additional 15% off on the already discounted, pre-launch price.
π 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
Keep up-to-date with CSS Weekly:
π Twitter: twitter.com/CSSWeekly
π Instagram: instagram.com/cssweekly
π Facebook: facebook.com/CSSWeekly
Keep up to date with what I'm up to:
π Blog: zoranjambor.com
π Twitter: twitter.com/zoranjambor
π LinkedIn: linkedin.com/in/zoranjambor
- Zoran Jambor
#devtools #css
