The Firefox Web Developer Toolbar Maximizes Your Productivity, Page 2

February 16, 2010
By Jason Gilmore

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.

Figure 3. Viewing the Developer.com Logo Style Path

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.

Figure 4. Viewing Developer.com Image File Sizes

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.

Page 2 of 2