Web Developer Toolbar for Web Designers and SEO Professionals

Website Design August 18th, 2010



Web Developer Toolbar for Web Designers and SEO ProfessionalsThe Web Developer (WD) toolbar is a web browser add-on created by Chris Pederick which serves as an easy to use tool for the web developers, designers and SEO Professionals alike. It can be installed as an add-on in the browsers such as Mozilla Firefox, Google Chrome, Flock and Seamonkey. This add-on is currently supported on all major Operating systems such as Windows, Linux and Mac. Earlier users considered mainly this as a Firefox Add-on, but recently the developer has modified it to accommodate Google Chrome web browser also.

Installing The Web Developer Toolbar for Google Chrome

Download The Web Developer Google Chrome add-on clip_image002

Click on the Install button in the window to add this add-on to the browser. Once the installation is complete, the Web Developer icon appears at the top right region of the browser as shown in the image.

Click on the icon to view the popup window in the Chrome browser. Users can navigate to the corresponding sections on the toolbar easily. You can customize the tool according to your requirements and the count will be displayed on the icon.


So you can see a ‘3’ here to indicate the count of activated Options.

Installing Web Developer Toolbar for Mozilla Firefox

Download the Firefox Web Developer Addon from Here

Once you install the addon, restart the Firefox browser to get started with WD toolbar. The image below displayed helpful features that the WD toolbar in Firefox provides.


How Will The Web Developer Toolbar Help a Web Designer?

The Web Developer Toolbar helps the Web Designer in providing insights into the elements of any website such as the Frames, Tables, CSS, JavaScript, Images etc.

View & Editing CSS

From the CSS menu you have an option ‘Edit CSS’ which helps us to view and edit CSS Style sheets in the website easily.

For example, I have selected the ‘Edit CSS’ option to edit the CSS code of the Techwyse website. The changed CSS files are highlighted. I feel it’s easier to perform CSS tweaking using the WD toolbar than firebug. Once the changes are done, you can save the CSS file to your local machine and then upload the updated CSS file to the live website.


Disable Web Elements

You can easily disable many web elements like cookies, CSS and images easily from the menu. This helps Web Designers to identify elements that are causing a problem with their code.


Cookie Information

You can obtain more information on cookies from the 'Cookies' tab. Also you can clear the cookie session and disable it if needed.

Outline Website Elements Information

Web Designers can have even the elementary information from complex layouts by selecting ‘Display Element Information’ from the ‘Information’ tab.

Details of website elements such as paragraph, button, image etc provide a clear picture of the website structure.

Example: You can see the 'HOME' tag is selected from our website below. Check out the left hand side for detailed element listings such as Attributes, Position, Font information, Ancestors and Children.



The ‘Tools’ tab helps in validating

  • CSS
  • Feed
  • HTML
  • Links
  • Section 508
  • WAI


The ‘Miscellaneous tab has two important features. One is the ‘Display Ruler’ which gives the width and height of the current selection. The other is ‘Line Grids’ which helps to identify the design and alignment issues in the website as well.


How Web Developer Toolbar Helps The SEO Professional?

Headings (H tags)



Image & Title Attributes

Title attributes can be viewed easily by enabling 'Display Title Attributes' from 'Information' .


Summing Up

I believe that this add-on is a very handy one to have in your SEO toolkit. It helps to reduce the time spent for website development and search engine optimization significantly. Thanks to Chris Pederick once again for developing this amazing addon for the web browsers.

Post By Jackson (2 Posts)

Website: →



Post a Comment

Send me SEO tips!


  • avatar

    ts is a must have for developers to explore and understand the webpages and also java script debugging.

    website design perth

  • avatar

    While being said the tool is so handy and useful, same time, I liked the way you present the blog Jackson.  

  • avatar

    In one word – AWESOME. I think this add-on is one of the best Chris has ever made. Used it myself and found that its so simple to use. And yes, very elaborately defines all the elements for any tag you ask for. A must on your web browser.

  • avatar

    Thanks Jackson! The Web Developer toolbar is one of my favorites for both SEO and developer reasons. Its is a must have for developers to explore and understand the webpages and also java script debugging.This article is gives us a complete walk through of this fantastic tool, I learned about many features that I never knew existed. Its much appreciated and  thanks for the information..

  • avatar

    Can't agree more Jay. Really a rocking toolbar with excellent features. Jackson thanks for dissecting it perfectly. I am taking a test drive of it.

  • avatar

    Nice Addon. I've got it installed in Firefox and got stirred after going through it's features. It's a friendly toolbar for programmers too! Thanks Jackson for sharing.