by Charles Cherry

Here is an awesome tip for those who use Chrome’s developer tools.

Duncan Smart's Weblog

When presenting on JavaScript or jQuery I’ll typically spend a lot of time in the Chrome Developer Tools window at the console. The problem is that, depending on the projection facilities and the resolution the fonts can be too small to read.

The Chrome devtools themselves are built out of HTML and CSS so I started digging for how I could edit the stylesheet. You can view the default devtool stylesheet by navigating to chrome-devtools://devtools/devTools.css. You can’t easily edit this though (it’s probably buried as a resource within Chrome), but you can override its styles using the standard custom user stylesheet Custom.css!

Custom.css lives at:

  • Windows: C:\Users\<user>\AppData\Local\Google\Chrome\User Data\Default\User StyleSheets
  • Mac OS X: ~/Library/Application Support/Google/Chrome/Default/User Stylesheets/

The style(s) to add and override in Custom.css are:

A nice touch is that the styles update automatically as you save Custom.css so you can tweak it on the fly to get the right font-size for your audience.

View original post 3 more words