The Firefox Web Developer Toolbar Maximizes Your Productivity

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.

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 800×600 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.

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

CSS Review

Web Developer’s CSS menu is particularly useful when tweaking your Web site design, as it provides
several great options for quickly learning more about page elements. For instance, you can immediately determine an
element’s style inheritance by clicking the CSS menu and then selecting the
View Style Information option (or press Ctrl + Shift + Y). A new window will appear
directly below the Web Developer toolbar which will display the inheritance tree of any page element you mouse over.
For instance, the Figure 3 depicts the Developer.com logo’s style tree, which happens to be
html > body > div .wrapBody > div #header .dimMain > div .logo > a > img.

Reviewing Image File Sizes

Even in an age of ubiquitous high-speed internet connections, the exploding use of mobile devices nonetheless requires
you to keep tabs on image sizes in order to ensure acceptable page download times. You can use Web Developer’s
Images menu to quickly view all of a page’s image sizes. To do so, click the Images menu
and then select the Display Image File Sizes option. Once enabled, overlays will be placed over every
image on the page, as demonstrated in Figure 4.

Developing for Mobile Devices

Of course, image sizes are only one challenge you’ll face when developing for mobile devices; you’ll also need to
determine how exactly your page will render on screens with very small dimensions relative to the typical laptop. One
easy way to approximate how your page will render is by way of the Small Screen Rendering option, located
under the Miscellaneous menu (I warned you not to discount it!). Enabling this option will render your
page anew within a very small window frame, not only giving you an idea of what your site will look like on the small
screen, but also showing you whether the all-important Web site navigation links render first. Figure 5 shows you
what the Developer.com article comment feature looks like rendered within the Small Screen Rendering window.

Figure 5. Viewing Developer.com Using the Small Screen Rendering Option

Conclusion

I encourage you to spend a few days experimenting with the Web Developer Toolbar while building your next Web site.
Chances are it will soon become as indispensable a tool as your favorite IDE or dog-eared CSS reference book!

About the Author

Jason Gilmore is founder of EasyPHPWebsites.com, and author of the popular book, “Easy PHP Websites with the Zend Framework”. Formerly Apress’s open source editor, Jason fostered the development of more than 60 books, along the way helping to transform their open source line into one of the industry’s most respected publishing programs. Over the years he’s authored several other books, including the best-selling Beginning PHP and MySQL: From Novice to Professional (currently in its third edition), Beginning PHP and PostgreSQL: From Novice to Professional, and Beginning PHP and Oracle: From Novice to Professional.

Jason is a cofounder and speaker chair of CodeMash, a nonprofit organization tasked with hosting an annual namesake developer’s conference, and was a member of the 2008 MySQL Conference speaker selection board.

Jason has published more than 100 tutorials and articles within prominent publications such as Developer.com.