Chrome DevTools 在使用 Inspect Element 编辑 CSS 后将 CSS Link 文件更改为 "Constructed Stylesheet",如何修复?
Chrome DevTools changes CSS Link Files to "Constructed Stylesheet" after editing CSS using Inspect Element, and how to fix it?
这个问题是关于 CSS 文件的,这些文件 不是 构造的样式表,在编辑后显示为构造的样式表,这使得文件无法访问。
在GoogleChromeDevTools,(最后转载于Chrome86):
每当我使用 Inspect Element 编辑我的 HTML 页面的 css,然后我关闭 inspect 元素,然后如果我再次打开它,所有 links 应该显示文件名(即 styles.css:1
)被替换为“构造样式表”:
这是意外的,因为样式表不是构造的或可变的。它在编辑前不显示为“构建的样式表”,但在编辑后被识别为一个。
现在,样式表不再出现在“来源”和“更改”选项卡中,单击“构建的样式表”link 会将您转到元素而不是文件。重新加载页面可以解决此问题,但所有 CSS 更改也会丢失。
我不想丢失我的 css 更改,这对我来说真的很烦人!
我想在页面上继续编辑,但 css 文件打不开,它是
构造样式表!
你们知道如何解决这个问题吗?
第一个解决方案
您的 html 或 css 文件中是否有类似以下内容的内容:
isConstructed
或 isMutable
基于 google 开发工具文档,它的发生是因为那些 headers:https://chromedevtools.github.io/devtools-protocol/tot/CSS/
尝试删除它们,你不应该再有它了。
第二种解法
基于此 article,这可能是您调用的方式 css。如果你这样称呼它:const sheet = new CSSStyleSheet();
或 const style = document.createElement('style');
这个问题是关于 CSS 文件的,这些文件 不是 构造的样式表,在编辑后显示为构造的样式表,这使得文件无法访问。
在GoogleChromeDevTools,(最后转载于Chrome86):
每当我使用 Inspect Element 编辑我的 HTML 页面的 css,然后我关闭 inspect 元素,然后如果我再次打开它,所有 links 应该显示文件名(即 styles.css:1
)被替换为“构造样式表”:
这是意外的,因为样式表不是构造的或可变的。它在编辑前不显示为“构建的样式表”,但在编辑后被识别为一个。
现在,样式表不再出现在“来源”和“更改”选项卡中,单击“构建的样式表”link 会将您转到元素而不是文件。重新加载页面可以解决此问题,但所有 CSS 更改也会丢失。
我不想丢失我的 css 更改,这对我来说真的很烦人! 我想在页面上继续编辑,但 css 文件打不开,它是 构造样式表!
你们知道如何解决这个问题吗?
第一个解决方案
您的 html 或 css 文件中是否有类似以下内容的内容:
isConstructed
或 isMutable
基于 google 开发工具文档,它的发生是因为那些 headers:https://chromedevtools.github.io/devtools-protocol/tot/CSS/
尝试删除它们,你不应该再有它了。
第二种解法
基于此 article,这可能是您调用的方式 css。如果你这样称呼它:const sheet = new CSSStyleSheet();
或 const style = document.createElement('style');