Chrome dev tools : how to filter css styles by file name

Sometimes you need to analyze the css styles coming from a specific file, and the chrome developer tools shows all the style from all the linked css files.

Here is an example from NYT website:

If you need to focus only on a specific CSS file type the name on the filter box in the right upper corner, i.e. “_story.scss” :

Now you can browse other pages in the same website and you will see only the styles coming from the _story.scss file.

It works also if you have multiple css files with the same name but with different query strings:

style.css?ver=1.0.1
style.css?ver=2.0.0

Write in the filter box “ver=2.0.0” and you will see only the styles from the 2.0.0 version.

You can also edit and save the css file using this guide.

Hope this helps!