16

我在我的开发工作流程中使用 gulp/live reload。使用 CSS 设置元素样式时，我有时会直接使用 Chrome 开发工具调整该元素的样式规则（编辑：使用元素面板下的event.style {} ）；然后当我以我想要的方式拥有它们时，我将它们复制到 Sublime Text 中并将它们保存到项目中。

问题是我所做的那些临时更改会在我保存 CSS 文件后继续阻止对 CSS 文件所做的任何更改，因此它们基本上会覆盖 Live Reload，这意味着我必须以标准方式重新加载页面才能查看（真实）更改在 css 文件本身中制作，这阻碍了实时重新加载的有效性。

如果我只更改了一个元素，我可以关闭一个特定元素的样式规则，这很好用，但在更复杂的元素（例如菜单）的情况下，例如样式可能涉及多个元素，那么很难请记住在 devtools 中更改了哪些以将其关闭。

有没有办法全局禁用或删除那些本地样式规则？

4

6 回答 6

13

我发现这样做的一种低保真方法就是按住 ctrl-z 几秒钟，从我所看到的情况来看，它似乎撤消了各个面板上的所有内容。

于 2014-12-24T03:26:34.810 回答
9

设置 -> 更多工具 -> 更改

现在您可以看到以前的所有更改

并允许使用Revert all changes左下角的按钮

于 2019-11-22T11:13:19.940 回答
2

不是最好的解决方案，但它似乎对我有用：

  • 调试器打开时
  • 打开调试器设置自定义和控制开发工具（三点菜单）
  • 进入设置
  • 使用“恢复默认值并重新加载”重置设置

编辑：如果像我一样，您将 Chrome 的调试器与文件系统相关联，请确保您的测试规则没有保存在文件系统上的 CSS 文件中，因为 Chrome 有权在文件系统上写入 CSS 资源。

于 2017-07-17T13:26:41.657 回答
0

我认为您不能禁用更改样式，因为这是开发工具的用途。

这些 Chrome 开发工具资源都没有说明这是可能的：

即使开发工具会跟踪添加/更改的元素样式，它们也可能已被中间的脚本更改。重置/删除可能会搞砸应用程序。

但是您可以删除直接对加载的样式所做的修改。

关于您的评论，您确实希望删除所有内联/元素样式，因为这似乎是不可能的，您应该考虑只更改加载的样式表。然后，您可以还原更改。

转到 .css 文件的源视图并在其中按 Ctrl-Z：

屏幕截图：开发工具：源 -> 文件（按 Ctrl-Z 恢复样式）

（有修改的文件标有星号）

或者，您可以显示更改并通过单击按钮还原它们：右键单击.css 文件，然后单击Local modify ...。历史打开。点击还原

截图：开发工具：源 -> 文件 -> 在源视图中右键单击 -> 单击

于 2014-12-22T20:21:22.683 回答
0

如果您还使用“源”选项卡中的“覆盖”，则对“元素”选项卡的“样式”部分的更改可能会卡住。要重置样式选项卡更改，请转到源 > 覆盖并禁用和/或清除您的覆盖。

于 2021-05-27T02:31:00.610 回答
0

这是我找到的解决方案（Chrome v93.0.4577.82）...

  • 打开 Chrome 开发工具 (F12)
  • 单击源选项卡
  • 您进行了本地修改的文件以紫色圆点显示。
  • 右键单击这些修改过的文件之一并选择Copy Link Address
  • 这将提供指向本地文件系统的链接，而不是原始源。
  • 在您选择的工具（例如 Windows 资源管理器）中导航到该文件的父目录。
  • 删除要删除覆盖的文件。

注意：对我来说，父文件夹是c:\temp\overrides\{sites_fqdn}\. 我找不到此文件夹的配置位置（即，据我所知，它不在任何chrome://flagsor之下）。chrome://settings

于 2021-09-21T15:59:36.173 回答