Customise the look of the Chrome web inspector

Question

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!

Answer 1

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:

• Running your own devtools frontend
• Customizing look and feel of elements tab
• Related SO question: Chrome "Developer Tools" element - hide annoying yellow dimensions box
• List of Chrome command line flags

Answer 2

The devtools CSS is at chrome-devtools://devtools/devTools.css (copy and paste the address into the address bar).

Override the styles using Custom.css which lives at:

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

Answer 3

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!