CODEWITHSUNDEEP
csstwitter-bootstrapgoogle-chrome-devtools
ScriptyChris
ScriptyChris

Reputation: 669

Find all used CSS Selectors on a page

At the beginning - I am sorry if title is not accurate. I just don't know how to call it properly.

Is there a way to find all paths related to some file, in my case it is bootstrap.min.css (it could be with unminified version) within a project? I mean, like on this screen:

enter image description here

So I want to find in DevTools (or may be in WebStorm, if it is simpler to do so) all Bootstrap paths that are related to all elements in project. At above screen i selected <nav> element with some Bootstrap classes, which I can see on the right. I emphased (red rectangle) Bootstrap CSS source file paths - already filtered by DevTools (orange rectangle). I could of course manually click on each link to exact line, but there are many HTML elements and some of them have multiple classes, there are few pages also. So it will take long time to click in all such links.

Is there a quick way to filter/find all such paths (that marked as red), which are used by Bootstrap CSS selectors to match all HTML elements in project?

Upvotes: 1

Views: 1366

Answers (1)

Garbee
Garbee

Reputation: 10981

  1. Open DevTools
  2. Overflow Menu > More Tools > Coverage
  3. Click record in the toolbar of the drawer panel
  4. Stop recording and view results

When viewing results you will be taken to the appropriate file in the Sources panel. This will then highlight each line in the gutter either red or green to indicate whether or not it was used. This works for CSS and JavaScript.

Access Coverage Coverage View in Sources

Upvotes: 3

Related Questions