Posted on Aug 27, 2009

Firefox Extensions Every Developer Should Use

There are a lot of factors that makes Firefox the best browser currently available, but what makes Firefox really stands out is it support for extensions. A Firefox extension is an addon feature to the browser. There are thousands of available addons and in this post I’ll list some of the most used extensions by developers, in fact every developer should be using them.

Firebug

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

inspect

As you can see in the above image Firebug adds the option “Inspect Element” which appears when you right click on any element in a web page. When clicked it will display the source code of the select item along with the css styles applied on that element (see below).

firebug_thumb

Web Developer

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools. It is designed for Firefox, Flock and Seamonkey, and will run on any platform that these browsers support including Windows, Mac OS X and Linux.

toolbar

Firecookie

Firecookie is a an extension for Firebug that makes possible to view and manage cookies in your browser. Apart from all the other cookie managers and viewers available as Firefox extensions, this one is made as an extension for Firebug, so web developer has the functionality accessible within familiar Firebug’s UI.

scr-overview-thumb

Live HTTP Headers

View HTTP headers of a page and while browsing.

live_http_headers

Page Speed

Page Speed is an open-source Firefox/Firebug Add-on. Webmasters and web developers can use Page Speed to evaluate the performance of their web pages and to get suggestions on how to improve them.

page_speed_thumb

Firefinder

Firefinder is an extension to Firebug (in Firefox) and offers the functionality to, in a quick way, find HTML elements matching chosen CSS selector(s) or XPath expression. It allows you to instantly test your CSS selectors in the page while seeing the content at the same time, and matching elements will be highlighted.

firefinder_thumb

3 Comments