Web Developer Toolbar: An In-Depth Guide Series

Keith Curreri - Blog Headshot

By Keith Curreri on March 02, 2011

This is my first post in a series of posts on the Web Developer Toolbar. There are many features in the toolbar that make a web developer’s life so much easier. In this series I will go through each of the sections and show in detail what each tool does. Some tools are more useful than others and some you may only use rarely, but you may not know which ones to use until you see what the toolbar can do.

web developer toolbar

This first post in the series will cover the basics and show you how to install it. Then each subsequent post will go through each of the categories.

What is the Web Developer Toolbar?

The Web Developer Toolbar is an add-on/extension for Firefox and Chrome browsers that adds a variety of tools that will help you diagnose problems, test features, develop faster, and browse easier. There are 12 main categories:

Disable Icon Disable – Allows you to disable different features for testing purposes
Cookies Icon Cookies – A bundle of tools for dealing with cookies
CSS Icon CSS – Tools for working with style sheets and web styling
Forms Icon Forms – Helps with different forms, such as input or contact forms
Images Icon Images – Makes working with images easier
Information Icon Information – Displays a whole bunch of data about your site
Miscellaneous Icon Miscellaneous – A catch all category for everything that doesn’t fit elsewhere
Outline Icon Outline – Lets you highlight different elements on your page
Resize Icon Resize – Different ways to test the size of your browser window
Tools Icon Tools – Different techniques that test the health of your site
Source Icon View Source – Shows the code for elements of the site
Options Icon Options – Sets options for the toolbar

Installing the toolbar

Firefox – To install the toolbar for Firefox visit: https://addons.mozilla.org/en-us/firefox/addon/web-developer/, then click the Add to Firefox button.

Firefox Web Developer Toolbar

Chrome – For Chrome, visit https://chrome.google.com/extensions/detail/bfbameneiokkgbdmiekhjnmfkcnldhhm, then click install

Chrome Web Developer Toolbar

Leave a Reply

2 Comments on "Web Developer Toolbar: An In-Depth Guide Series"

Notify of
avatar
Mitch Mitchell

Okay, I’ll have to read more as you go along because, truthfully, I don’t get it still.

Keith

Mitch,

This post is sort of my introduction to the series, hopefully by the end everything will be more clear. I think that as the series progresses, I will have to go back to previous articles in the series and clear them up some. I can see how this first post it a bit cloudy.

The web developer toolbar is pretty complex and this series will have a lot of information, unfortunately the next few posts may add to the confusion until I can get into the meat of the features…

wpDiscuz