Other Web Design Firefox Extensions

There are many good Firefox extensions for web design besides the Web Developer Toolbar. A few are listed below.

HTML Tidy Firefox Extension

The HTML Tidy extension is a great addition to Firefox. It lets you know about HTML warnings or errors on the status bar, and also gives you more detailed information when you view the source of a web page.

When you view source in Firefox (keyboard shortcut: CTRL-U), you will see the HTML in the top window. In the bottom left window (marked by arrow number one) there is a list of HTML errors and warnings. In the bottom right window (marked by arrow number two) there is an explanation of the selected HTML warning.

MeasureIt Firefox Extension

MeasureIt is a great Firefox extension. It allows you to draw a translucent box on a web page and get a measurement in pixels.

In the following image, I've used MeasureIt to highlight a section of the page with a translucent blue box. The red arrow points to the readout which tells me that the selected area is 568 pixels in width and 132 pixels in height. You can use this marquee tool to measure any area on a web page.

Colorzilla Firefox Extension

Colorzilla is a useful Firefox extension. It will tell you the color of any part of a web page.

The image below is from the Firefox status bar with Colorzilla installed. From left to right:

1. The eyedropper is the Colorzilla icon. After you install Colorzilla, you use it by clicking on that icon in your status bar on the bottom left of your browser.
2. The blue-grey box to the right of the eye dropper icon is the MeasureIt
   Extension (mentioned above).
3. Next are the RGB color values.
4. Then the HTML color value: #F0E68C. This is the golden color seen as the background of the eyedropper icon.
5. The coordinates of the cursor.
6. h1 -- lets you know that your cursor is hovering over an h1 element.

If you like this extension and are using Windows, also check out the free program called Pixie which performs similar functions but can be used outside of Firefox. Colorzilla only works inside of Firefox. If you know of a program like Pixie that runs on Linux and Mac, please send me the URL by using the contact form.

View Rendered Source Extension

If you want to see your HTML in a beautified form, get the View Rendered Source Extension. It improves readability and might be able to help with troubleshooting.

IE View Extension

Firefox is such a good browser that you will never need to use Internet Explorer again -- except for the occasion when you want to see how your web pages display on Internet Explorer. (Internet Explorer does have a lot of problems so even if you made your CSS correctly, you still want to make sure it displays in IE for those people who haven't discovered Firefox yet.) The IE View extension lets you right-click on a page in Firefox and open it in Internet Explorer just to check it. This extension is made for Windows, but also can be used on Linux. More information is available on the IE View homepage.

Live HTTP Headers Extension

The Live HTTP Headers extension allows you to view your HTTP headers in real time as pages are loading. The HTTP headers can tell you information about cookies, the date a file was last modified, the server type, and more. The image below gives a quick overview of the extension. The numbers in the list below correspond with the numbers by the red arrows in the image.

1. If you click on this button on the Web Developer Toolbar it brings up the "page info" window, which arrow number 2 points to.
2. There is a "headers" tab here where you can view header information.
3. Here the extension is showing all the headers in real time. On your computer it might look different. I am using an extension called All-In-One Sidebar which keeps the output of all my extensions organized in a sidebar.

The Copy Plain Text Extension

The Copy Plain Text extension is useful. You can highlight text on a web page, right-click on it and choose "Copy as Plain Text". This clears all formatting. Before I discovered this extension I would copy text from a web page, paste into a plain text editor and then copy the plain text before pasting the text in its final destination. This extension is useful if you have this kind of problem.