The Firefox Web Developer Toolbar Maximizes Your Productivity, Page 2
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
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
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
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 industrys 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 developers 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.