5

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!

Christopher Leckie
  • 123
  • 1
  • 5

3 Answers3

2

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:

Community
  • 1
  • 1
Boris Smus
  • 8,220
  • 2
  • 36
  • 33
  • Huge thanks for this, I know what I'll be doing when I've got a bit of spare time! – Christopher Leckie Aug 25 '11 at 08:18
  • Do these things still work? I can't get them to. I can't even get my own devtools front-end running. I'm now downloading 4.9 GB of blink source to see where everything lives. Any idea? – Rudie Oct 12 '14 at 16:08
0

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!

Sudarshan
  • 18,140
  • 7
  • 53
  • 61
wesbos
  • 25,839
  • 30
  • 106
  • 143
0

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
Duncan Smart
  • 31,172
  • 10
  • 68
  • 70