Web Developer Toolbar and its Features

web-developer-toolbarOne 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

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 :D … 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!

Andy Gongea is a passionate UI/UX designer with a great appetite for technology and trends. Currently he owns, a future wife, a loan that comes with a monthly fee and some strange ideas about user interface and user interaction. Cheers!

Sponsors

Community Links

  • Create the Toyota logoHi there. In this tutorial you can learn to create the Toyota logo. It is all about circles and the Pathfinder panel. You will have to create a series of circles of exact dimensions. Regarding that,the grid and the snap to grid option will ease your work.
  • 60+ Creative And Well Designed PagesWhen doing my research for 404 error pages, I was surprised to see that three quarters of the websites I visited did not have custom 404 error pages.
  • Design an animated banner in PhotoshopIn this tutorial I will show you how to use Photoshop to create an animated leaderboard banner.
  • Top 10 Websites To Brush Up Your jQuery SkillsTo brush up your skills in jQuery, we present you Top 10 Websites For Free jQuery Tutorials that have been providing some cool demos and step by step guidelines, such that a beginner can master his skills of jQuery easily
  • Top 8 Principles of Effective Website DesigningEverything is guided by certain set of standards, rules and regulations. If the task is not driven by some guidelines, then it could face difficulties for its successful completion.
  • 61 Incredible Logo Designs #3Here’s yet another roundup of amazing logo designs. This is a series that we do frequently, so make sure to check out the past logo articles.
  • 20+ Amazing Product PSD files found on DeviantARTThese are a selection of over twenty PSD files which I have found over on DeviantART, specifically of various electronic products.
  • Create a documents icon in IllustratorHi there. In the next tutorial you’ll learn to create a pretty common icon. To reach this result you need to know how to use the Rectangle Tool, the Pen Tool or the Type Tool.
  • 10 Downing Tweets10 Downing Tweets is a Flash and Twitter based website created by twentysix Leeds. The site includes a twitter vote, a daily poll and an insight on the twitter noise the election is receiving. Will the final results on our site echo who gets elected?
  • 20 Clever Futuristic Free FontsFuturistic fonts were always one of my favorite font styles. I was never that much into grunge and similar styles. I rather keep it clean, but still cool looking. If you like this style, take a look at the collection of 20 free futuristic fonts I put toge

Friends