Chrome DevTools 在使用 Inspect Element 编辑 CSS 后将 CSS Link Files 更改为“Constructed Stylesheet”，如何解决？答案

【问题标题】：Chrome DevTools changes CSS Link Files to "Constructed Stylesheet" after editing CSS using Inspect Element, and how to fix it?Chrome DevTools 在使用 Inspect Element 编辑 CSS 后将 CSS Link Files 更改为“Constructed Stylesheet”，如何解决？
【发布时间】：2021-01-25 04:53:05
【问题描述】：

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

在 Google Chrome DevTools 中，（最后在 Chrome 86 中复制）：

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

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

现在，样式表不再出现在“Sources”和“Changes”选项卡中，单击“constructed stylesheet”链接会将您转到元素而不是文件。重新加载页面可以解决问题，但所有 CSS 更改也会丢失。

我不想丢失我的 css 更改，这对我来说真的很烦人！我想继续在页面上编辑，但 css 文件没有打开，它构造样式表！

你们知道如何解决这个问题吗？

【问题讨论】：

什么意思？从浏览器更改样式并不会在网站本身上更改它，它只是用于调试
我不是打算在网站上更改它，我的意思是为什么它会更改为构造的样式表，我不想发生这种情况并继续编辑我的 css ！！！ @AlonEitan
我现在几周/几个月都遇到同样的问题，我唯一要做的就是“全选”，“复制”，在我需要关闭检查选项卡之前，重新加载页面并再次粘贴...
@Olou 感谢 Olou 分享你的想法，我也在这样做，但你也可以使用 Microsoft 浏览器，它类似于 Chrome Inspect Element ;)

标签： css google-chrome google-chrome-devtools inspect-element

【解决方案1】：

您的 html 或 css 文件中是否有类似以下内容： isConstructed 或 isMutable

根据 google dev tool doc，由于这些标头而发生这种情况：https://chromedevtools.github.io/devtools-protocol/tot/CSS/

尝试删除它们，你不应该再拥有它了

根据这篇文章，这可能是您调用 css 的方式。如果你这样称呼它：const sheet = new CSSStyleSheet(); 或 const style = document.createElement('style');

【讨论】：

移除 isConstructed 从哪里？怎么样？！我不明白！
不，我没有 isConstructed 或 isMutable 类或 text 之类的东西，只是检查元素阻止了我！！！
您必须在某个地方拥有它。但因为我没有你的项目。我找不到你。您应该在 chrome 文档中搜索。它也可能是您的 chrome devtool 中的设置。
但我必须告诉你它并没有解决我的问题，因为我在其他浏览器中没有这个问题！比如火狐：）
我确定不是我的项目问题，是我的 chrome 浏览器导致的：)