2

几天前我遇到了这个线程，希望摆脱 DevTools 窗口中的纯白色背景。chrome-devtools://devtools/devTools.css一件事导致另一件事，我开始使用基本 CSS 文件 ( ) 作为指南为更多元素添加规则。

正在修改的文件可以在以下位置找到：

苹果电脑： ~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

个人电脑： C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheetsCustom.css

Ubuntu（铬）： ~/.config/chromium/Default/User StyleSheets/Custom.css

在中途，我在使用非常常见的选择器修改规则时开始遇到问题。我遇到的前两个是#main和#toolbar。在为更常见的选择器添加规则时，如果网页也使用这些相同的选择器（即 google 搜索），那么这些规则也适用于这些页面或站点。

我明白为什么会这样。我的问题是...

有没有办法通过这个 Custom.css 文件只针对 Chrome 中的 DevTools 窗口而不影响任何其他域？

我尝试过使用@moz-document domain ()and@moz-document url-prefix ()声明，但无法弄清楚...

我现在放弃太远了，所以我希望有人可以提供帮助。

这是我到目前为止的进度截图：Chrome 开发者工具模组

4

1 回答 1

2

好的，所以在挖掘之后，我注意到我实际上错过了原始文章页面顶部的通知：

自从发表这篇文章以来，Chrome 团队已经为 Chrome 开发工具的容器添加了一个唯一的 ID。ID 是#-webkit-web-inspector（Trac 参考）

所以，我上面的帖子的修复是添加body#-webkit-web-inspector到你所有的选择器，它工作得很好，因此只针对 chromes DevTools 窗口。此外，非常重要......对于那些想要创建更完整主题的人，强烈建议通过“检查检查员”来完成。可以在此处找到有关如何执行此操作的更多信息：如何检查 chrome 中的网络检查器？

请参阅下面的“检查检查员”屏幕截图： 在此处输入图像描述

于 2013-04-25T10:59:43.750 回答