DEV Community

Christian Heilmann
Christian Heilmann

Posted on

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

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 christianheilmann.com

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 two rectangles on top of one another) - 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 or bottom 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.

Top comments (0)