Navigation Menu

Firefox Add-Ons for Web Site Developers

Get Firefox! Firefox is a better browser than Internet Explorer, especially for web developers. It is web standards compliant (whereas Internet Explorer is one of the Least compliant), and it has add-on tools for developers to make your job so very much easier. Here are some of the built-in Firefox abilities and add-ons that I use regularly for developing my web sites. These are all free, so you can use them starting right now.

Note: If you develop your website for Firefox, using standards-compliant HTML and CSS, it will display perfectly on Opera, Chrome, Safari, and with addition of one small CSS style sheet and one small JavaScript file will display well on Internet Explorer.

There are a few non-yet-standardized CSS commands, such as CSS gradients, where you will have to include the CSS commands for each of those browsers. There are a few device-specific HTML/CSS commands to consider for iPhones or other handheld devices, mainly around the fact that they don't have a mouse to click. A simple browser test script (I use a PHP script) can be used to only load a CSS style sheet for Internet Explorer or mobile phone users.

The "browser incompatibility" issue so many people mention, is only a big deal if you write following Internet Explorer's non-standard HTML (instead of writing for all other browsers and making a few changes for Internet Explorer), or for really old versions of other browsers.

View Source and HTML Validator

This tool shows the source that the browser sees, after your PHP or Perl scripts, server includes, and other changes have occurred) — so you see the exact coding errors in context. You can validate your dynamically created pages.

Gives intelligent explanations of the errors, so you can improve your code (for example if you put a table inside a paragraph, that is improper nesting; browsers would automatically display the table as if between two paragraphs).

Most HTML Validators refer to a line number, but due to your scripts and includes, the line number given doesn't match your source code. This tool works beautifully so you get the results you want with any browser.

The code validation is done within Firefox, not sent to another server. This gives you better speed, doesn't reload the page from the server, and increases your page privacy as you get it written well.

Get the View Source and HTML Validator tool

Developer Tip: If you prefer to view source code in your favorite editor (instead of a browser popup), browse to about:config Search for view_source.editor and you will see:
view_source.editor.external: Change this to true.
view_source.editor.path: Change this to the full path to your editor of choice. (e.g. for NotePad++, use C:\Program Files\Notepad++\notepad++.exe)

FireBug

CSS isn't displaying your HTML for an element on your page the way you want? Open FireBug (an icon on the bottom of the browser window), and you'll see the CSS rules, sorted in the order of their precedence, and properties that have been overridden are shown stricken out. Each rule has a link back to the file where it came from; click to jump to the line. Similarly see the size of elements, and their containers, to adjust sizes, margins, padding. Make changes in FireBug, and see the changes instantly. Then copy the fixed CSS code back to your editor.

FireBug has tools for HTML, CSS, DOM, Javascript, all integrated in one package. Get FireBug from http://getfirebug.com/ or the standard Firefox add-ons site.

Web Developer

See how your site looks without images, or without CSS. Display the field details of a form. View or modify cookies, as you're testing your site. Turn off cookies for a site. View the page header information. Many tools that web developers need frequently.

ColorZilla

Color eyedropper to get the color of a pixel on the current web page, in your choice of formats for HTML or CSS. Shows box size of the selected element.

Adobe BrowserLab for FireBug

Context menu and tools for Adobe BrowserLab. BrowserLab generates screenshots of your pages (public or behind a firewall) in multiple browsers.

SEO Toolbar

Find out the on-page and off-page information you need for search engine optimization. Page rank, keywords, incoming links to the page or site

Colt - copy link text and location

Instead of copying in two separate steps, copy in one. You choose, by right-clicking the link, which format to copy in (including plain text, html link, and some blog formats).

Screengrab

Save the currently displayed portion of a web page, the entire web page (even if more than one screenful), or select a region. Copies to the clipboard, or save to an image file. Captures the ads that might rotate each time you visit a page. Excellent for sending an image in email to report to a web site owner that something isn't displaying well (for example those web site developers who write only for Internet Explorer).

InFormEnter

Store your personal information, or any other data you commonly type into forms. Specify your own names for the information. To fill in a field, press Insert and pick the information you want, and it's copied to the field.

HootBar

Easily post text, from your browser address bar, to Twitter. Can select which of your Twitter accounts to post to, and can post to several accounts at once. Just type your text and click the icon (instead of pressing Enter). Automatically shrinks URLs. Hovering over the icon will tell you how many characters you have left, or how many characters you're over the limit.

Dust-Me Selectors

Extracts all the selectors from all the stylesheets on the page you're viewing, then analyzes that page to see which of those selectors are not used. The data is then stored so that when testing subsequent pages, selectors can be crossed off the list as they're encountered.

You can test pages individually, or spider an entire site, and you'll end up with a profile of which selectors are not used anywhere.

CSS Usage

FireBug extension, to see which CSS rules are actually used in your site.

TypeGuage

Gives you the size in pixels of any text element on your web page. I use it to fine-tune sizing my text using em sizes (you have to know the container element's font size to get the size you want relative to the container's size).

DOM Inspector

If you're working in JavaScript, or reading XML files,this is great. See the exact DOM name of the element you want, easily.

iMacros for Firefox

Take data off web pages, even highly complex structured pages, such as real estate listings. Powerful scripting language to specify how to find the exact information you want, from several web sites, and paste the information into a web form for saving.

Live HTTP Headers

Shows exactly what files are being requested, and what the status codes are for each. I don't use it often, but when I do, it shows the details that let me fix problems of web sites not loading properly.

NoScript

For general web browsing, prevents scripts from loading automatically except from web sites you have approved. For developers, see how your site displays with javascript or other scripts turned on/off.

Save Complete

Save all the HTML, CSS and images of a web page, so you can re-display a page or examine the HTML and CSS that made a page.

Table2Clipboard

Copy to clipboard the selected rows/columns or individual cells, from an HTML table. Pastes easily into a spreadsheet, as cells.

MiniMap Addon

If you include map coordinates in your web pages, people can find your business from search engine queries like "near 125 Main St". This add-on lets you see the addresses on a web page in a map (just drag and drop the address to the MiniMap sidebar, or ). Recognizes many formats of addresses, including plain text, Google Maps, geotags, KML, etc.

If the site has geotags, just click the MiniMap icon in the Add-on bar, and see a map, fill in your starting location and get directions (you configure which map site you prefer). (Get geotags from http://geohash.org/ or http://geourl.org/add/helper )

If you are doing web development for local businesses, show them how easily customers can find their location.

User Agent Switcher

Great for testing that style sheets for different browsers or devices get loaded when they should. Makes Firefox send to the web server the user agent codes that identify the browser and hardware (for example iPhone or Firefox on OS/X) and browser version.

EPubReader

Read .epub books inside Firefox, no other software needed. With this and the Kindle Reader for Windows I can read most of the ebook formats out there.

Other Add-Ons (I haven't used yet)

PDFEscape Extension lets you edit and fill in forms on PDF filesHello George30 .

Advanced Cookie Manager

Autofill Forms

FlashBug for debugging Flash files. Includes an swf editor, amf data, shared objects, traces, policy log.

hOCR Editor to make it easier to proofread documents after using optical character recognition software.

FontFinder analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.


Web Hosting
Article of the Day
Article of the Day provided by TheFreeDictionary.com

Daily Grammar Lesson

Quote of the Day
Quote of the Day provided by The Free Library

Word Trivia
Word Trivia provided by FreeThesaurus.com