Chrome Web Developer 工具，无法进行实时 CSS 编辑，重置为默认值

Posted 2023-03-07

【中文标题】Chrome Web Developer 工具，无法进行实时 CSS 编辑，重置为默认值

【英文标题】：Chrome Web Developer tools, live CSS editing won't work, resets to default

【发布时间】：2012-10-04 09:40:31

【问题描述】：

出现奇怪的 Chrome Web Developer 工具行为。当我尝试更改元素的现有 CSS 属性时，按 Enter 后，它会重置为以前的默认状态。早些时候，一切正常。已禁用所有扩展，没有任何变化。这是什么？ ps Chrome 版本 22.0.1229.94m

【问题讨论】：

尝试右键单击元素，添加属性，并设置内联样式。

内联样式工作正常，但更改现有样式不会，只会重置。为什么？

当您在 element 样式中设置样式时，有一个错误会重置样式（或根本不应用它们）。 也许创建一个新的 CSS 类并应用它到元素可能会起作用。

我也有同样的问题。一旦我尝试更改它，我的 CSS 文件设置的任何样式都会简单地重置为原始值。我正在运行 Chrome 24.0.1290.1 开发版。在 Chrome 的开发工具中对页面进行样式更改的唯一方法是创建一个新的样式属性。

如果您尝试更改的样式在 html 元素的 style 属性（即 <p style="font-size: 17px;">）上硬编码/定义，则 OP 描述的问题也可能发生显示样式的栏。要更改它，您必须编辑 HTML 元素。

【参考方案1】：

这对我有用。

在 Chrome 开发者工具 > 设置 > 常规选项卡下，检查选项：

禁用缓存（在 DevTools 打开时）

【参考方案2】：

我有同样的问题。 确保文件名正确后，从工作区中删除该文件夹，然后再次添加它使实时编辑能够在本地文件的 chrome 上再次正常工作。

【参考方案3】：

重新启动 Chrome 并重试... 您也可以尝试在新标签页中重新加载页面。

这可能是 Chrome 的错误。当我使用 jQuery css() 命令对元素应用样式时会发生这种情况，但我想它也可能发生在许多其他场景中。

【讨论】：

这并没有提供问题的答案。要批评或要求作者澄清，请在其帖子下方发表评论。

@MaximillianLaumeister 我添加了一个说明。

是否有解决此错误的方法，因为我还通过 jQuery CSS API 添加 css，并且开发工具不允许从样式面板编辑该 css。

【参考方案4】：

一定要检查你的样式表是否有错误——它甚至可能不是很明显的东西，或者 CSS 检查器会发现。

在我的例子中，有问题的样式是一些 输入元素伪选择器，用于设置占位符文本的样式。删除了这些线条，它再次完美运行！

编辑： 在我的情况下，错误似乎更具体地是通过将 任何非 webkit 前缀输入占位符伪选择器放置在媒体查询中引起的。去图...

现在要弄清楚为什么会出现问题...

【讨论】：

类似问题：我的在这条线断了：@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) 当我删除它的min-resolution 部分时工作正常。

啊，我错过了媒体查询的“屏幕”部分。这修复了它：@media screen (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi)

【参考方案5】：

我在一个网站上遇到了这个问题，我将其范围缩小到缺少背景资源。

我已切换到使用 FireFox 进行实时 CSS 编辑，FireBug 扩展从未遇到过问题。

【参考方案6】：

@viewport 的 Chrome 错误是我的原因：https://code.google.com/p/chromium/issues/detail?id=278289

【参考方案7】：

我不确定这是否是同一个问题，但我发现当 AdBlock Plus 扩展程序处于活动状态时这无法正常工作..

这可能是错误，但我记不清了。https://code.google.com/p/chromium/issues/detail?id=138854&can=1&q=adblock%20cr%3DPlatform-DevTools&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20Modified

我发现只需单击 ABP 图标并为相关站点禁用它即可恢复功能。

【参考方案8】：

http://code.google.com/p/chromium/issues/detail?id=155795 已在树的顶端修复，该修复最终将传播到 Chrome 23（当前 beta）和 Chrome 22（当前稳定）。很抱歉，感谢您的耐心等待。

无论如何，请检查您的样式表是否有错误，因为此类问题仅在编辑损坏的样式表时才会发生。 http://jigsaw.w3.org/css-validator/ 是一个很好用的工具（注意“Parse error”错误。）

【讨论】：

仅供参考，当@-viewport 不带连字符 (@viewport) 时，我遇到了这个问题。有趣的是，w3 的示例没有连字符。

w3 验证愚蠢的想法，我得到zoom:1 作为一个错误，它不存在，对于 chrome 做出这个决定真的很糟糕。

绝对不是这种情况只发生在样式表损坏的情况下。这仍然在 2015 年发生

@BT：请随时在crbug.com/new 提交错误，其中包含重现问题所需的所有细节（减少测试用例会很棒）。附：您是否偶然尝试编辑动态注入页面的样式表（即通过 DOM 操作）？

不，我愿意。我正在尝试使用 element.style 来解决该问题。关闭标签并重新打开页面解决了问题 - 损坏的标签？它间歇性地发生，所以我不确定如何进行复制（最小或不）。