Website Design August 18th, 2010
The 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.
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.
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.
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.
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.
You can obtain more information on cookies from the 'Cookies' tab. Also you can clear the cookie session and disable it if needed.
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
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.
Title attributes can be viewed easily by enabling 'Display Title Attributes' from 'Information' .
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.