css not showing in coverage tab of google chrome

user_8896573 0
Viewed 2135

I would like to analyse the amount of unused CSS on my webpage. This web page is written in Angular 7 and the css is being added in the angular.json build configuration.

This seems to be appending the css to the head of the html file; in the developer tools I can see several style tags.

I have read in many places that I should use the coverage tab of the developers tools in Google Chrome to do this. For me this is working for JS but not for CSS.

Here are screenshots of what I am seeing:

enter image description here

It is all JS. If I filter for files that conatin css it returns no results

enter image description here

But I can see that css files have been downloaded here.

enter image description here

How can I analyse the code coverage styles in the head of the document?

The head of my document looks like this:

enter image description here

enter image description here

p.s. I am using Chrome Version 75.0.3770.80 (Official Build) (64-bit)

angular google-chrome-devtools code-coverage google-chrome css
1 Answers

So all your CSS is internal it seems (they're not being served from a file, are bundled in the HTML).

Do a small test: put the CSS content of one of the <style> tags in a .css file (for instance, test.css) and include those files in <head> with <link rel="stylesheet" href="test.css">, and see if they work, and show up in coverage.

(and remove the corresponding <style> tag from original)

EDIT

If you don't filter by keyword CSS, you will see that there is a single row with type CSS+JS or JS, which DOESN'T show when you filter by keyword CSS.

Since your styles are all bundled in the HTML, they all clobber up to this row!

For instance:

CSS+JS in Coverage tab

Your address would be the root URL of the application.

EDIT

https://codepen.io/nilo-c-sar-teixeira/full/KLjbZW

You were right regarding dynamic CSS, it just isn't covered in the tab. The above link puts a <style> tag via javascript and the rules never show in any rows of the coverage tab. Good job :)

user_1520160
Related