Whatterz


Firefox Extensions for Web Developers

by Simon. Average Reading Time: about 3 minutes.

By itself, Firefox is a lean and fast browser, but lacks many functions useful to a Web Developer. This is where extensions come to the rescue. Web Developers use a host of Firefox extensions to increase their efficiency.

Here is a list of the Firefox extensions I utilise in my day-to-day work:

ColorZilla

https://addons.mozilla.org/firefox/271/

Advanced Eyedropper, ColorPicker, Page Zoomer and other colorful goodies.

With ColorZilla you can get a color reading from any point in your browser, quickly adjust this color and paste it into another program. You can Zoom the page you are viewing and measure distances between any two points on the page. The built-in palette browser allows choosing colors from pre-defined color sets and saving the most used colors in custom palettes. DOM spying features allow getting various information about DOM elements quickly and easily.

Firebug

https://addons.mozilla.org/firefox/1843/

FireBug lets you explore the far corners of the DOM by keyboard or mouse. All of the tools you need to poke, prod, and monitor your JavaScript, CSS, HTML and Ajax are brought together into one seamless experience, including a debugger, an error console, command line, and a variety of fun inspectors.

FireFTP

https://addons.mozilla.org/firefox/684/

FireFTP is a free, secure, cross-platform FTP client for Mozilla Firefox which provides easy and intuitive access to FTP servers.

Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SSL encryption, file hashing, and much more.

HTML Validator

http://users.skynet.be/mgueury/mozilla/

HTML Validator is a Mozilla extension that adds HTML validation inside Firefox and Mozilla.
The number of errors of a HTML page is seen on the form of an icon in the status bar when browsing.
The details of the errors are seen when looking the HTML source of the page.

The extension is based on Tidy. Tidy, was originally developed by the Web Consortium W3C. And now extended and improved by a lot of people. Tidy is embedded inside Mozilla/Firefox and makes the validation locally on your machine, without sending HTML to a third party server.

IE Tab

http://ietab.mozdev.org/

This extension embeds Internet Explorer (IE) in a Mozilla/Firefox tab, which allows you to view your work in IE without launching a separate window.

LinkChecker

https://addons.mozilla.org/firefox/532/

Checks the validity of links on a web page.

MeasureIt

https://addons.mozilla.org/firefox/539/

Draw out a ruler to get the pixel width and height of any elements on a webpage.

SEO for Firefox

http://tools.seobook.com/firefox/seo-for-firefox.html

This tool was designed to add more data to Google and Yahoo! to make it easier to evaluate the value and competitive nature of a market. SEO for Firefox pulls in many useful marketing data points to make it easy get a more holistic view of the competitive landscape of a market right from the search results. In addition to pulling in useful marketing data this tool also provides links to the data sources so you can dig deeper into the data.

Server Spy

https://addons.mozilla.org/firefox/2036/

Server Spy indicates what brand of HTTP server (eg. Apache, IIS, etc.) runs on the visited sites. When a tab is selected, the corresponding server name is shown on the right-hand side of the browser’s status bar.

Snapper

https://addons.mozilla.org/firefox/2703/

People often take screenshots of web pages for miscellaneous reasons – when designing a page, debugging a web application, or even for graphical reference. Usually, though, only a portion of the screenshot is actually relevant to the user’s purpose, leading to a large portion of the image getting cropped. This can be time consuming, and annoying at times.

Snapper allows users to designate an area of a web page for a focused snapshot, cutting out the additional work needed for cropping unecessary information.

Web Developer

https://addons.mozilla.org/firefox/60/

http://chrispederick.com/work/webdeveloper/

The Web Developer extension adds a menu and a toolbar to the browser with various web developer tools.

Here is a list of other extensions I find useful:

CustomizeGoogle
Gmail Space
Google Notebook
GooglePreview
SessionSaver
Tails Export

This article has been tagged

, , , , , , , ,

Other articles I recommend

Run Two Versions of Firefox on Mac OSX

Last week Firefox 4.0 was released to the world. Web developers everywhere celebrated with delight, the new browser. Well, almost! The browser comes packed with a super-fast JavaScript engine called JägerMonkey, improved support for HTML5 and CSS3 and a bunch of new interface updates.

Refactoring the Web with Mozilla Prism

Both Web 2.0 and Software-as-a-Service (SaaS) almost always depend up on the browser as a common denominator. It is with the web browser that web-based applications are accessed and run, yet the browser model is rapidly reaching its limitations. Prism is part of an experiment by Mozilla designed to bridge the divide in the user experience between web applications and desktop applications.

Web Accessibility Toolbar

The Web Accessibility Toolbar, provided by the Accessible Information Solutions (AIS) team at the National Information and Library Service (NILS) , Australia, is a tool for advanced users or web developers, that helps to examine the structure, components and accessibility features of any given web page. It installs as an Internet Explorer (version 5+, Windows) toolbar and offers several integrated tools to inspect style sheets, tables, frames, images and more, as well as a wide variety of tests and features that are provide by other web sites, including link checks, HTML validation, page download speed, colour simulations, page resolutions and much more. A nice toolbox for web developers.

  • http://cazmockett.blogspot.com/ Caz Mockett

    Some useful ones here, some of which I didn’t know about. I also use Tails 0.3.6 (possibly different to the Tails export, I’m not sure?). And FoxyTunes, which means I can manage my music directly in the browser, and the media player doesn’t take up acres of room (even minimised) in the task bar. :-)

  • http://www.simonwhatley.co.uk Simon

    Tails 0.3.6 does appear to be different, but both handle microformats. Which one is better, I´ll have to find out.