css - 使用 Inspect Element 编辑 CSS 后，Chrome DevTools 将 CSS Link Files 更改为 "Constructed Stylesheet"，如何解决？

Question

这个问题是关于 CSS 文件的，这些文件是 不是 构造的样式表在编辑后显示为构造的样式表，这使得文件无法访问。
在 Google Chrome 开发者工具中 ,(最后在 Chrome 86 中复制):
每当我使用 Inspect Element 编辑我的 HTML 页面的 css，然后我关闭了检查元素，然后如果我再次打开它，所有应该显示文件名的链接(即 styles.css:1 )都被替换为“constructed样式表”:

这是出乎意料的，因为样式表是 不是 构造的或可变的。它在编辑前不显示为“构造的样式表”，但在编辑后被识别为一个。
现在，样式表不再出现在“源”和“更改”选项卡中，单击“构造的样式表”链接会将您转到元素而不是文件。重新加载页面可以解决问题，但所有 CSS 更改也会丢失。
我不想丢失我的 css 更改，这对我来说真的很烦人!
我想继续在页面上进行编辑，但是 css 文件没有打开，而是
构造的样式表!
大家知道怎么解决这个问题吗？

Answer 1

您的 html 或 css 文件中是否有类似以下内容:isConstructed或 isMutable基于谷歌开发工具文档，它的发生是因为这些标题:https://chromedevtools.github.io/devtools-protocol/tot/CSS/
尝试删除它们，你不应该再拥有它了
根据这篇文章，这可能是您调用 css 的方式。如果你这样称呼它:const sheet = new CSSStyleSheet();或 const style = document.createElement('style');