自定义Chrome网页检查器的外观

Question

我已经厌倦了在日常使用Firefox时遇到的众多问题，因此我再次尝试切换到Chrome。

其中一个让我感到沮丧的事情是检查器中选项卡的布局。在Firebug中，它们都在顶部，所以如果我想要一个项目的度量标准，那就非常简单。在Chrome中，我总是不停地上下滚动。

有没有办法改变这种工作方式？我只想将布局更改为与Firebug类似的东西。

谢谢！

- Christopher Leckie

Answer 1

Chrome的网页检查器只是一个Web应用程序，因此非常可定制。您可以下载devtools HTML / CSS / JS的副本，并告诉Chrome使用命令行标志来使用它。以下是一些资源：

• 运行自己的devtools前端
• 自定义元素选项卡的外观和感觉
• 相关SO问题：Chrome“开发人员工具”元素-隐藏烦人的黄色尺寸框
• Chrome命令行标志列表列表

- Boris Smus

---

非常感谢这个，我知道在我有一点空闲时间的时候该做什么了！ - Christopher Leckie

这些东西还能用吗？我无法使用它们。甚至我的开发工具前端也无法运行。我现在正在下载4.9GB的blink源代码来查看所有文件在哪里。有任何想法吗？ - Rudie

Answer 2

开发工具只是CSS/JavaScript，所以你可以做任何想做的事情。

如果你观看这个视频，Paul Irish展示了如何运行Chrome的构建并指向你自己的开发工具代码。非常酷！

- wesbos

Answer 3

开发工具的 CSS 文件位于 chrome-devtools://devtools/devTools.css（将地址复制并粘贴到地址栏中）。

使用 Custom.css 覆盖样式，该文件位于：

• Windows 上的 C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
• OS X 上的 ~/Library/Google/Chrome/Default/User StyleSheets

- Duncan Smart

---

这里有一个正在进行中的皮肤列表：http://darcyclarke.me/design/skin-your-chrome-inspector/ - Mixologic