top 15 firefox extentions

Firefox has now been downloaded 165,123,014 times, inspiring hundreds of fantastic extensions. Rob Buckley presents the fifteen you really can’t afford to miss.





At the top of the list of things for web developers to remember should be a reminder that whatever can go wrong, will go wrong. Only the simplest of web page designs can make it from authoring app to the real world without having to undergo a few tweaks caused by browser incompatibility, accessibility problems, server issues or coding mistakes.

The main issues arise from the fact that pinning down problems in web pages really isn’t as simple a task as you might hope. Web browsers are designed to be easy to use, so filling them up with complex debugging tools is not an ideal solution. Browser developers might not be interested in adding web debugging tools to their software, but that doesn’t mean no one else can. If a browser has a simple, open extension architecture, anyone can add new features to it and make it do more or less anything they want.
The most extensible of all browsers is Firefox, which now has over 1,000 extensions. These are almost all cross-platform, so they work on Macs and Linux machines as well as Windows. They include debugging consoles, syntax validators, cookie manipulators, accessibility tools, manuals, measurement tools and search engine optimisation information. Add to that extensions that can rewrite the pages and stylesheets you’re using and suddenly Firefox becomes by far the most developer-friendly of all the browsers available.

Over the next three pages, we’re going to show you what the best 15 Firefox extensions can do for you, as well as look at some of the plug-ins available for other browsers. Installing an extension is easy: just click on the install link provided on each download page, give the site permission, and Firefox will be able to download and install the extension. Provided it’s compatible with the version of Firefox you’re using, the extension should be up and running as soon as you restart the browser.

1 Web Developer
http://chrispederick.com/work/webdeveloper
If there’s one Firefox extension to rule them all, it’s the Web Developer toolbar. It has a huge number of features, so we’ll start with the most useful. Often, you’ll need to work out exactly which styles apply to a page element with Web Developer installed, just click ‘View Style Information’ and every time you mouse over an element, the styles applied to it will appear in your status bar.

And there are plenty more goodies: you can outline highlights, common elements and links without title tags; images show sizes, alt tags and oversized images; forms enable you to manipulate form elements and submission methods; cookies enable you to add, delete and disable cookies; and there’s much more. Indispensable!

2 Mozilla Accessibility Extension
http://cita.disability.uiuc.edu/software/mozilla/

Virtually every company and site owner needs to ensure their web pages are accessible to disabled users as well as the able-bodied. The Mozilla Accessibility Extension provides a toolbar that gives non-disabled designers a taste of what it’s like to be a disabled web user, as well as giving disabled users a selection of tools to help with their browsing experience.

In addition to exposing the images that don’t have alt or longdesc tags, it enables you to disable certain mouse events, so you know how the page behaves when someone’s not using a mouse to navigate it. You can also deactivate formatting to see how well your layouts survive when reduced to their most accessible.

3 Fangs Screen Reader Emulator
http://www.standards-schmandards.com/fangs

The Mozilla Accessibility Extension works best in conjunction with the Fangs Screen Reader Emulator. Fangs is the most popular of the screen readers that are used by vision-impaired web surfers, and the Fangs Screen Reader Emulator gives you the next best thing: a stream of text which is identical to that which Fangs would read out when presented with your web page.

Accessible directly from the Tools menu, it’ll also give you a list of the headings that Fangs would pick up, as well as a list of links, presented in exactly the same order that Fangs would read them out. Note well, however, this extension is only compatible with Firefox 1.0 at the moment – check back later for updates.

4 FireBug
http://www.joehewitt.com/software/firebug/

FireBug is a useful improvement on the built-in Firefox debugging systems. It splits a Firefox window into two parts: the top half, which is dedicated to the web page itself, and the bottom half, which works as a console, complete with its own menus. It flashes up errors, combining an HTML and CSS validator, Firefox’s JavaScript Console and DOM Inspector, together with a command line JavaScript interpreter.

One extra-useful feature for AJAX developers that’s not enabled by default is the XMLHttpRequest Spy. This monitors the various web services messages that go between Firefox and the web server that’s running the AJAX application, making debugging a whole lot easier.

5 ColorZilla
http://www.iosart.com/firefox/colorzilla

Making sure page elements have matching colours and aren’t just a shade or two different can be time consuming, particularly if you’re comparing images with text, for example.

ColorZilla works like the eyedropper tool in Photoshop and other graphics programs, by enabling you to sample the colours of any element, whether it’s been coded or is in an image. Just click on the tool, then mouse over anything to find its colour value. ColorZilla will also report the distance between where you clicked and the current mouse position. And just to make sure you’re clicking in the right place, there’s a zoom feature that can magnify the page 1,000 per cent.

6 LinkChecker
http://www.kevinfreitas.net/extensions/linkchecker

Short of clicking on every link in a web page or running a spider over your site, it’s almost impossible to check for dead links, especially if you have quite a large links library. Using LinkChecker, simply right-click on the page or select LinkChecker from the Tools menu and it will verify all the links on the current page to see if they work.

It will colour-code each checked link: red for one that’s broken; yellow for forbidden or forwarded to another URL; green for okay; and grey if it had to skip the link for some reason. It’s clever enough not to try email links and any other kind of link that doesn’t lead to a standard web server.

7 MetaTags Sidebar
http://excode.com/metatags/mozilla.html

You may have the best site in the world, but if no one visits it, you might as well not have bothered. Meta tags are embedded in the top of HTML pages to give search engines a better idea what the site is about, as well as provide copyright and other information.

The MetaTags extension provides a sidebar that contains all the information stored in the current page’s meta tags, but in an easy-to-read format. If the site has keywords designed for specific searches, you can right-click those keywords to bring up a list of options, including searching the various bidding services for the current ad prices. There are also links to site submission services and the Alexa traffic monitoring service.

8 DevBoi
http://devboi.mozdev.org

Anyone coding CSS files will have had moments when they can’t quite recall the exact syntax for a style or which browsers support it – it’s just par for the course. Then there’s entity tables, HTML, XHTML, PHP, Ruby on Rails, JavaScript, DOM… So much to remember, so many other things to do.

DevBoi is a handy sidebar for coders that gives you instant access to all the manuals you’ve ever wished you had but couldn’t get your hands on just when you needed them the most. Simply launch it from the Tools menu and then doubleclick on the element in which you’re interested to bring up the right manual page. Suddenly, coding becomes a whole lot easier…

9 JSView
http://www.scorpiondb.com/firefox/extensions/jsview

With AJAX on just about everyone’s to-do list these days, decent JavaScript and CSS tools are a must for any developer. Most browsers only offer the option of viewing the source code of a page and you’d normally have to ferret through the code to find links to external files and then open them separately. JSView will open all the external CSS and JavaScript files linked to by a web page in their own windows.

If there’s more than one of each, you then get to choose whether to open all of them or just the one: to open individual files, select each one from the View menu. To open them all at the same time, either select them from the contextual menu or by using the optional toolbar buttons.

10 Execute JS
http://www.rudolf-noe.de/executejs.htm

The usual rule of working when developing JavaScript is to write your script, upload it to a server, and then load the page into a browser. If the script works, that’s great. Otherwise, you use a JavaScript console to work out where the error was.

Execute JS removes a lot of this tedium by enabling you to apply JavaScript directly to a page. A console provides the results of any actions and you can find the properties of objects on the page. You can modify functions on the fly: search, load, edit and eventually save them when you’re done. Execute JS also has a couple of other useful time-saving functions: a history of all your code snippets and a shortcut notation for frequently used elements.

11 SEO Links extension
http://www.seopen.com/firefox-extension/index.php

Search engine optimisation doesn’t stop with meta tags. Crafting a page to make it search engine-friendly is both an art and a science and there are many things that can affect a page’s search engine ranking. The SEO Links extension, which provides both a contextual menu and a toolbar, collects a number of online tools in one place so you can easily check your progress.

As well as some features found in some of these other extensions, SEO Links can work out the keywords you might want to use, tell you what the server’s robot.txt file says, the page’s file size, whether it’s included in the DMOZ directory, how many incoming links the page has, where it rates in Google’s PageRank and much more.

12 Add N Edit Cookies
http://www.addneditcookies.mozdev.org

Most cookie managers let you view cookies. Some let you delete cookies. But for anyone who wants to edit their cookies during testing, Add N Edit Cookies is the extension of choice. It works with both session and saved cookies and has a filter system for finding the cookie you want quickly.

One extra feature that you don’t get in most cookie managers either is, as the name of the extension suggests, the ability to add cookies for any domain you choose. That’s a boon for anyone wanting to test their site with varied cookie settings without the hassle of going to log-in screens. But it’s also a great way to test just how good your security is against someone who can hack their cookies.

13 UrlParams
http://www.urlparams.blogwart.com/share/index.php

Virtually every site with any interactivity uses forms. Testing a form to see what it has submitted usually involves inspecting the page content or the server headers, then backing up and re-submitting new information with the original form, once it’s reloaded.

UrlParams provide a sidebar that gives you a way to cut through all of that. It shows you what fields and data a form has submitted to the server and gives you a chance to alter resubmit it. And it works with both GET and POST forms.

What lifts it up beyond the likes of LiveHTTPHeaders and other similar extensions – beyond the ability to edit and drop form fields – is the layout. It’s just so much readable than all the options.

14 Table Inspector
http://www.juicystudio.com/article/firefox-table-inspector.php

Even though everyone worth their salt dropped table-based layouts years ago, table mark-up still gets used for, surprisingly enough, displaying tables. There’s plenty of scope within HTML mark-up for making data tables accessible, using tags such as summary, headers, axis, scope, and abbr. But that code remains invisible when viewed in a regular browser.

The Table Inspector Firefox extension makes the invisible visible. Essentially, once you activate it from the Tools menu or contextual menu. You’ll be able to see summaries, scopes and everything else appear highlighted in boxes, making table-management much easier and more pleasant to cope with.

15 Clear Cache Button
http://www.tinyurl.com/qetcb

Firefox’s cache is supposed to speed up everyday browsing (which it does), but when you’re in the midst of updating a web site’s pages and media files, it also means you end up having to hit refresh whenever you land on a page you’ve already visited to flush out the cached versions of all those files.

That’s when you wish you could opt to ditch that cache. Simple, but still extremely useful for anyone updating files on a server regularly, the Clear Cache button lets you empty Firefox’s cache instantly. To enable the button, use View - Toolbars - Customise… to bring up the toolbar customisation procedure. Then all you have to do is drag the button to the toolbar and click OK.