YES! Thanks.

I may just try and port Solarized over the weekend.

Nice post. For Windows Vista the file location is here:
C:UsersYourUsernameAppDataLocalGoogleChromeUser DataDefaultUser StyleSheets

Hot stuff, Darcy. Well done.

Nice tip. Time to play with CSS.

Yay thanks, for Chromium (on Ubuntu
~/.config/chromium/Default/User StyleSheets/Custom.css

Wow, that’s incredibly cool – I loves me some dark color schemes. Special thanks to Carlos for the Linux/Chromium location!

very cool. thanks for sharing.

You can add the following CSS to for better visibility on the collapsed/uncollapsed node indicators:

http://dpaste.com/hold/595890/

Sweet! In hindsight, this seems obvious… the best ideas always do.

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?

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)?

Ah I had no idea that’d be possible, I might have to give this a crack sometime soon!

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 SettingsApplication DataGoogleChromeUser DataDefaultUser StyleSheets

That’s very handy! Thank you.

@Charlie, you could also do the following: http://dpaste.com/hold/596373/ This is with the default white node images.

[...] 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 [...]

Wow this is cool, a black coding area for my favorite dev tool Thanks

Wonder if there is a way to publish this kind of theme in the Google Web Store.

Leet!

Thanks for the great tip !

I gave it a shot : http://dpaste.com/596461/

(IR_Black SD theme from textmate)

Wow, very cool!!

@Kaelig I also recreated the IR_Black theme. Mine also decorates the other tabs as well. Even the console.

https://gist.github.com/1150520

@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.

@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!

This is great, and Charlie’s addition was much needed. Here is some code for restoring the line highlighting:
https://gist.github.com/1151942

Whoops, IDs are very important, didn’t think about other sites using those common classed

fiddle updated
http://jsfiddle.net/matthewlein/77TK7/

Oh, i guess my other comment didn’t go in. I restored node highlighting and made a fiddle with the inpsector HTML in it

Here is a start of the Default “Espresso Tutti colori”

https://gist.github.com/1152045

Still needs some work

@Ben @Paul Your skins are awesome! Definitely worth checking out

For anyone looking for the path on a fresh install Lion the Library folder is hidden

That’s awesome. Now I have the same color scheme in my editor and chrome.

Thanks Darcy.

[...] Skin your Chrome Inspector (darcyclarke.me) [...]

Awesome!
Now debugging will not be boring!

[...] '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 [...]

Sweet!

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!

For Google Chrome on Ubuntu – ~/.config/google-chrome/Default/User StyleSheets/Custom.css

For presenting, you often want to bump up the font-size for readability. Drop in this guy into your custom.css for that.

http://dpaste.com/hold/599668/

Sweet now my inspector matches my Sublime Text 2 editor…. almost

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

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?

Great cmomon sense here. Wish I’d thought of that.

@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.

A port of Espresso Libre, including view-source coloring: https://gist.github.com/1207219

IR_Black: https://gist.github.com/1150520
Tomorrow Night: https://gist.github.com/1163300

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

Haha! Very cool! Thanks for tip!:)

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

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

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!!!

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.

Thaaaaaanks!

I’m running into the same thing as @Warren. I can’t inspect the inspector anymore either.

i Created tommorow night theme
https://github.com/0i0/Tomorrow-Theme/tree/master/Web%20Inspector

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!

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…

[...] 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 [...]

[...] 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 [...]

missing the most important: how do you make Chrome display tabs as 4 (or 2) spaces instead of stupid 8? make js code reading very painful. ‘tab-size’ CS3 property doesn’t seem to be supported…. why isn’t there a pref for that basic thing is beyond me.

[...] su apariencia. He estado investigando un poco, y el theme que más me ha gustado ha sido el de Darcy Clarke, pero ni con ese, ni con otros muchos que probé pude cambiar la apariencia de la barra derecha del [...]

@Alain – have you looked at the Developer Tools settings (the gear icon in the bottom right corner of the Dev Tools)? You can select 2, 4, 8 spaces or Tab.

I forked the IR_Black Theme to bump up the font-size to 14, toned down some colors (just green/purple) and added platform sidebar support. https://gist.github.com/2389259

I tried to skin the resource/sidebar panel but it’s not very friendly.

BTW the current built 18.0 has the inspect disabled but the latest Chrome canary built now enabled you to inspect the inspector again.

[...] recently discovered that you can skin the Chrome dev tools. So, I naturally had to build a Ruby [...]

[...] blog post and is inspired by blog of Darcy Clarke and his post “Skin your Chrome Inspector”. In this blog post Darcy is changing the theme for Elements tab in Chrome Developer Tools, but I [...]

[...] I found this great link and added the cus­tom file it pro­vided (lots of choices… and you can even make your own!) it to my computer’s folder (use the path for the machine you are using): [...]

[...] 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 [...]

Thanks

Hey man, great post! I’m having trouble with actual websites now for some reason though. I know you said it has no bearing on websites, but check out this screenshot (this is from the Instagram API page, so I know it’s not on my end):

http://cloud.believelabs.com/180L1t3f0U380o2T2D1c

I believe the inspector is affecting some sites somehow, because the hues match––any idea how or what rule may be causing this?

Hey Andrew,

If you read the “Update” section at the top of the post you’ll notice that Chrome added a unique id to the dev tools. This should help contain the issue you’re having. Unfortunately, some of the themes that were created and that you may be using were done before this was implemented. So some of the styles may be leaking onto websites (as you’ve experienced).

Very cool thanks!

I’ve LESSified my Tomorrow Night theme:

https://gist.github.com/3040634

love you mate:)

[...] on a post by Darcy Clarke. Tweet Related [...]

[...] http://darcyclarke.me/design/skin-your-chrome-inspector/ [...]

I’ve added to your stylesheet an item that high lights the selected item and it’s children. You can get it here. https://github.com/ideakitchn/ChromeConsoleCSS/blob/master/IdeakitchnCustom.css

Is there way to hide html comments in web inspector? They are helpful in my code editor, but I don’t want to see them in Chrome.

Another skin for the collection – https://github.com/simonsmith/DarkDev

Confused, how do you actually, inspect the inspector? I searched around on other sites and one mentioned this: chrome://devtools/devtools.html but on that page it only shows the top of the inspector with no buttons and nothing else. Am I missing something?

Another, in the spirit of Monokai.

https://gist.github.com/bc12d6bb85ffb96042e8

@Christopher B – see the notes at the end of the Gist above for details on inspecting the Inspector.

This works great for the HTML inspector. Is there something comparable for the JavaScript source view windows?

On Its not under root /Library….
Its under HD/Users/USERNAME/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css

Wonderful themes posted, handy article..

This made my Friday! Loving. It.

Cheers!

Dark theme for JavaScript source viewer would be superb..

Thanks!! Nice theme. If only the right panel is dark themed too.

Hi,

Would you please add my Chrome Developer Tools dark theme that is developed based on CSS filter property to your list?

https://github.com/mohsen1/Chrome-Dev-tools-dark-theme

Thanks

[...] dunklere, wie man sie aus Sublime & Co kennt. Darcy Clarke hatte zwar schon letztes Jahr einen Blogpost verfasst, wie man die entsprechende CSS – Datei selbst anpassen kann, jedoch muss man sich [...]

thanks..

Hi,
Firstly, Awesome & many Thanks!

Updated, ::163 “Edit as HTML” color-white
Fork, https://gist.github.com/3915855

Cheers!

This is great! Thanks!

One question– is there any way to add your own font? I fancy Panic Sans, which is what I use when developing in Coda. I’ve tried declaring it as the font-family on the body tag but it doesn’t change anything.

How is it that you inspect the inspector? I tried doing an inspect on the ‘-webkit-web-inspector’ id that was mentioned above but to no avail. What’s the secret?

Nevermind…figured it out. I didn’t realize you needed to use remote debugging.

What I do, to inspect the inspector is undock it from the window- into a separate window and select the developer tools window. After that open another instance of the inspector (either via the menu item or shortcut key’s)

Thanks for this, hate white backgrounds-they wreck your eyes.

How about the console, can i skin it?

Hey Richard,

You can skin the console just as easily, in fact, some of the skins currently available, do this for you. Here’s a good list of skins that were based off of this original post: https://plus.google.com/115133653231679625609/posts/UZF34wPJXsL

Hope that helps point you in the right direction. Cheers!

Darcy,

Thank you for this article. I did some research and to my knowledge, it doesn’t look the Custom.css is included in Chrome’s Chrome-Sync. See http://code.google.com/p/chromium/issues/detail?id=136479

So, I created a batch file (for Windows) that will help you use DropBox to sync the files between machines. You can get the script at https://gist.github.com/4524533. Hopefully this is helpful to others.

Thanks again,

Justin

I added a Custom.css file to the location specified for Mac, but I’m not seeing any changes to my dev tools. Is there anything else that I’m missing?

I’m sorry if this was already answered, I looked and didn’t see it mentioned. I can’t seem to get to the “~/Library/Application Support/Google/Chrome/Default/User StyleSheets/Custom.css” file in OS 10.8.2. Any ideas?

This is great–I’d been hoping such a thing were possible.

Is there any way to execute custom JS on the inspector?

I’d love to be able to, for example, hide or otherwise de-emphasize third-party frames (e.g. jQuery) in a call stack, but short of using jQuery’s ‘:contains’ selector, I don’t know how I’d do that.

Hey,
I’ve added the styles to the Custom.css but my developer tools environment has not changed. It’s still that god awful white. What do i do to get the styles to work in chrome developer tools?

@Brandon, @Erik: Did you add `!important` to the end of your rules? After I added that (and saved), the changes took effect immediately for me.

Erik, try to get Chrome Canary.

In case anyone is experiencing issues with the selector names in the CSS side panels not responding to your changes, I found this:

https://github.com/frontdevDE/mnml-devtools-theme/issues/3

TL;DR – Just replace this:
#-webkit-web-inspector .webkit-css-selector,
#-webkit-web-inspector .styles-selector {

With this:
#-webkit-web-inspector .webkit-css-selector,
#-webkit-web-inspector .styles-section .selector-matches,
#-webkit-web-inspector .styles-selector {

Thanks for the post @Darcy, this is excellent! I am also curious how you go about inspecting the inspector. I would be really interested to see a post about that

Cheers!

So, in messing around a bit I am now face-palming about how to inspect the inspector. If you are curious about how to do this (@Christopher B), follow this steps:

1. Make sure that your inspector isn’t docked to the window
2. Press Command+Option+I (Ctrl+Shift+I on Windows)
3. Press Command+Option+I again. (assuming focus is on the inspector window)

Now you can inspect the un-inspected

Hey all,

Just posted a custom skin on: https://github.com/mauricecruz/chrome-devtools-zerodarkmatrix-theme

Would appreciate some feedback/help making it better.

I’ve started modding my own version of this and am getting into the actual gui part of it. It’s going ok thus far, but I am running into a few issues when adding styles to selectors with basic names. For example, I added a background rule to #main, and it is applying the background color to ANY website that has a #main div.

Is there any way to specifically target ONLY the Developer Tools window and not external websites when adding rules???

Here is a screenshot of what I am working on: http://take.ms/UqiOM

Thanks for any info.

Ok I have figured it out!!! I somehow missed the VERY BEGINNING of this post where it talks about the new -webkit-web-inspector ID being added.

So, the fix to my above post is to add body#-webkit-web-inspector to all of your selectors and it works perfect. Also, to those wanting to create a complete theme, it’s MUCH easier to do it via inspecting the inspector. More info on how to do this is here: http://stackoverflow.com/questions/12291138/how-do-you-inspect-the-web-inspector-in-chrome