简体   繁体   English

是否可以在 Firefox 开发人员工具中查看所有编辑过的样式?

[英]Is it possible to see all edited styles in Firefox developer tools?

My preferred CSS workflow (at least when tweaking existing CSS) is to edit directly in the browser using the 3-panel Inspector panel, then copy the edited styles to my stylesheet.我首选的 CSS 工作流程(至少在调整现有 CSS 时)是使用 3 面板 Inspector 面板直接在浏览器中进行编辑,然后将编辑后的样式复制到我的样式表中。

Sometimes I'll edit the styles for many elements and forget that I edited some element (since you can only see if it's edited AFAICT by selecting exactly that element and looking for rules with a green bar to the left).有时我会编辑许多元素的样式,而忘记我编辑了一些元素(因为您只能通过准确选择该元素并查找左侧带有绿色条的规则来查看它是否已编辑 AFAICT)。 Then I'll fail to manually copy that element's style changes to my stylesheet and, on reload, lose the changes.然后我将无法手动将该元素的样式更改复制到我的样式表,并且在重新加载时丢失更改。

Is there somewhere I can see all the places where I've edited styles using Inspector -- including adding new rules -- so that I can copy them all at once?有什么地方可以看到我使用 Inspector 编辑样式的所有地方——包括添加新规则——以便我可以一次复制它们?

This is currently only available in Firefox Nightly.这目前仅在 Firefox Nightly 中可用。 In about:config set devtools.inspector.changes.enabled to true.about:config中将devtools.inspector.changes.enabled设置为 true。 This will create a "Changes" tab in the dev tools with a Git-like panel showing all your changes.这将在开发工具中创建一个“更改”选项卡,其中包含一个类似 Git 的面板,显示您的所有更改。

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM