January 25, 2021
Hot Topics:

The Firefox Web Developer Toolbar Maximizes Your Productivity

  • By Jason Gilmore
  • Send Email »
  • More Articles »

If the saying "The definition of insanity is doing the same thing over and over and expecting different results" is true, then the majority of Web developers should have been committed to the asylum a long time ago. After all, the approach of repeatedly editing and reloading the page until everything is as desired is as universal as HTML itself. Part of the problem is perhaps related to the Web environment itself; getting started building Web sites is so simple that many developers fall into the trap of settling for a developmental approach which is simply "good enough," rather than exploring more sophisticated, streamlined strategies. If your pointer finger has grown callused from clicking the F5 button far too often, I encourage you to check out the Firefox Web Developer Add-in, which offers an extraordinary array of features which will greatly improve your productivity no matter the type or size of your next Web-related project. In this article I'll introduce you to Web Developer, providing and overview of its many features and talking in further detail about a few of my favorites.

Installing Web Developer

Web Developer is actually a Firefox Add-on, although it's commonly referred to as a toolbar because when enabled it is situated in a manner typical of other toolbars such as the Google Toolbar. This approach puts many of the toolbar's features within easy reach. See Figure 1 for a screenshot depicting the standard layout.

The Web Developer Toolbar
Figure 1. The Web Developer Toolbar

To install Web Developer, launch Firefox and head over to the Web Developer Add-on page, located here. Click the Add to Firefox button to install the Add-on. A popup window will open, asking you to confirm the installation request. Click the Install Now button to continue. Following successful installation, you'll be prompted to restart Firefox to complete the process.

Exploring the Web Developer Toolbar Options

As you can see in Figure 1, the Web Developer Toolbar offers 12 menu options:

  • Disable: Via this menu item you can disable JavaScript, page colors, content caching, the Firefox popup blocker, and other features typically enabled by default.
  • Cookies: Use this menu to disable, view, clear, and delete session cookies.
  • CSS: The CSS menu allows you to dynamically add new CSS rules via a console window, add entirely new CSS stylesheets, view embedded style sheets, and even disable certain style types. This option can be quite useful for quickly testing slight CSS modifications to your site.
  • Forms: Using the Forms menu you can overlay any forms embedded into the page with information about the action, method, and form fields. Enabling the Form Information option will produce a summary of all forms found on the page, including their name, method, post action, and fields (including each field name, default value, and type).
  • Images: The extremely useful Images menu offers options for learning all sorts of important details about embedded images, including file sizes, dimensions, alt attribute values, and image paths. You can also use various menu options to hide all images in the page, hide only background images, and view images as they would appear with only their alt attribute values displayed.
  • Information: The Information menu is probably the Web Developer feature I use most regularly, as it provides a bevy of information about the page layout, displaying DIV dimensions, link destinations, element ID and class details, a convenient JavaScript viewer, and many other page-related details. Frankly this single feature is alone worth the download
  • Miscellaneous: The Miscellaneous menu offers a random array of features which don't fit squarely into one of the other menu categories, although don't discount what you'll find here; among other options you can enable a dynamic ruler which allows you to quickly and conveniently measure the pixel dimensions of any page element. Figure 2 demonstrates this feature.
  • Outline: The Outline menu gives you the ability to outline many page element types, including tables, block-level and deprecated elements, any element you mouseover, and more.
  • Resize: The Resize menu allows you to resize the browser window to any set of alternative dimensions. For instance, you could use this feature to resize the browser window to 800x600 pixels in order to experience what your Web site might look like on older computers.
  • Tools: The perhaps poorly named Tools menu allows you to validate your Web site's CSS, RSS feed, HTML, Section 508 conformability, receive an optimization analysis as determined by WebsiteOptimization.com, in addition to easy access to the DOM Inspector (if installed), Firefox Error Console, and Java Console.
  • View Source: Perhaps not surprisingly, the View Source menu gives you easy access to the page source.
  • Options: Last but not least, the Options menu gives you access to various Web Developer options and preferences.

Measuring a Page Element with the Web Developer Ruler
Figure 2. Measuring a Page Element with the Web Developer Ruler

With the overview completed, let's turn our attention to a few Web Developer features I consider to be particularly valuable.

Page 1 of 2

This article was originally published on February 16, 2010

Enterprise Development Update

Don't miss an article. Subscribe to our newsletter below.

Thanks for your registration, follow us on our social networks to keep up-to-date