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.
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.