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 (ie 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?

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');