Other Web Design Firefox Extensions

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.

HTML Tidy Firefox Extension

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.

MeasureIt Firefox Extension

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.

Colorzilla Firefox Extension

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.

View Rendered Source Firefox Extension

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.

Live HTTP Headers Firefox extension

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.

Comments

Firebug

I've found the Firebug extension to be a great help, especially when tracking down CSS problems. The download page is here: https://addons.mozilla.org/en-US/firefox/addon/1843.

Webmaster Tips's picture

Firebug Firefox Extension

Firebug is a good one. I've seen your site before — great design...

I just finished one

I just finished one extension for Firefox which could perfectly cooperate with HTML Validator. It crawls through web domain and can validate whole domain at once togather with broken links checking and gathering other informations about processed web sites. By now it is only in sandbox, so it woud be very helpfull, if you could test and write some reviews on it.
It is available to download here: Web Doc processor
Thanks very much, I hope you will enjoy it.

Syndicate content