From Jimbojw.com

In this week's Weekly Web Hack, I'll take a step back from my usual foray into the bowels of web hackery and instead answer a question I get every so often: Which Firefox Extensions do you use?

For convenience, I have broken them up into groups. In this first article on Firefox Extensions, I'll focus on those most useful for Web Development.

Without further ado, here's the list (sorted alphabetically):

Chrome List

Provides a way to take a look at all of Firefox's files. Useful for digging into the innards of someone else's extension.

Console²

Replaces the default JavaScript error console with a better one. To be honest, I use this infrequently as I usually monitor errors via Firebug.

DOM Inspector

Lets you visually "walk the DOM" of a page, inspecting each element. Like Console², I rarely use this, instead relying on features of Firebug.

Aside: Technically this isn't an extension, since it's built into Firefox, but it does require a separate package install if you're running Debian or a derivative.

Edit Cookies

Gives you a nice UI for finding and manipulating cookies. I use this when I'm investigating session related issues, or if I just want to see what information can be harvested from a site's cookie set.

Extension Developer

Provides a host of useful Firefox Extension development tools - too many to list here in fact. The only thing I'll say is that if you're developing Firefox extensions, you should seriously look into using this extension to help.

Firebug

Firebug is an absolutely invaluable Web Developer tool. Most frequently I use its integrated JavaScript console to poke around the JS environment of webpages, but its HTML viewer/editor and integrated DOM inspector are both top-notch.

If you have Firebug installed, you can actually write messages to its console from your in-page JavaScript using the console object. For instance, executing console.log('hello there') will write out 'hello there' to the console.

You can use this as a debugger, by conditionally creating a dummy console object if it doesn't already exist. Something like this would work:

if (!console) console = {};
if (!console.log) console.log = function(){};

The console object has other methods as well such as warn, info and error if you want to be more granular in your debugging output.

FireFTP

Simple FTP client, support storing known hosts and authentication credentials. I use it because it's cross-platform, so no matter which OS I'm in, I have a familiar FTP interface.

Greasemonkey

This is the Swiss-army-knife of Firefox extensions. Greasemonkey allows you to inject custom JavaScript into any webpage based on simple URL filtering rules. And since you can manipulate the DOM via JavaScript, adding new HTML or CSS content, you can see that this gives you full power over any website.

Uses for Greasemonkey scripts range from simple usability hacks (for example for sites designed for IE), to full-blown applications. It can be used to remove annoying advertisements from websites, or add new swaths of functionality to existing sites.

I highly recommend existing and aspiring web developers spend some time becoming familiar with Greasemonkey.

JavaScript Debugger

Code named Venkman, the JavaScript Debugger provides an inroad to JavaScript like no other extension. For me, this is more of a last-resort than an everyday kind of tool, but there are times when it is by far the best tool for the job.

Tamper Data

Tamper Data allows you to monitor, record, and even modify HTTP/HTTPS requests and responses. That is, it gives you a window into all the little requests your browser makes when trying to render a web page.

I have written a Tamper Data tutorial, which I encourage you to read if you'd like more information about it.

User Agent Switcher

Allows you to easily change your browser's reported User Agent string. Useful for sites that employ user agent sniffing to deny users of non-accepted browsers. Such sites are becoming more rare, but you still see the occasional IE-only website.

View Source Chart

Provides a colorful view of the source of a webpage. Consider this an alternative to traditional View Source. Sometimes useful if you're trying to make sense of a convoluted, many-nested bit of HTML.

Web Developer

Another "must have" web development extension. Web Developer provides many, many functions - too many to mention them all here.

A few that I use often include the CSS Editor (allows you to modify the CSS of a page in real-time), and the Element Information inspector which gives you detailed information about a page element simply by clicking on it.

Enjoy! As always I'll be happy to answer any questions.

---

Comments

rasta said ...

Jimbojw said ...

Rich LaMarche said ...

Brutuscat said ...

Dave McFarland said ...

Jimbojw said ...

Jimbojw said ...

---

Got something to say?

Leave a comment

or, read what others have said...