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

Question

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

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

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

有什么方法可以全局禁用或删除那些本地样式规则吗？

Answer 1

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