Christian Heilmann

Quick hack: How to make the new CSS Overview feature of Chromium Devtools shareable

Thursday, November 12th, 2020 at 1:41 pm

Ok, I am an impatient person. I also love to hack around with things. You may or may not know about an experiment in Chromium Developer Tools called CSS Overview. What it does is give you an excellent report about your web site’s CSS:

CSS Overview Results for this blog

You can see statistics about the CSS like how many selectors you used, you get an overview of all the colours, learn about contrast issues and which fonts you used.

It is a bit like a style guide, but generated from the CSS used in the document. Now, I’d love this to be shareable with third parties to show, for example, a client what they’ve done wrong in their CSS. But for now, this isn’t a feature yet.

However, there is a quick and dirty way to make the results shareable. You can watch the screencast on YouTube or look at the instructions below.

Here’s how to do this step-by-step.

  1. Go to the site you want to get the CSS overview from
  2. Open Developer tools (CMD|Ctrl+Option+I)
  3. If you haven’t got CSS Overview yet, go to the settings (the little cog), pick “Experiments” and select on the CSS Overview option
    Turning on CSS overview in the developer tools experiments
  4. Restart DevTools
  5. Go to the CSS Overview Tab and press the “Capture Overview” button – you should get your report
  6. Go to the … menu top right of the Developer Tools and select the “undock to separate window” option – the DevTools should be an own window now.
    Undocking the Developer Tools to get them in an own window
    Developer Tools in own Window
  7. Click on that window to give it focus and press CMD|Ctrl+Option+I again. This will open another DevTools instance that debugs the current one!
    Developer Tools debugging another instance of developer tools
  8. Go to the Elements tab and scroll all the way up until you are at the HTML element.
  9. Click the element and click the … menu at the beginning of the line
  10. Select “Copy Outer HTML” from the menu
    Selecting copy outer HTML in developer tools
  11. Close this instance of DevTools
  12. Dock the other instance back to the left of the browser (by selecting … again and choosing the left option)
  13. Open a new browser tab with CMD|Ctrl+t or hitting the + next to the tab
  14. Go to the Elements tab, and go back to the HTML element again.
  15. Right-Click and select “Edit as HTML
    Edit as HTML
    Editing HTML in Devtools
  16. Highlight all the HTML with CMD|Ctrl+a and paste the copied HTML with CMD|Ctrl+v
  17. Click outside the edit box and the document is now the report of the CSS Overview
  18. Print, save as HTML or whatever else you fancy

Quick and dirty, but for now does the job. Tell me what you think about the CSS Overview feature and what else it should do on Twitter at either @ codepo8 or the official @ EdgeDevTools account.

Share on Mastodon (needs instance)

Share on Twitter

My other work: