Graphic Rating Homepage

One of the most important tools in my daily design, development and analysis activities is Web Developer extension for Firefox. Developed by Chis Pederick, this extension is very popular among web developers due to its numerous capabilities. Throughout this post I want to show my appreciation for Chris Pederick and it Web Developer Tool and showcase the most important features.

1. CSS

When it comes to CSS, Web Developer Toolbar can offer many possibilities of manipulation:
- you can choose to disable all the styles from a current website with a single click; in this way you can see how the site is created and how the information is structured without visual styling.
- you can visualize all CSS files in one single page
- you can edit and at the same time view the changes of CSS, etc.

2. Images

Of course that images are another strong point for Web Developer Toolbar. Various actions can be performed:
- you can disable all images
- you can display alt attributes
- you can outline images for better debugging and position control
- you can force scaled images to be displayed 100%
- you can see the full path of images inside a site, etc.

3. Various Information

Through the Information menu the user can find valuable stuff like:
- color information (you can see the colors used in a site and their hexadecimal code)
- document size (you can see the size and components of a page)
- document outline (it is useful to see your headings – good for SEO)
- topography information (a greyscale rendering of a page with highlighted padding)
- link details, div orderds, etc.

Topographic Information - Web Developer Toolbar

4. Resize Module

When you want to test your site on different resolutions, the first thing you should do is buy many monitors with different resolutions … I’m kidding. The resize module inside Web Developer Toolbar allows you to add different resolutions and then you can switch those sizes and see how your site will look on 1024×768 or other resolution.

5. Validators

Another great section of this tool is the validation. Here you have all your standards at the tip of your fingers. Whether you want CSS, HTML, local HTML, Feed, Links or Accessibility, you can check them all with the help of Chris Pederick’s extension.

6. Small Screen Rendering

With this extention you can do another great thing. Since we live in a world of mobility and everyone is browsing from their mobile devices, how about a way to test how your site will look on those devices. This toolbar allows you through the click of a menu item to analyze your site from mobile perspective.

Overall

Since the article is showcasing the features of this tool, it is normal that I won’t criticize it in this section. I hope that this is a good tool for you and that you will take advantage of its feature. Kudos for this extension and hopefully in the future we will see many new features. Cheers!