Quick hack: How to make the new CSS Overview feature of Chromium DevTools shareable
Tags: developertools, browsers, edge, chrome
Published: 2020-11-12 13:14:15

---
title: Quick hack: How to make the new CSS Overview feature of Chromium DevTools shareable
published: true
description: There's a great new feature in Chromium Developer tools but you can't share the results. Here's a hack how to do that.
tags: developertools,browsers,edge,chrome
//cover_image: https://direct_url_to_image.jpg
---

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](https://docs.microsoft.com/en-us/microsoft-edge/devtools-guide-chromium/experimental-features) called CSS Overview. What it does is give you an excellent report about your web site's CSS:

![CSS Overview Results for christianheilmann.com](https://dev-to-uploads.s3.amazonaws.com/i/1c5e887r2wwwgfnb3ntk.png)

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](https://youtu.be/UGZsofmNtp4) or look at the instructions below.

{%youtube UGZsofmNtp4 %}

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

1. Go to the site you want to get the CSS overview from
1. Open Developer tools `CMD|Ctrl+Option+i`
1. 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](https://dev-to-uploads.s3.amazonaws.com/i/oged438gg6j9q54jbvn9.png)
1. Restart DevTools
1. Go to the `CSS Overview` Tab and press the `Capture Overview` button - you should get your report
1. 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](https://dev-to-uploads.s3.amazonaws.com/i/4q1miqtxh4td4qf11rot.png)
![Developer Tools in own Window"](https://dev-to-uploads.s3.amazonaws.com/i/7583i65cvvd4fuaqk9so.png)
1. 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](https://dev-to-uploads.s3.amazonaws.com/i/7myei4ub4oesi8woyu0o.png)
1. Go to the `Elements` tab and scroll all the way up until you are at the `<html>` element. 
1. Click the element and click the `...` menu at the beginning of the line
1. Select `Copy Outer HTML` from the menu
![Selecting copy outer HTML in developer tools](https://dev-to-uploads.s3.amazonaws.com/i/gthcu7z3jeqx6s4tsdqw.png)
1. Close this instance of DevTools
1. Dock the other instance back to the left of the browser (by selecting `...` again and choosing the `left` or `bottom` option)
1. Open a new browser tab with `CMD|Ctrl+t` or hitting the `+` next to the tab
1. Go to the `Elements` tab, and go back to the `<html>` element again. 
1. Right-Click and select `Edit as HTML`
![Edit as HTML](https://dev-to-uploads.s3.amazonaws.com/i/acej1hfilkfahb4cmsj2.png)
![Editing HTML in Devtools](https://dev-to-uploads.s3.amazonaws.com/i/43x9xrjmevicez7e7hrw.png)
1. Highlight all the HTML with `CMD|Ctrl+a` and paste the copied HTML with `CMD|Ctrl+v`
1. Click outside the edit box and the document is now the report of the CSS Overview
1. 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](https://twitter.com/codepo8) or the official [@EdgeDevTools](https://twitter.com/edgedevtools) account.