15 Aug
Skin your Chrome InspectorUpdate: Since publishing this article the Chrome Team have added a unique ID to the container of the Chrome Dev Tools. The ID is #-webkit-web-inspector. via @paul_irish (Trac Reference)
Ever want to change the look of your Google Chrome Web Inspector? I personally love being able to customize the “theme” or “brush” of my favorite IDE and my Web Inspector is no different. If you’ve ever done some snooping around Google Chrome’s Web Inspector you may have noticed that it’s made of straight HTML + CSS + JavaScript. My buddy Paul Irish was the one to show me how you can “inspect” the Inspector (very Inception-esque).
With this knowledge, I acquired the help of my good friend Wes Bos. Together we went looking for a way to customize our installs. Luckily enough, the Chromium team have set us up with a nice way of inserting our own CSS.
Mac: ~/Library/Application\ Support/Google/Chrome/Default/User\ StyleSheets/Custom.css
PC: C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets\Custom.css ~Thanks to @VSC
Ubuntu (Chromium): ~/.config/chromium/Default/User\ StyleSheets/Custom.css ~Thanks to @Carlos
The file above is, as it sounds, a CSS file that you can modify and add your own custom styles to. To help you get started, I’m posting my Custom.css file for you to use. I’ve documented almost all the selectors so it should be easy to modify. Check it out below:
Note: You can check out more selectors and default CSS by copying + pasting the URL below in to your version of Chrome:
chrome-devtools://devtools/devTools.css
Have fun theming your install, and make sure to post your results back here!
Update: Some people have made some great skins. I especially like Ben Truyman’s IR Black theme seen here below. I’ll keep adding to this list of skins if you guys keep them coming!
tags: chrome / cobalt / css / google chrome / inspector / skin / theme
58 comments
-
Posted: Aug 15, 2011
YES! Thanks.
I may just try and port Solarized over the weekend.
-
Posted: Aug 15, 2011
Nice post. For Windows Vista the file location is here:
C:\Users\YourUsername\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets -
Posted: Aug 16, 2011
Hot stuff, Darcy. Well done.
-
Posted: Aug 16, 2011
Nice tip. Time to play with CSS.
-
Posted: Aug 16, 2011
Yay thanks, for Chromium (on Ubuntu
~/.config/chromium/Default/User\ StyleSheets/Custom.css -
Posted: Aug 16, 2011
Wow, that’s incredibly cool – I loves me some dark color schemes. Special thanks to Carlos for the Linux/Chromium location!
-
Posted: Aug 16, 2011
very cool. thanks for sharing.
-
Posted: Aug 16, 2011
You can add the following CSS to for better visibility on the collapsed/uncollapsed node indicators:
-
Posted: Aug 17, 2011
Sweet! In hindsight, this seems obvious… the best ideas always do.
-
Posted: Aug 17, 2011
Awesome! Now, does this only allow skinning of the elements tab, or is there a way to change the colors of text in the scripts tab as well?
-
Posted: Aug 17, 2011
I’ve never used User Stylesheets before, so here is a (perhaps stupid) question: what if some other site you browse use the same class names? Is there no way to do this in a site/app specific way (other than using very specific selectors, ie. #id > .class > .class)?
-
Posted: Aug 17, 2011
Ah I had no idea that’d be possible, I might have to give this a crack sometime soon!
-
Posted: Aug 17, 2011
Awesome! The beautiful autumn-on-dark theme is so gorgeous I don’t even feel the need to customise it. My path to the settings file (XP) was actually C:\Documents and Settings\((USERNAME))\Local Settings\Application Data\Google\Chrome\User Data\Default\User StyleSheets
-
Posted: Aug 17, 2011
That’s very handy! Thank you.
-
Posted: Aug 17, 2011
@Charlie, you could also do the following: http://dpaste.com/hold/596373/ This is with the default white node images.
-
Chrome dev console black skin | "My brain is my enemy" …
Posted: Aug 17, 2011
[...] banalnie prosta i wymaga jedynie znajomości CSS’a
otóż (pełny art. na ten temat jest tu) musimy podmienić plik CSS w katalogu użytkownika. Jego lokalizacja w zależności od systemu [...] -
Posted: Aug 17, 2011
Wow this is cool, a black coding area for my favorite dev tool
Thanks -
Posted: Aug 17, 2011
Wonder if there is a way to publish this kind of theme in the Google Web Store.
-
Posted: Aug 17, 2011
Leet!
-
Posted: Aug 17, 2011
Thanks for the great tip !
I gave it a shot : http://dpaste.com/596461/
(IR_Black SD theme from textmate)
-
Posted: Aug 17, 2011
Wow, very cool!!
-
Posted: Aug 17, 2011
@Kaelig I also recreated the IR_Black theme. Mine also decorates the other tabs as well. Even the console.
-
Posted: Aug 17, 2011
@kimblim the “Custom.css” stylesheet is specific to the Chrome Developer Tools pane. A website can’t touch it (not right now at least), since there is no external API to mess with that CSS or JS.
@Charlie @Kaelig Nice! I’ll post an update soon or may throw together a one off site for these skins.
-
Posted: Aug 17, 2011
@Burton You can easily change the primary id (#elements-content) to .text-editor-contents and you should be good to go. That class is the primary wrapper around the JS you look at in the Resources pane. Happy styling!
-
Posted: Aug 17, 2011
This is great, and Charlie’s addition was much needed. Here is some code for restoring the line highlighting:
https://gist.github.com/1151942 -
Posted: Aug 17, 2011
Whoops, IDs are very important, didn’t think about other sites using those common classed
fiddle updated
http://jsfiddle.net/matthewlein/77TK7/ -
Posted: Aug 17, 2011
Oh, i guess my other comment didn’t go in. I restored node highlighting and made a fiddle with the inpsector HTML in it
-
Posted: Aug 17, 2011
Here is a start of the Default “Espresso Tutti colori”
https://gist.github.com/1152045
Still needs some work
-
Posted: Aug 17, 2011
@Ben @Paul Your skins are awesome! Definitely worth checking out
-
Posted: Aug 17, 2011
For anyone looking for the path on a fresh install Lion the Library folder is hidden
-
Posted: Aug 18, 2011
That’s awesome. Now I have the same color scheme in my editor and chrome.
Thanks Darcy.
-
Web Design Weekly #8 | Web Design Weekly
Posted: Aug 19, 2011
[...] Skin your Chrome Inspector (darcyclarke.me) [...]
-
Posted: Aug 19, 2011
Awesome!
Now debugging will not be boring! -
Apply Custom Styles in Google Chrome Web Inspector | SumTips
Posted: Aug 19, 2011
[...] 'n Tricks Add comments Aug 192011 Love customizing things? Darcy Clarke has shown us a way to skin Google Chrome Web Inspector. Since Chrome’s Web Inspector is basically made of HTML and CSS, you can easily style it to your [...]
-
Posted: Aug 19, 2011
Sweet!
-
Posted: Aug 19, 2011
sweet post. =)
@Josue, let me know how porting the Solarized themes are coming along; I’d love to use Solarized & be willing to help out too!
-
Posted: Aug 20, 2011
For Google Chrome on Ubuntu – ~/.config/google-chrome/Default/User\ StyleSheets/Custom.css
-
Posted: Aug 21, 2011
For presenting, you often want to bump up the font-size for readability. Drop in this guy into your custom.css for that.
-
Posted: Aug 22, 2011
Sweet now my inspector matches my Sublime Text 2 editor…. almost
-
Posted: Aug 25, 2011
I’ve ported the vibrant ink textmate theme since it rocks so hard
(http://alternateidea.com/blog/articles/2006/1/3/textmate-vibrant-ink-theme-and-prototype-bundle)here’s the css: https://gist.github.com/1170204
Cheers
-
Posted: Aug 25, 2011
I’m quite interested in the right hand side and switching it to a tab based layout not unlike firebug. Has anyone given this a go?
-
Posted: Aug 29, 2011
Great cmomon sense here. Wish I’d thought of that.
-
Posted: Aug 30, 2011
@Michael K
Initial commit of Solarized Light for use with Google Chrome’s Web Inspector:
https://github.com/salazr/solarized-inspector
Feel free to fork and contribute. I’m not ready to commit my Solarized Dark work yet but it’s coming too.
-
Posted: Sep 10, 2011
A port of Espresso Libre, including view-source coloring: https://gist.github.com/1207219
-
Posted: Oct 1, 2011
IR_Black: https://gist.github.com/1150520
Tomorrow Night: https://gist.github.com/1163300 -
Posted: Oct 3, 2011
Wow this is great!!
I’ve created a Solarized Dark theme with sidebar and view-source colours. You can download here: https://gist.github.com/1258555
-
Posted: Oct 20, 2011
Haha! Very cool! Thanks for tip!:)
-
Posted: Nov 11, 2011
There was just added an ID to the body element of the inspector. This allows you to target it exclusively with the UA stylesheet:
#-webkit-web-inspector
http://trac.webkit.org/changeset/99933/trunk/Source/WebCore/inspector/front-end/inspector.html
-
Posted: Nov 20, 2011
There is a problem whith IR Black when you edit HTML. The HTML text is too dark. With Vibrant skin happens the same but in this case the text is white like the background
-
Posted: Nov 21, 2011
B-E-A-U-T-Y!!!
I love dark themes, for one it helps preserve the planet as less light is needed for black (well duh..lol) and it’s just different. Thanks a lot guys!!!
-
Posted: Nov 25, 2011
I can’t seem to inspect the web inspector anymore. Anyone else?
I was going to fix the HTML selection issue that Tanif mentioned but I can’t find a way to do this now.
-
Posted: Nov 30, 2011
Thaaaaaanks!
-
Posted: Nov 30, 2011
I’m running into the same thing as @Warren. I can’t inspect the inspector anymore either.
-
Posted: Jan 16, 2012
i Created tommorow night theme
https://github.com/0i0/Tomorrow-Theme/tree/master/Web%20Inspector -
Posted: Jan 16, 2012
i can also no longer inspect any part of the inspector via the right-click context menu on OS-X Snow Leopard, Chrome 16. I’ve tried reverting Custom.css back to empty as it was previously and restarting Chrome but still no luck.
Argh!
-
Posted: Jan 17, 2012
disregard my last comment; i checked Chrome 16 on a system that i hadn’t messed with custom.css on, and i still could not inspect the inspector. i guess they removed that capability from Chrome…
-
Bruno Lazzaro // Style it, bitch!
Posted: Feb 6, 2012
[...] que lei hace un tiempo en el blog de Darcy Clark era que podiamos aplicar los estilos que quisieramos al Developer Toolbar de Chrome, si bien en ese [...]
-
Chrome Web Inspector – CSS on the Left
Posted: Feb 14, 2012
[...] been looking into customising the Chrome Web Inspector (here and here in particular) in an effort to move the CSS part of the Elements panel to the left, with the HTML [...]
