删除开发期间在chrome devtools中创建的所有诊断样式

Question

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

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

如果我只改变一个元素,我可以关闭一个特定元素的样式规则,这样可以正常工作,但是对于更复杂的元素,比如菜单,例如样式可能涉及多个元素,那么很难记住哪些已在devtools内被更改以关闭它们.

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

Answer 1

我发现这样做的低保真方式是将ctrl-z按住几秒钟,它似乎可以从我所看到的各个面板中撤消所有内容.

Answer 2

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

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

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

Answer 3

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

这些 Chrome 开发工具资源均未表明这是可能的：

• https://developer.chrome.com/devtools/docs/authoring-development-workflow#styles
• https://developer.chrome.com/devtools/docs/dom-and-styles#styles
• https://developer.chrome.com/devtools/docs/elements-styles

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

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

关于您的评论，您确实想删除所有内联/元素样式，因为这似乎不可能，您应该考虑仅更改加载的样式表。然后您就可以恢复更改。

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

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

或者，您可以显示更改并通过单击按钮恢复它们：右键单击.css 文件，然后单击“本地修改...”。历史被打开。点击恢复