Development

Skinning Your Chrome Developer Tools – No more

Posted Nov 13 2013

Update: Paul Irish and the Chrome Dev Tools team have informed of us some changes. Check out my original blog post for more information on the changes and how you can re-add custom devtools theme support.

Recently, it was brought to my attention that the latest version of Chrome (Canary v. 33.0.1708.0) has removed support for User Stylesheets. When I wrote about this feature, nearly 3 years ago, it was something that developers seemed to love and find use in. Not just for modifying styles on particular websites, but for modifying their development environment (ie. “Skinning” their dev tools).

Last year Addy Osmani wrote a great Google+ follow up to that original blog post that included a number of great community created developer tools themes. Dedicated websites were even created to showcase themes, most notably devthemez.com. As self-proclaimed hackers, I think we enjoy modifying our working environments to feel customized to our personalities/preferences.

To add insult to injury, I personally believe the Chrome Developer Tools are in desperate need of a design and UX overhaul. Firefox has focused on shipping great design as well as new innovative development tools. If the Chrome team doesn’t start to emphasize UI/UX we’ll begin to, if not already, see a shift back towards Firefox as the developer’s go-to browser for development (Note: This isn’t a bad thing, competition breeds innovation).

One of the few ways we, as a community, can help to push that focus is to show the Chrome team how things “could” be. That, of course, requires tools or APIs to be available to us to modify the dev tools themselves. User Stylesheets was one of the ways we could accomplish that.

If you agree, show support by heading over to the Chromium Bug Tracker and starring/commenting on the issue I’ve created there to re-implement User Stylesheets: https://code.google.com/p/chromium/issues/detail?id=318566&can=4&colspec=ID%20Pri%20M%20Iteration%20ReleaseBlock%20Cr%20Status%20Owner%20Summary%20OS%20Modified.

2 Comments

Dennis Gaebel Posted: Nov 16, 2013 @ 7:03pm

When I first read your post on how to customize the DevTools I immediately ran out and tried a go at it myself. Slowly I started giving up due to the fact that selectors kept changing quickly from releases and breaking the styles.

Google has always been the black sheep in terms of style. Erik Spiekermann has been noted on video saying Google lacks a sense of style in their design and I tend to agree with that -although I do believe they’ve made progress over the years.. This is something the Chrome team needs to think about in general. There are amazing designers that work at Google (A few I happen to know) and I don’t see it being too difficult to find someone willing to help the DevTools UI with some love…they just need to give it importance and let it happen.

Chase Adams Posted: Dec 29, 2013 @ 1:07am

Hey Darcy!

What are your thoughts on the new Chrome Extension DevTools Theming? Personally, I feel like it’s a better way to main consistency across multiple machines, as well as updates (I have a personal machine and a 2 work machines).

I find the main issue with having a Custom.css is that there’s a lot of extra work from the end-user to keep it updated, but in using an extension, as long as the author is keeping their product up to date (or contributors to the core project), all end users see benefit as the extension itself updates automatically.

I agree, there has to be customization, and I believe they’re working hard on figuring the best way to make it scalable, but I don’t think Custom.css is the solution.

Interested to hear your thoughts!

Leave a Reply: