Headshot of James Moss

James Moss

I’m a freelance full-stack engineer with over 15 years experience. Currently taking on new React based opportunities, drop me a line 👋

Checkboxes in Chrome DevTools CSS inspector

After being an avid Firefox fan for the past five years I’ve recently decided to switch to Google Chrome as my main browser for both development and general usage. It’s matured over the last few years to become a great browser; fast, light on resources and with a brilliant plugin system.

When using Firefox, the Firebug extension has become an invaluable tool for debugging, diagnosing and investigating front end HTML, Javascript and CSS issues. Chrome has an equivalent feature built right into the browser and its great, except for one thing; The checkboxes used to toggle properties in the CSS inspector are the on wrong side.

The problem

Here’s the CSS inspector in Firebug:

image

Notice how the button to toggle the CSS properties on and off is right next to the property name itself. This close proximity makes it easy for the brain to associate it to the height property. Now lets look at the equivalent feature in Chrome developer tools:

image2

The button to toggle the property is now a tiny checkbox placed way out on the right hand side. The distance between the checkbox and the CSS property means that its difficult to work out which checkbox applies to which property. Paul Fitts would be having a fit.

The fix

After 2 minutes of playing around I realised the DevTools in Chrome are actually plain old HTML, CSS and JavaScript. The CSS file is located at chrome-devtools://devtools/devTools.css, I didn’t want to find this file in the application package and directly edit it as my changes would get overwritten on each upgrade.

I started looking into plugins such as Stylish which let you inject custom CSS in any page you like. However Chrome plugins are only loaded in pages using http://, https:// or ftp:// protocols (and file://, if given permission by the user). Eventually I came across the Custom.css which is Chrome’s equivalent to Firefox’s userContent.css. Custom.css gets injected to all pages in Chrome, even the extension management page, user preferences and of course DevTools.

Updating Custom.CSS

On OS X you can find your Custom.css file in ~/Library/Google/Chrome/Default/User StyleSheets/. If that folder is empty just create the file yourself. I don’t use Windows but I’m sure the file will be in a similar place. Place the following CSS in the file and save.

That’s all there is to it. You don’t even need to restart Chrome.

I’m not sure if this will ever get properly fixed. It’s been raised as an issue in the Chromium project but it’s been marked as an external dependancy issue within the WebKit engine. The WebKit team don’t seem to be in any hurry to fix it either, it’s been sitting as an issue in their bug tracker for over a year with no real activity.

Comments