使用 Inspect Element 编辑 CSS 后，Chrome DevTools 将 CSS 链接文件更改为“构造样式表”，如何修复？

Question

这个问题是关于非构造样式表的CSS文件在编辑后显示为构造样式表，这使得文件无法访问。

在 Google Chrome DevTools 中，（最后在 Chrome 86 中重现）：

每当我使用 Inspect Element 编辑 HTML 页面的 css 时，然后关闭检查元素，然后如果我再次打开它，所有应显示文件名（即 ）的链接都styles.css:1将替换为“构造的样式表”：

这是意外的，因为样式表不是构造的或可变的。它在编辑前不会显示为“构造的样式表”，但在编辑后会被识别为“构造的样式表”。

现在，样式表不再出现在“源”和“更改”选项卡中，单击“构造的样式表”链接会将您带到该元素而不是文件。重新加载页面可以解决该问题，但所有 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');