Meryl's Notes Blog

Chris Pederick has created the Web Developer Extension for Firefox and Mozilla, which adds a menu and a toolbar to the browser with various Web developer tools. It’s a fabulous tool for learning and doing development work. Install the extension by clicking on the download link and following the dialog boxes as with installing any extension.

What makes the toolbar outstanding is its ability to do things with any Web page. It offers many features and we’ll cover a handful so you can see what it can do. Let’s work through the buttons from left to right.

Disable

Turns off cookies, images, Java, JavaScript, colors, etc. To show you what some of the options can do, I use Amazon as our guinea pig. Fig 1 is the original page. Turning off images animation stops the treasure box from rocking back and forth.

Fig 2 is what happens when disabling page colors. There are still colors from the images. These are the colors from the borders, backgrounds, and fonts.

Turning off the styles results in not much of a big difference, but it’s harder to see the links. Style disabling is more prevalent on pages relying on heavier CSS. Try it in CSS Zen Garden.

CSS

To see Amazon’s CSS, use “View CSS” and it appears in its own tab. It’s no wonder why turning off styles didn’t look different. The style sheet covers fonts and little else.

“View style information” provides style information about whatever the mouse cursor rolls over in the status bar. See fig 3 for an example.

Here’s one feature where Firefox has an advantage as Mozilla doesn’t have this option. It offers the “Edit CSS” option and this is a great way to experiment. I went wild and changed a few colors on the meryl.net home page. You can do more, but it’s a simple example.

Forms

The form’s GET and POST methods operate differently. If you’re experimenting with them or want to see what happens if you switch them, use the “Convert POSTs to GETs” and “Convert GETs to POSTs.”

To see the form’s code, select “Display Form Details” and you see something like fig 4.

Images

For “Image Dimensions,” click on it to get the height and width of every image on the page as shown in fig 5.

When images on a page are broken or you want to know their paths, instead of using the “View Source” and scrolling through all the code, use “Display Image Paths.” And to find all broken images, click on “Find Broken Images.”

See how your page looks for those who surf without images or people who are visually impaired by using “Make Images Invisible.” See fig 6. You can also “Replace Images with Alt Attributes” as well as use the “Outline Images” to help you quickly find images with or without certain features.

Information

Information is also good for testing and identifying parts of a Web page without searching for it. “View ID and Class Details” puts blocks around Class and ID. Green for ID and red for class for easier identification.

Here is an example output of “View Response Headers,” which puts the information in a separate tab:

Server: Microsoft-IIS/5.0
Date: Sun, 03 Oct 2004 22:25:08 GMT
X-Powered-By: ASP.NET
X-AspNet-Version: 1.1.4322
Cache-Control: private
Content-Type: text/html; charset=utf-8
Content-Length: 21272

“View Speed Report” links to WebSiteOptimization’s Web Page Analzyer and provides details about the page you’re on.

Miscellaneous

“Show Comments” makes ! appear where there are comments. Here’s one from Yahoo! with the comment expanded by clicking on the !. You can copy and paste the comments.

From the source code:
A readable screen shot

From the Web page:

“Visited Links” allows you to make all links as visited or unvisited. It’s like resetting the colors (if there are different colors for visited and unvisited links).

“Zoom” makes the text larger.

Outline

No fretting. This isn’t the outline you learned in school. The feature puts a border around block level elements, deprecated elements, frames, links without the title attribute, and table cells. If you’re trying to get rid of tables, ensure you have titles for every link, and dump deprecated elements, use this to find them without scanning the code.

Or create your own using the “Custom Elements” option.

Resize

Self-explanatory. “Display Current Size” puts the info in a pop up box while “Display Current Size in Title” puts it at the top of the browser.

Validation

One-click validation of HTML, CSS, accessibility (WAI and 508), links, and create your own.

View Source

Click it and get the page code.

Options

If you want the changes you’ve made using the toolbar to apply to another page, click on “Persist Styles.” To reset the mess I made, I click “Reset Page.” This erases all the things I’ve done to the page with the toolbar.

“Options” controls the hiding / unhiding of the toolbar and how you want the windows / tabs to behave. ‘Validators’ is for adding another validator that isn’t on the list or replace an existing one.

Add frequently used window sizes in ‘Resize’ so you don’t have to customize it every time.

Don’t like red and green for identifying class vs. ID? Change it in ‘Colors’ as well as the tooltip colors.

You can access the toolbar through Tools > Web Developer or right-clicking on the browser window and selecting “Web Developer” from the context menu.

Like candy for Web design, isn’t it? Play and test Web pages without worrying about screwing things.

Subscribe to this here blog: RSS or E-mail