Hide the Web Developer Toolbar when you don't need it

If you’re a web professional, you probably have a lot of toolbars in your browser. But you probably don’t need for all of them to be visible at all times.

Recently, I came across a way to hide the Firefox Web Developer Toolbar when you don’t need it, all with 1 click. Let me tell you how you can do it yourself.

As it turns out, you can add a Web Developer Toolbar button to your browser toolbar (you know, the toolbar with the Back, Home, and Reload buttons). Clicking this new button will toggle the display of the Web Developer Toolbar, toggling it visible and invisible with 1 click.

Here are the steps for adding the button:

1. With Firefox open and the Web Developer Toolbar extension installed, right-click any of the buttons in your browser’s main toolbar (CMD-click for Mac users).
2. Click Customize….
3. Find the button labeled Web Developer and drag it right onto your browser’s main toolbar. Drag it where you would like it to appear on the toolbar.
4. Click the Done button.

I mix a lot of work with play on my home computer, so it’s nice to get some of the extra stuff out of the way when I’m in play mode. See? You can optimize for play every now and then, too!