in Development

30 Useful Mozilla Firefox Plugins For Web Developers

When it comes to web applications or websites development, Mozilla is one of the most popular testing environment because of its plugins. These plugins not only makes your work easier but also they help you optimize your work in a very fast way. Below you can see 30 useful plugins that you should definitely try.

Monifox

Monifox add-on is an addition to Monitis performance monitoring and systems management tool. You can use it only if you already subscribed to Monitis service. It allows you to see your monitored Top 10 devices split by CPU utilization, Load Average, Memory usage, Storage usage and also your Top 10 URLs/IPs by Response Time. Besides that you can suspend/activate some of your monitors and contacts using this add-on.

DNS Flusher

DNS Flusher is a extension for reload changes on hosts file. When you change your hosts file, the firefox don´t loads the changes, you need restart the firefox for this. With this extension, you only click on IP showed in your status bar and the reload will be executed. Moreover, it shows the IP of the site you are browsing, so that you need to use two extensions.

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 :)

307.to

Why 307? – 307 is a server side temporary redirect code. Used by servers to redirect your web-browser to a new directory or a new web site. http://307.to/ is a redirect service used to make tiny URLs for a lot of uses. You can protect redirections or make a multiple links redirections for many purposes.

iMacros

iMacros was designed to automate the most repetitious tasks on the web. If there’s an activity you have to do repeatedly, just record it in iMacros. The next time you need to do it, the entire macro will run at the click of a button! With iMacros, you can quickly and easily fill out web forms, remember passwords, create a webmail notifier, download information from other sites, scrape the Web (get data from multiple sites), and more.

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.

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.

FireFTP

FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers. Along with transferring your files quickly and efficiently, FireFTP also includes more advanced features such as: directory comparison, syncing directories while navigating, SFTP, SSL encryption, search/filtering, integrity checks, remote editing, drag & drop, file hashing, and much more!

Session Manager

Session Manager saves and restores the state of all or some windows – either when you want it or automatically at startup, after crashes or periodically. It can also automatically save the state of open windows individually. This extension replaces SessionSaver and Tab Mix Plus’ session manager. It stores more data than both of them and should be more reliable in saving and restoring. Although it is not recommended to have more than one session related extension installed, Session Manager is compatible at least with Tab Mix Plus. It can import sessions from both SessionSaver and Tab Mix Plus.

Greasemonkey

Greasemonkey is a Mozilla Firefox extension that allows users to install scripts that make on-the-fly changes to HTML web page content on the DOMContentLoaded event, which happens immediately after it is loaded in the browser (also known as augmented browsing). As Greasemonkey scripts are persistent, the changes made to the web pages are executed every time the page is opened, making them effectively permanent for the user running the script. Greasemonkey can be used for adding new functions to web pages (for example, embedding price comparisons within shopping sites), fixing rendering bugs, combining data from multiple webpages, and numerous other purposes.

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. The extension can validate the HTML sent by the server or the HTML in the memory (after Ajax execution). The details of the errors are seen when looking the HTML source of the page.

Screengrab

Screengrab saves webpages as images. It will capture what you can see in the window, the entire page, just a selection, a particular frame… basically it saves webpages as images – either to a file, or to the clipboard.

 

Load Time Analyzer

The Load Time Analyzer allows developers to measure and graph how long web pages take to load in Firefox. Load Time Analyzer produces graphs that show the occurrence of events such as requests for the page, images, stylesheets and scripts, along with events like the execution of an onload script.

JSView

All browsers include a “View Source” option, but none of them offer the ability to view the source code of external files. Most websites store their javascripts and style sheets in external files and then link to them within a web page’s source code. Previously if you wanted to view the source code of an external javascript/stylesheet you would have to manually look through the source code to find the url and then type that into your browser.rnrnWell now there’s a much easier way. You can use the JSView extension to solve the problem. You can access it from the context menu, from the toolbar, from the view menu, or from the status bar.

Total Validator

Perform multiple validations and take screen shots in one go. This 5-in-1 validator works with external, internal, or local web pages using the Total Validator service or local copy of the desktop tool.

FirePHP

FirePHP enables you to log to your Firebug Console using a simple PHP method call. FirePHP is ideally suited for AJAX development where clean JSON or XML responses are required. All data is sent via response headers. This means that the debugging data will not interfere with the content on your page.

KGen

KGen retrieves every words of a page and lets you know how many time they appears and their weight in the page and their average position in the web page. It give you some stats on the content of the page to allows you to improve your content quality. KGen’s also a good tool to view your competitors keyword strategy. You can get a CSV file of the scan to create an historic of your changes (web redactor clients will appreciate to get them to realize how your work increased their web page seo).

CodeBurner

CodeBurner is a Firefox add-on that integrates with Firebug, to extend it with reference material for HTML and CSS. The extension’s core functionality is centered around a new Reference panel, which contains a search tool for looking up HTML elements, attributes, and CSS properties.

FlashInspector

Inspect flash(swf)’s DisplayObject with mouse. Overview the swf’s DisplayObject list. Set the inspect filter class when use mouse inspect. FlashInspector extension use tInspector to inspect DisplayObject. And it only work for AS3′s swf. FlashInspector can work with FlashFirebug (another great addon for Flash Developers), you can inspect DisplayObject in Firebug’s panel.

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.

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 search 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.

GridFox

Draws a grid on top of a website. This is useful for checking designs that are supposed to follow a grid-based layout. Right click anywhere on a website, and go to GridFox > Toggle Grid. In the bottom right, you’ll see some buttons to help you create, edit and save a grid. You’ll also see some arrows which let you browse any existing grids for the site you’re looking at.

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. And there’s more..

Rotate Image

Images in wrong direction are found often at fotouploadsites like Webshots.com or Photobucket.com and also on Ebay you can see misaligned productphotos. Now you can simple rotate those images by an right-mouseclick.

 

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.

Rainbow

Color tools for web development. Colors can be tried out on websites by dragging a color area from the picker, inspector, or library to webpage content, or by selecting an element to paint with the color picker. Color values can be viewed in hex, rgb, and hsl CSS formats.

ColorSuckr

This Add-on allows you to right-click any image on the web and extract the 12 most common colors from it. You can then build color schemes from the results as well as many other features on the ColorSuckr website.

Window Resizer

Resize your browser to various standard resolution sizes. The Browser Window Resizer is useful for testing different screen sizes. It accurately resizes your browser so you can test to see what a web page looks like in all of the standard resolution sizes.

MeasureIt

Page Diff

Page Diff is an add-on that helps web developers and designers see HTML source code differences between web pages. This is helpful for finding code irregularities or differences that will enable you to debug rendering issues.

Later edit: This one below  was suggested by one of our readers:

Tamper Data

Use tamperdata to view and modify HTTP/HTTPS headers and post parameters. Trace and time http response/requests. Security test web applications by modifying POST parameters.

 

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.