How to get Chrome's vintage audit panel in 2017? (How to use Chrome's Audit tool to remove unused CSS?)

Question

I'm trying to follow this tutorial that was written back in 2014: https://www.labnol.org/internet/remove-unused-css/28635/.

It says there should be a Remove unused CSS rules section that appears after running an "audit" in the devtools.

I'm currently using Chrome 60.0.3112.90 on Windows and there is no such section. It's not even in the specs. Was it replaced by Reduce render-blocking stylesheets? If yes, how is it the same?

Answer 1

Since chrome has updated, you now need to use CSS and JS code coverage. Find unused CSS and JS code with the new Coverage tab. When you load or run a page, the tab tells you how much code was used, versus how much was loaded. You can reduce the size of your pages by only shipping the code that you need.

The Coverage tab Figure 1. The Coverage tab Clicking on a URL reveals that file in the Sources panel with a breakdown of which lines of code executed.

There is a breakdown of code coverage in the Sources panel. Each line of code is color-coded:

Solid green means that line of code executed. Solid red means it did not execute. A line of code that is both red and green, means that only some code on that line executed. For example, a ternary expression like var b = (a > 0) ? a : 0 is colored both red and green. Note: The color-coding is likely to change in future Chrome releases. To open the Coverage tab:

Open the Command Menu. (cmd + shift + p)

Start typing Coverage and select Show Coverage.

Answer 2

To get the old audit panel:

1. Open developer tools at first by pressing f12 or Ctrl + Shift + I
2. Open the Command Menu (Cmd+Shift+P (or Ctrl+Shift+P)).
3. Start typing "Legacy".
4. Select "Show Legacy Audits".