in Development

20 Useful Mozilla Addons for Web Developers

Being a web developer is getting easier every day thanks to the tools that are being published. Except coding, I think you can to almost anything using only Mozilla and a couple of plugins. You can debug your website with firebug, check the compatibility with Internet Explorer thanks to IE Tab, find out why the website is loading slow with Yslow, and many other cool things.

In this article you can see a collection of 20 very useful addons for Mozilla which are indispensable for any web developers who wants to enhance his productivity.

Firebug

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

Flagfox

Flagfox is an extension that displays a flag icon indicating the current webserver’s physical location. Knowing where you’re connected to adds an extra layer of awareness to your browsing and can be useful to indicate the native languages and legal jurisdictions that may apply. Additional information can be obtained via a multitude of external lookups and users can add their own custom actions. All actions can be added to the flag icon’s context menu and set to icon click or keyboard shortcuts for quick access.

IE Tab V2

Just like the classic IE Tab, this updated version of IE Tab allows you to use IE to display web pages in a tab within FireFox. This updated version includes support for FireFox 3.6 and will continue to be updated with new features and enhancements.

ColorZilla

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. The powerful CSS gradient generator allows quick and easy creation of beautiful gradients.

DOM Inspector

Inspects the structure and properties of a window and its contents with a variety of views.

YSlow

YSlow analyzes web pages and suggests ways to improve their performance based on a set of rules for high performance web pages. YSlow is a Firefox add-on integrated with the Firebug web development tool. YSlow grades web page based on one of three predefined ruleset or a user-defined ruleset.

Html Validator

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.

Illuminations for Developers for Firebug

A set of tools to help you develop web applications by investing Firebug with the knowledge of the JS framework you are working with. Supports ExtJS and Sencha Touch, with beta-level support for Dojo Toolkit, SproutCore, qooxdoo, YUI, Google Closure Library, and jQuery UI. Trial version.

Pixel Perfect

By toggling the composition on and off, the developer can visually see how many pixels they are off in development. Pixel Perfect also has an opacity option so that you can view the HTML below the composition. By being able to see both the composition and the HTML you can now simultaneously use Firebug while Pixel Perfect is still in action.

Greasefire

When you visit a web page that has compatible user scripts on Userscripts.org, this extension will highlight the Greasemonkey/Scriptish icon in the toolbar button (or status bar icon for older versions of Greasemonkey). Right click the icon and choose the “X scripts available” menu item to see and install the scripts available for the current page.

TrashMail.net for Mozilla Firefox

Create disposable email addresses. This plugin uses the free TrashMail.net DEA service. Guide to use this extension: Click the right mouse button in an editable field. A menu will appear with the option to paste a disposable email address (see screenshot).

HackBar

This toolbar will help you in testing sql injections, XSS holes and site security. It is NOT a tool for executing standard exploits and it will NOT teach you how to hack a site. Its main purpose is to help a developer do security audits on his code. If you know what your doing, this toolbar will help you do it faster. If you want to learn to find security holes, you can also use this toolbar, but you will probably also need a book, a lot of Google and a brain :)

Font Finder

FontFinder is created for designers, developers and typographers. It allows a user to analyze the font information of any element on a page, copy any piece(s) of that information to the clipboard, and perform inline replacements to test new layouts.

PHP Developer Toolbar

A Tool Bar developed for PHP programmers. Allows you to search in multiple websites, access communities of developers and projects.
With shortcuts you can quickly see function descriptions or search into official websites. It also provides you links to many interesting tools, all made in PHP or for PHP, and access to PHP User Groups all around the world.You can also generate classes and HTML forms easily, with the native PHP Generator Tool, added to this add-on.

Cookie Importer

Imports cookies from a textfile, that has the Netscape standard format as used by IE and others. Very useful in combination with the Cookie Exporter add-on.

Scroll Up Folder

Goes up a folder of a website. Usage: place mouse over urlbar, scroll wheel up or down. Middle click bar to go. If you prefer use your keyboard, go to urlbar (CTRL+L shortcut or click onto) then press ALT. A window will display available urls. Press UP or DOWN to navigate then valid with ALT. Note: you can still type your url.

UnicodetoHTML

Converts selected unicode text to HTML character codes with right-click. Automatically copies HTML character codes to the clipboard. I plan on only updating compatibility with new Firefox versions. I don’t intend to add functionality. One issue that exists is related to frames. If text is selected within a frame, UnicodetoHTML returns a blank popup and doesn’t copy anything to the clipboard. I’m not going to address this, but if someone else wants to, they are welcome to help.

JavaScript Deobfuscator

The code displayed comes straight from the JavaScript engine of the browser. Whenever the JavaScript engine compiles or executes a script it is added to the corresponding list. The rules at the bottom of the Deobfuscator window define which scripts should show up. By default, browser’s own scripts and extensions are excluded but the filters can be adjusted to show those as well. The JavaScript engine reformats the source code so that it is easier to read – there are also some artifacts however like some functions appearing twice.

HeadingsMap

The extension generates an index (or map) of any web document structured with headings (you can access directly to the content by clicking on any of its items).

SQLite Manager

Manage any SQLite database on your computer. An intuitive heirarchical tree showing database objects. Helpful dialogs to manage tables, indexes, views and triggers.You can browse and search the tables, as well as add, edit, delete and duplicate the records. Facility to execute any sql query.

Converts selected unicode text to HTML character codes with right-click. Automatically copies HTML character codes to the clipboard.

I plan on only updating compatibility with new Firefox versions. I don’t intend to add functionality. One issue that exists is related to frames. If text is selected within a frame, UnicodetoHTML returns a blank popup and doesn’t copy anything to the clipboard. I’m not going to address this, but if someone else wants to, they are welcome to help.

Bogdan

Bogdan is the founder of Top Design Magazine. You can find him in Bucharest-Romania so next time you want to drink a beer there and talk about web and stuff, give him a message.

Leave a Reply