![如何找到负责任的样式选择器](https://linux22.com/image/1560465/%E5%A6%82%E4%BD%95%E6%89%BE%E5%88%B0%E8%B4%9F%E8%B4%A3%E4%BB%BB%E7%9A%84%E6%A0%B7%E5%BC%8F%E9%80%89%E6%8B%A9%E5%99%A8.png)
Mozilla Firefox 开发者工具有两个不同的主题,浅色和深色。深色是 Firefox 开发者的默认主题,浅色是普通 Firefox 的默认主题。
我想找到实际的样式表(假设这些样式表是用样式表设计的)来编辑它们。我目前使用的是 Windows,我假设由于我无法在 appData 中找到它们,因此它们一定位于某个我可以使用资源黑客访问的 .exe 或 .dll 中。
答案1
Mozilla 中 DevTools 窗口使用的样式位于omni.ja
压缩文件中。
在当前版本的 Firefox 中,有两个 omni.ja 文件:
此 ZIP 文件包含 DevTools 的资源文件:“C:\Program Files\Mozilla Firefox\browser\omni.ja”
此 ZIP 文件包含其他资源文件。DevTools 未使用的:“C:\Program Files\Mozilla Firefox\omni.ja”
资源黑客,无需更改 DLL 或 EXE 文件。omni.ja
是标准 (deflate) ZIP 文件,没有添加签名或其他技巧。
要更改样式,您最感兴趣的是 omni.ja 中的 css 文件。
让我通过一个示例向您展示如何自定义内置主题之一。
在此示例中,我将更改颜色以突出显示 DevTools 的 Inspector/Rules 部分中的标题。
我希望它突出显示,因为我习惯在 DevTools Inspector 中查找 CSS 规则,并且我最感兴趣的是“此元素”的规则。
我很恼火,因为我经常忽略,我已经滚动过了“此元素”进入“继承...”部分。
在深色主题中,它看起来像这样:
在下面的例子中,我将展示如何将其样式更改为此结果以突出显示部分标题:
如何找到负责任的样式选择器
您可以逐一浏览 omni.ja 中的 css 文件,并使用 try & error 方法对 css 中的一堆规则进行测试修改,然后查看结果。
但这不是最好的选择,因为 Firefox 中有一个专门用于此目的的出色工具。 浏览器工具箱 - 如何激活和使用它。
然后,你可以在 DevTools 上使用 DevTools 来检查检查器:
现在我们很快就知道了本例所需的选择器是.ruleview-header
,并且它在rules.css
文件中定义。
我们也可以点击rules.css
直接在 FF 中查看其内容。
这是覆盖规则,它将更改标题的颜色,如上图第二张图所示:
.ruleview-header {
background: #905252 !important;
color: white !important;
}
或者遵循与 omni.ja 中的 css 文件中使用的相同方案,这是我在现有 css 文件中修改/添加的内容(我添加的文件在注释中有“added”关键字,我修改的文件有“was:”关键字显示原始值)
/* CSS Variables specific to this panel that aren't defined by the themes */
:root {
--rule-header-color: var(--theme-toolbar-color); /* to keep light theme as it was */
}
:root.theme-dark {
/* was: --rule-header-background-color: #222225; */
--rule-header-background-color: #905252 !important;
--rule-header-color: white; /* added */
}
/* Rule View Container */
.ruleview-header {
/* was: color: var(--theme-toolbar-color); */
color: var(--rule-header-color) !important;
}
/* expandable headers will follow the style of .ruleview-header,
but here it can by styled separately */
.ruleview-expandable-header {
/* background-color: YOUR_COLOR !important; */
}
.ruleview-expandable-header:hover {
/* was: background-color: var(--theme-toolbar-background-hover); */
}
修改内容放在哪里
- 您可以编辑实际的 rules.css 文件并将其打包回 omni.ja 文件,但在 FF 更新后,您的更改将会丢失。
- 编辑
userChrome.css
文件并添加它应该在的地方。。在这种情况下,您必须在所有覆盖规则上使用 !important。 - 使用扩展程序,例如 Stylus
- 创建您自己的扩展
我认为在大多数情况下,使用userChrome.css
文件是最好的选择。
在 Firefox 中直接查看资源文件
可以使用 chrome: 和 resource: 伪协议查看一些文件夹/文件。
皮肤文件夹中的文件,例如:
zip 中的路径: .\chrome\devtools\skin\dark-theme.css
chrome://devtools/skin/dark-theme.css
* 无法列出目录。必须输入包括文件名在内的完整路径
主题文件夹中的文件,例如:
zip 中的路径:\chrome\devtools\modules\devtools\client\themes\variables.css
resource://devtools/client/themes/variables.css
* 也可以列出目录:resource://devtools/client/themes/
更多阅读:
https://stackoverflow.com/a/40793285/3273963
https://stackoverflow.com/questions/34147992/customize-firefox-developer-dev-tools-color-theme
https://stackoverflow.com/questions/47442661/firefox-quantum-developer-tools-theme
https://www.hongkiat.com/blog/personalize-firefox-dev-tools-theme/
https://www.reddit.com/r/firefox/comments/6qalvm/how_to_change_the_developer_tools_dark_theme_back/