Web Developer Toolbar for Web Designers and SEO Professionals

Website Design August 18th, 2010

By

web-developer-addons

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.

image

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.

image

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.

image

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.

image

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.

image

Validation

The ‘Tools’ tab helps in validating

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

Ruler

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.

image

How Web Developer Toolbar Helps The SEO Professional?

Headings (H tags)

image

clip_image020

Image & Title Attributes

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

clip_image022

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: →

Connect

avatar

Post a Comment

Send me SEO tips!

6 Comments