Issue with CSS not appearing in Google Chrome's coverage tab

As I delve into analyzing the extent of unused CSS on my webpage, I encounter a challenge. The webpage is crafted in Angular 7, with CSS incorporated through the angular.json build configuration.

The css appears to be added to the head of the html file, evident from multiple style tags visible in the developer tools.

While many sources suggest utilizing Google Chrome's coverage tab in developers tools for this purpose, it seems to work seamlessly for JS but not CSS in my case.

Accompanied by screenshots depicting my observations:

https://i.sstatic.net/w0IhD.png

All indications point towards JS. Filtering for files containing CSS yields no results.

https://i.sstatic.net/kS8iz.png

Despite successful downloads of CSS files, they remain elusive in the analysis.

https://i.sstatic.net/yQiHL.png

How might one effectively scrutinize the code coverage styles present in the document's head section?

A peek at the structure within the document's head reveals:

https://i.sstatic.net/E5Dyi.png

https://i.sstatic.net/202kr.png

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

cssangulargoogle-chromegoogle-chrome-devtoolscode-coverage

Answer №1

It appears that all of your CSS is internal, meaning it is not being served from a separate file but rather bundled within the HTML code.

To test this, try moving the CSS content from one of the <style> tags into a separate .css file (e.g., test.css) and include these files in the <head> section using 

<link rel="stylesheet" href="test.css">
. See if this approach works and if the styles show up in coverage.

(Remember to remove the corresponding <style> tag from the original)

UPDATE

If you don't filter by the keyword CSS, you'll notice a single row with type CSS+JS or just JS, which won't appear when filtering by the keyword CSS.

Since all your styles are combined in the HTML, they merge into this row!

For example:

https://i.sstatic.net/0YJ9f.png

The link provided above should be the root URL of your application.

UPDATE

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

You were correct about dynamic CSS not being covered in the tab. The link above demonstrates adding a <style> tag via JavaScript, but those rules do not appear in any rows of the coverage tab. Well done :)

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Generate a dynamic key object in Angular/TypeScript

I am working with an object called "config" and an id named "id". My goal is to create an array of objects structured like this: [ "id" : { "config1: ... "config2: ... "config3: ... } "id2" : { "config ...

javascriptangulartypescript

Border becomes dashed when dragging and dropping

I am working on enabling drag and drop functionality for users. When an item is lifted from its original position, a gray dashed box should appear in its place. As the item is moved closer to another spot, the containers adjust to create a target area (gra ...

javascriptjqueryhtmlcssjquery-ui

Deactivate user input depending on a certain requirement

Greetings everyone, I am currently working with the following code snippet: <table class="details-table" *ngIf="peop && peopMetadata"> <tr *ngFor="let attribute of peopMetadata.Attributes"> <td class="details-property"&g ...

htmlangulartypescript

Utilize GroupBy and tally up items within an array using typescript

Here is a representation of my array, which is not a type of string but its own object called MyObject (similar to setter and getter objects in Java) ["Car","model","year","color","price"] ["Table" ...

angulartypescript

Set the background color of a webpage depending on the data retrieved from the database when a specific radio button

I am facing a challenge with my radio buttons that are set to light up green when the page loads. However, I am working on an "order system" where I need a specific button or "locker" to appear red instead of green when the page loads. While I have succes ...

phphtmlcss

Using the bootstrap container-fluid to create additional space on the right side

I've been trying to remove the right side padding in my container-fluid without success. There seems to be extra space where the red lines are marked. I have attempted various methods to fix this issue but I can't seem to identify where this ex ...

htmlcssbootstrap-5

the stacking context of elements with z-index and relative positioning

I am currently working on a modal that is toggled using JavaScript. Within the modal, I am dynamically adding an image using JavaScript. Additionally, there will be a div element overlaying the image to simulate cropping (extract coordinates from the imag ...

csscss-position

Animating transitions in a Vuetify data table

I am in the process of animating the data on a Vuetify data table. My objective is to make the current data slide out to the right when Next is clicked, and then have the new data slide in from the left. The current result I am getting can be viewed here: ...

cssvue.jsvuetify.js

Struggling to get custom CSS to apply properly in Joomla 4 with Bootstrap 5 template

Having created a simple Bootstrap 5 template for my Joomla 4 website, I've been attempting to customize the navbar with CSS in my user.css file. However, it seems that the styles added in user.css are not being applied. I have verified that user.css ...

cssbootstrap-5joomla4

Refreshing the Angular2 view upon asynchronous model changes

Looking at my Angular2 component, I see that it has a dependency on a datastore. In the template, there are some data bindings connected to that store, like "{{datastore.weather.curTemp}}". The datastore receives updates periodically through http requests. ...

angular

I am facing an issue where HTML is not loading images or some parts of my CSS in PHP

I've been working on connecting my website to a MySQL database using PHP. Initially, I thought I could keep the HTML and CSS the same, but after adding everything, the images on the website stopped showing up as they did before. The fonts and other el ...

phphtmlcssimage

Issue with Angular modal popup not repositioning upon clicking elsewhere on the page

I have encountered an issue with modal popups on my website. Specifically, I have approximately 100 table elements and when I try to edit the element #100, the modal popup appears at the bottom of the page. However, if I scroll back up and click on eleme ...

angularscrollmodal-dialog

Exploring the nativeElement property of a customized Angular HTML element

In my Angular Jasmine Unit Test, I am testing a third-party slider component in my application using the following code snippet: Here is the HTML: <ui-switch id="EditSwitch" name="EditSwitch" (change)="togglePageState()"></ui-switch> And her ...

javascriptangularunit-testingtypescriptjasmine

Surprising sight of a blank canvas behind the font-awesome icon

Is there a way to remove the unexpected white background that appears when adding a font-awesome icon? Here is the HTML code: <div class="notifications-window" id="close-notifications"> <div class="notifications-header&qu ...

htmlcssiconsfont-awesomestyling

Looking to effectively personalize various React MUI components?

I want to enhance the MUI component by adding more variations and new properties. Check out this screenshot of a React Example component: The Example component can be seen in the image above. I am seeking advice as I don't have much experience with ...

cssreactjsmaterial-ui

One of the quirks of Angularjs is that the ng-enter animation will only be

The initial animation only occurs the first time. I am utilizing Angularjs version 1.2.22 Here is the CSS that I am using : .ng-enter { animation: bounceInUp 2s; } .ng-leave { animation: bounceOutUp 2s; } And this is the route configuration : ...

javascriptcssangularjsanimationng-animate

Converting input tag to a method in component with uppercase transformation

Currently, this code resides within the <input tag I am looking to convert this code into a method in my component. Any ideas on how to do this? oninput="let p=this.selectionStart; this.value=this.value.toUpperCase(); this.setSelectionRange(p,p) ...

angularmethodscomponentsuppercase

What steps can I take to ensure that the text content stays within the borders and does not overlap with the photo?

click here for the image description Html <p><img src="index-foto1.jpg" align="left" width=65% style="border-radius: 10px;" margin-right: 2px> <div class="tant"><h3>More detailed inform ...

htmlcss

Display a list of personalized post types and emphasize the item that is currently being viewed

I've created a unique type of post called 'product'. Every product page has a sidebar listing all products, with the current product displayed in bold text. For instance, when viewing product 3, it should appear like this: Sidebar Pr ...

phpcsswordpress

What could be causing Media-Query to fail when using the max-width media feature?

I recently added a max-width media feature to my code, but for some reason, the colors aren't changing when the width is less than 300px. I've been trying to inspect elements on my laptop to troubleshoot the issue. Additionally, I've made su ...

htmlcssmedia-queries