Chrome DevTools changes CSS Link Files to "Constructed Stylesheet" after editing CSS using Inspect Element, and how to fix it?

Question

This question is about CSS files which are not constructed stylesheets being displayed as constructed stylesheets after editing, which makes the file inaccessible.

In Google Chrome DevTools, (last reproduced in Chrome 86):

Whenever I'm editing css of My HTML page with Inspect Element, And then I'm closing the inspect element, then if I open that again, all the links that should display the filename (i.e. styles.css:1) are replaced with "constructed stylesheet":

This is unexpected because the stylesheet is not constructed or mutable. It is not displayed as a "constructed stylesheet" before editing, but is recognized as one afterwards.

Now, the stylesheet no longer appears in the "Sources" and the "Changes" tab, and clicking the "constructed stylesheet" link sends you to the element rather than to the file. Reloading the page fixes the issue, but all CSS changes are lost too.

I Don't want to lose my css changes, it's really annoying for me! I want to keep editing on the page, but the css file is not opening and it's constructed stylesheet!

Do you guys know how to fix this problem?

Tripinnate

What do you mean? Changing the styles from the browser is not changing it on the website itself, it's just for debugging – Intendancy

I Didn't meant to change it on the website, I meant why it changes to constructed stylesheet, i don't want to happen this and keep editing my css!!! @AlonEitan – Tripinnate

I'm having the same issue for few weeks/months now, the only thing I'm doing is "select all", "copy", before I need to close the inspect tab, reload the page and paste it again... – Navicert

@Navicert thanks Olou for sharing your idea, I'm doing the same, but you can also use Microsoft Browser, it's similar to Chrome Inspect Element ;) – Tripinnate

Answer 1

First Solution

Do you have in your html or in your css file something like: isConstructed or isMutable

Based on google dev tool doc it is happening because of those headers: https://chromedevtools.github.io/devtools-protocol/tot/CSS/

Try to remove them and you should not have that anymore.

Second Solution

Based on this article, it might be the way you are calling css. If you call it like: const sheet = new CSSStyleSheet(); or const style = document.createElement('style');

Avicenna

Remove isConstructed from where? how?!i don't get it! – Tripinnate

no i don't have isConstructed or isMutable classes or text or sth like that, it's just from inspect element that stopping me!!! – Tripinnate

You must have it somewhere. But as I dont have your project. I cant search for you. You should search in chrome doc. It might be a setting in your chrome devtool too. – Avicenna

but I have to tell you it didn't solve my problem, beacuse i don't have this problem in other Browsers! such as firefox:) – Tripinnate

I'm sure it's not my project problem, it's my chrome browser that causes this:) – Tripinnate

Here some docs: wicg.github.io/construct-stylesheets and developers.google.com/web/updates/2019/02/… – Avicenna

and to know more, i have this problem on every single page that i edit , weather it's mine or others, just it happens every single time! – Tripinnate

@Tripinnate Based on this article, it might be the way you are calling css. If you call it like: const sheet = new CSSStyleSheet(); or const style = document.createElement('style'); – Avicenna

Chrome does not link one of my css in Developer Tools after I override a property of a class using <style>.my-class{the-property: value}</style>. Instead, it shows "constructed stylesheet". – Augury

Answer 2

I spent a lot of hours on an issue similar to this, and maybe I could save you some time.

I was using Brave Browser and the content that I had was being blocked by Brave, all I did was Allow all trackers and ads and that fixed it.

Marquittamarr