Wednesday, July 9, 2014

Firefox DevTools: To theme or not to theme


While I don't find myself going into Firefox's 'Toolbox Options' that often.  I found a pleasant surprise yesterday when I discovered that my version of Firefox supports a Dark Theme in addition to the Light Theme.  I prefer the contrast of a dark theme and have been using most of my editors in dark themes. e.g. WebStorm, Sublime. If you haven't already, I suggest you experiment with using a dark theme. It may take a few days of getting used to the colors, but I find it is worth the effort.

Chrome users shouldn't feel left out, as you can download themes for your Developer Tool usage.  That being said, buyer beware as these themes may not work with future releases of Chrome Tools.
 

Steps to configure

  1. Launch Firefox
  2. Open the Web Console by pressing the keyboard shortcut:
    1. Control-Shift-K (Windows)
    2. Command-Option-K (Mac)
  3.  Select the Toolbox Options i.e. gear icon, should appear to the left of the Web Console.
  4. Under Choose DevTools theme, select Dark theme or switch back to Light theme to revert.
  5. Enjoy!

Dark Theme

image of Dark Firefox Theme

Light Theme

image of Firefox's Light Theme

I will share some of the not so obvious developer tools that I stumble upon.

Do you have some interesting tips for dev tool usage?  Please share in the comments section below.