The Web Developer Toolbar for Firefox

The Web Developer Toolbar for Firefox is often listed as one of the must-have tools for web developers. Having used the toolbar within my design environment, I whole-heartedly agree. It cuts back development time by hours. It makes what can be tedious tasks, almost fun. It lets me quickly glance at a website in a different size window. It helps me debug and validate JavaScript and CSS code.

Chris Pederick developed this toolbar for Firefox. Here is what the toolbar looks like:

Note: It is one bar across the top of your browser window. It is shown as two images above so you can see the entire bar.

As you can see, it comes with many options. Although I haven’t used all the options that the toolbar provides, let me list a few of my favorites.

Real time CSS debugging. While viewing my webpage, I can update the CSS file that shows up to the left (or bottom) of the web page (from toolbar, choose CSS/Edit CSS) and see immediate results in the browser window. This is great for troubleshooting and for getting down to the nitty-gritty of how those extra 10 pixels of padding affects my web page. Although I can’t immediately save my CSS updates, I can easily copy the changes that I know already work and paste them into the CSS style sheet open in my web editor.

Validators. The top right of the toolbar shows red/green buttons to indicate the validity of CSS code and Javascript code. If the button is red, I simply mouse over the button and it immediately tells me the error it is finding. I can click on the Error Console to find out more details, go back to the code (CSS or Javascript), make the change, refresh the browser window and watch the button(s), hopefully, turn green. The ease of debugging code is amazing – and is usually quickly resolved.

Window Resize. Since I want the web pages to look good in different screen resolutions, I want to verify how the pages will look in different size windows. With the Developer Toolbar, this is a click of the button. I simply select a different window size from the Resize option and immediately view the site in a different window size.

Small Screen Rendering. I can also view what my webpage looks like on a mobile device with one click of a button. The Small Screen Rendering Option is available under the Miscellaneous menu.

Integrates with Joomla. This favorite is actually the same as the first one listed above, but within a specific environment. The Web Developer Toolbar is invaluable within the Joomla environment. Without the toolbar, I am constantly going into Joomla, navigating to Extensions/Template Manager, choosing the appropriate template, making what I think are the necessary changes, saving it, then going back to a browser window and checking the results. Whew! With the Developer Toolbar, I simply select ‘edit CSS’ from the CSS menu, make the necessary changes, and view the results. I can continue tweaking the CSS till it’s right. No going back and forth between windows and applications. Once the CSS is correct, I simply highlight the changes, copy the code, and paste it into the CSS template inside Joomla. It’s quicker. It’s easier. It’s very straightforward.

This is only the tip of the iceberg in what this toolbar can do for web developers. It is easy to install and easy to use. I highly recommended making it a part of your development environment. It is available on at https://addons.mozilla.org/en-US/firefox/addon/60.

Related tutorials:

Web Development – Tools Of The Trade Different Techniques for Grabbing Color from Anywhere on the Screen Making Your Site 508 Accessible Lunascape 5 Genisis. Yep, It’s a Browser!