自定义Chrome Web检查器的外观

Question

我已经厌倦了我每天在Firefox上遇到的众多问题，而我又想再次切换到Chrome。

让我感到沮丧的一件事是检查器中标签的布局。在萤火虫中它们都在顶部，所以如果我想要一个项目的指标，它非常简单。在Chrome中我会永远滚动上下。

有没有改变它的工作方式？我想做的就是将布局改为与Firebug有点类似的东西。

干杯！

Answer 1

Chrome网络检查器只是一个Web应用程序，因此可以自定义。您可以下载devtools HTML / CSS / JS的副本，并告诉Chrome将其与命令行标志一起使用。一些资源：

• 运行您自己的devtools frontend
• 自定义look and feel of elements tab
• 相关问题：Chrome "Developer Tools" element - hide annoying yellow dimensions box
• Chrome command line flags
的列表

Answer 2

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

如果您观看此video，Paul Irish会演示如何运行Chrome版本并指向您自己的开发工具代码。真酷！

Answer 3

devtools 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