Viewing Unused JS & CSS Codes on Google Devtools

You can view unused Javascript and CSS codes on the page on Chrome Devtools (Inspect) coverage.

While creating web pages, code fragments that are not used during rendering and loaded onto the unnecessary page increase the page load unnecessarily, thus negatively affecting the page opening performance.

Chrome Devtools Coverage

To open DevTools (Inspect) on the Chrome web browser, right-click with the mouse and click inspect. You can also open it with the keyboard shortcut, Option + Command + I for Mac OS, Ctrl + Shift + J or F12 for Windows and Linux.

In order to view unused CSS and JS resources in the review screen, it is necessary to open the Coverage section. Click on the three dots at the top right of the screen and then go to > More Tools > Coverage.

After clicking the Coverage button, the “Click the record button to start capturing coverage.” Click the field.

After clicking the button, information about how much of the resources uploaded to the page is not used appears.

When one of the URLs listed in the Coverage tab is clicked, the used and unused parts of the codes in the source URL selected in the Sources tab above appear.

In the code fragments that appear in the Sources field, those with a red stripe on the left indicate the unused ones, and those with a blue stripe show the codes used.