Search code examples
htmlcssgoogle-chrome-devtoolscode-coverage

Find out where the CSS codes are used in the web page after Pick out them via Chrome DevTools?


I am using Chrome DevTools Coverage tab to check the used part of a CSS file on wegpage https://www.datanumen.com/outlook-repair/, as below:

enter image description here

In the CSS file https://www.datanumen.com/wp-includes/css/dist/block-library/style.min.css?ver=5.8,
among 3000 lines, only 3 lines are used. But how to find out the locations where these CSS rules are applied in the source HTML page?

Update

I go to "Elements" tab, then press Ctrl + F, then input class name "aligncenter", the first one found is as below:

enter image description here

It seems that there are two files that use the same class name "aligncenter" in its CSS rule. As the block library CSS comes from Gutenberg editor, while style.css is developed by the company who develop the website. It is very likely the block CSS should be removed. However, I want to know further if there is a way or tool to find such a case, i.e., multiple CSS files use the same class name as the selector(CSS class name collision)? I think such a case should be rather common in large website.

Moreover, when searching the 2nd instance of the aligncenter, I get the following result:

enter image description here

It says "No match selector or style", why?


Solution

  • Hei, instead of going to the source options, go in the Elements tab and look over the rule you are searching for, press on it and on the right you can see which file applies that style, and at which row. Like the screenshot below (just an example) Example

    EDIT

    2 CSS files use the same class name for the same CSS rule, how to find such a case?

    Well, there are cases where multiple CSS files could apply style at the same class element. This divides into 2 categories:

    1. The one that applies different styles to the same class
    2. The one that applies the same styles to the same class

    In the first case, there are no issues, and both styles will be applied. And to track those styling rules, you'd need to check both files.

    In the second case, the style will be applied by the last rule, so the last read by the system (example below) You can see how it works

    Also, on the second posted screenshot, you can see that the element that has "no applied style" simply does not exist, and is not a real element but a string noscript You can see in this screenshot that the image element is written between double quotes and does not represent a real HTML element. so no styling will be applied