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

Question

9

这个问题涉及到CSS文件在编辑后作为“构建样式表”显示，导致该文件无法访问。

在Google Chrome DevTools中（最近一次在Chrome 86中复现）：

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

这是意外的，因为该样式表既不是构建的也不可变。在编辑之前它没有显示为“构建样式表”，但之后被识别为一个。

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

我不想失去我的CSS更改，这对我来说真的很烦人！我希望在页面上继续编辑，但CSS文件没有打开，而是构建样式表！

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

- Mahdi

什么意思？通过浏览器更改样式并不会直接在网站本身上进行更改，它只是用于调试。 - Alon Eitan

1

我不是想在网站上更改它，我是想知道为什么它会更改为构建的样式表，我不希望这种情况发生并继续编辑我的CSS！！！@AlonEitan - Mahdi

我最近几周/几个月一直遇到同样的问题，唯一的解决方法就是在需要关闭检查选项卡、重新加载页面并再次粘贴前执行“全选”和“复制”操作... - Olou

1

@Olou 感谢你分享你的想法，我正在做同样的事情，但你也可以使用Microsoft浏览器，它类似于Chrome检查元素;) - Mahdi

2个回答

0

我曾经花费了很多时间解决类似的问题，也许我可以帮你节省一些时间。

我使用的是勇敢浏览器，我的内容被勇敢浏览器拦截了，我所做的就是允许所有跟踪器和广告，这样问题就解决了。

- Abraham

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- MaxiGui · Accepted Answer

第一种解决方案

您的HTML或CSS文件中是否有以下内容： isConstructed 或 isMutable

根据Google开发工具文档，这是由于以下标头造成的：https://chromedevtools.github.io/devtools-protocol/tot/CSS/

尝试删除它们，您就不应该再遇到这个问题了。

第二种解决方案

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