在“检查”窗口中编辑CSS：页面刷新时样式仍然存在

Question

我最近注意到，当我在 Chrome 检查窗口中编辑样式（例如，向 div 添加边框）时，如果我关闭检查窗口，甚至刷新页面，样式将保留。最奇怪的部分是，如果我使用不同的浏览器（Safari 或 Firefox）打开本地，样式也会出现在那里。我发现的唯一解释是我可以在检查窗口的源选项卡中添加覆盖选项，但我没有添加任何覆盖。

如果有人遇到过这样的问题，请告诉我。谢谢！

Answer 1

您遇到的行为听起来确实不寻常，特别是因为 Chrome 的 Inspect Element 更改应该在页面重新加载后重置，并且它们不应该在不同的浏览器中持续存在。

1。持久本地缓存或 Service Worker

• 尝试清除缓存
• 此外，检查是否有任何 Service Worker 已注册。在 Chrome 中转至 chrome://inspect/#service-workers 并终止与您的网站相关的所有 Service Worker。

2。检查本地存储或 IndexedDB 条目

检查本地存储和 IndexedDB 中是否有可能保存样式信息的任何条目。清除可能保存您编辑的样式的任何可疑条目。

3.禁用扩展

禁用任何可能干扰 DevTools 或网站样式的 Chrome 扩展。

4。尝试隐身模式

在 Chrome 中的隐身窗口中打开网站。如果样式更改在这里没有持续存在，则表明它可能已缓存在您的常规浏览器会话中。

5。检查浏览器配置文件同步

尝试暂时退出 Chrome，看看更改是否仍然存在。

6。验证 CSS 源文件

如果您使用的是实时重新加载开发服务器，它可能会自动应用本地更改。