自定义 Chrome 网络检查器的外观
我已经厌倦了每天使用 Firefox 时遇到的众多问题，我再次尝试切换到 Chrome。
让我沮丧的事情之一是检查器中选项卡的布局。在 Firebug 中，它们都位于顶部，所以如果我想要一个项目的指标，那是非常简单的。在 Chrome 中我总是上下滚动。
有没有办法改变这种工作方式？我想做的就是将布局更改为类似于 Firebug 的布局。
干杯!
I've grown tired of the multitude of issues I seem to hit on a daily basis with Firefox and I'm trying once again to switch to Chrome.
One of the things that frustrates me is the layout of the tabs in the inspector. In firebug they are all along the top so if I want the metrics of an item it's incredibly simple. In Chrome I'm forever scrolling up and down.
Is there anyway to change the way this works? All I want to do is change the layout to something a little similar to Firebug.
Cheers!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（3）
Chrome Web 检查器只是一个 Web 应用程序，因此非常可定制。您可以下载 devtools HTML/CSS/JS 的副本，并告诉 Chrome 将其与命令行标志一起使用。为您提供的一些资源：
The Chrome web inspector is just a web application, so is very customizable. You can download a copy of the devtools HTML/CSS/JS and tell Chrome to use it with a command line flag. Some resources for you:
devtools CSS 位于
chrome-devtools://devtools/devTools.css（将地址复制并粘贴到地址栏中）。使用位于以下位置的
Custom.css覆盖样式：C:\Users\\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets 在 Windows 上~/Library/Google/Chrome/Default/User StyleSheets在 OS X 上The devtools CSS is at
chrome-devtools://devtools/devTools.css(copy and paste the address into the address bar).Override the styles using
Custom.csswhich lives at:C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheetson Windows~/Library/Google/Chrome/Default/User StyleSheetson OS X开发工具只是 CSS/JavaScript，所以你可以做任何你想做的事情。
如果您观看此视频，Paul Irish 将向您展示如何运行 Chrome 的构建以及指向您自己的开发工具代码。有点酷！
Dev tools are just CSS/JavaScript so you can do whatever you want.
If you watch this video, Paul Irish shows how to run a build of Chrome and point to your own dev tools code. Kind of cool!