/dev tips

(200) Learning from open source Improve page performance with Layout Shift Regions (202)

Chrome DevTools: Copy and extract all the CSS for an element on the page

9th August 2019
Copy and extract all the CSS for an element on the page

Dev Tips is back! We hit a significant milestone with Tip 200, I'm grateful for your positive feedback!

You can now extract all the CSS for a selected element. To try this out:

  1. Right click on a DOM node in the Elements Panel
  2. Select Copy > Copy styles

This feature is especially useful as CSS can often be scattered across many selectors, which makes extracting exactly what you need more of a challenge. The Copy styles feature does the hard work for you, and it will even include custom CSS variables, if any have been defined.

This feature is currently in Chrome Canary and will be making its way to stable soon

Sign up to receive a developer tip, in the form of a gif, in your inbox each week.