Web Musings by Alistair Johnson

My favourite Firefox extensions

Friday, October 24th, 2008 | Uncategorized

I thought I would share with you a summary of the firefox extensions that I have found to be invaluable for work on my project this semester (in order of usefulness) :

Firebug

This is the ultimate firefox extension for any web designer/developer. It’s functionality includes:

• Inspect and edit HTML & CSS – firebug allows you to easily scan through your html source code and CSS and make changes on-the-fly. This is a great way to make test minor changes to your html and css to see the effect immediately, without the need to change the content of the actual files. In addition, if something in your page doesn’t look right but you can’t locate the required css or html in your code, simply hover over the offending element in your page and firebug will instantly display the html and css relevant in that context.
• Box Model shading – as you hover your mouse over an html element, firebug will display the elements margin, padding and content in different colours on the page. It’s a great way to visualise the effect of margins and padding on different elements.
• Debug and profile javascript - Firebug includes a powerful JavaScript debugger that lets you pause execution at any time and have look at the state of the world. If your code is a little sluggish, you can use the JavaScript profiler to measure performance and find bottlenecks fast.

Web Developer Toolbar

Thanks goes to Alastair for recommending this extension. Among other things, I find It most useful for:

• outlining elements on the page to assist with alignment and/or padding issues.

• Providing a ruler so that I can get a general idea of the measurements I have to work with for various elements, divs and images

• providing a quick link to conduct html and css validation of the current page

• a menu to resize the viewport to a set of common screen resolutions (this was particularly handy as my final project uses a liquid page layout and needed to be tested at various resolutions)

• the option to quickly disable javascript, so that your site’s functionality can be tested under circumstances without javascript available.

FireFTP

This is a really nice lightweight ftp program that presents a really simple intuitive interface for your ftp needs. No need to download a stand-alone ftp program when this simple extension will fulfill most people’s requirements.

UrlParams

This extension will show any GET or POST parameters that are sent between pages of a website. I found particularly helpful when testing the functionality of the forms on my site and useful in debugging any unexpected form behaviour.

Livehttpheaders

This extension will display all http header information as you browse a website. Although not very important within the scope of this course, it helped improve my my understanding of how http operates.

If you have not played with any of the aforementioned extensions, I suggest you give them a try. They can really improve your productivity and general understanding of internet technologies.

Tags: extensions, firefox

1 Comment to My favourite Firefox extensions

Leave a comment