One of the goals of Firefox have always been to make the lives of web developers as easy and productive as possible, by providing tools and a very extensible web browser to enable people to create amazing things. The idea here is to list a lot of the tools and options available to you as web developers using Firefox.
Native developer tools in Firefox
We are working on building a great set of developer tools for you included in Firefox. They are described much more in detail in Developer Tools in Firefox Aurora 10 and there are some very interesting implications for what we can accomplish with them!
We are evaluating and experimenting with a number of user interfaces and code approaches to try and find the most optimal ways to work with code in a page. If you install Firefox Aurora you can try them out right now! Let us know what you think.
Also stay tuned to this blog, since we will post updates on progress and features for the native Developer Tools.
Firebug
By far, the most well-known web developer tool in a web browser is the Firebug extension, and without a doubt, for a long time it set the bar for how web developing and debugging should be. Firebug is still a very important tool with lots of powerful features, including a vast number of extensions (see below).
Just something you need to be aware of, though, is with everything that Firebug offers it can be quite heavy when it comes to consuming memory, so use it accordingly.
Firefox extensions for web developers
Over the years, a lot of extensions have been developed to help web developers utilize Firefox to the maximum. Some of the most used and well-known are these ones, but please let us know if we have missed any that helps you!
Accessibility Evaluation Toolbar
Support web developers in testing web resources for accessibility features.
All in One Sidebar
AiOS lets you open various windows as sidebar panels, and quickly switch between them. So it put an end to the window chaos! In addition to bookmarks and history it opens dialogues such as downloads, add-ons and more in the sidebar.
Cache Status
Easy cache status & management from status.
CacheToggle
Disable (and optionally clear) the browser cache with the flick of a switch.
Colorzilla
Advanced Eyedropper, ColorPicker, Gradient Generator and other colorful goodies.
Console²
Console² (pronounced Console Squared or Console Two) replaces the JavaScript Console with what could be the next generation Error Console. From v0.5 includes the Console Filter extension previously available separately from the Console² website.
CSS Reloader
CSS Reloader is an extension that allows you to reload all the CSS of any site without you have to reload the page itself.
DOM Inspector
DOM Inspector is a tool that can be used to inspect and edit the live DOM of any web document or XUL application. The DOM can be navigated using a two-paned window displaying a variety of different views on the document and all nodes within.
Firefogg
Video and audio encoding for Firefox. With Firefogg you can encode most media files to Ogg and WebM. Firefogg also provides an API to integrate encoding into the upload process.
FireFTP
FireFTP is a free, secure, cross-platform FTP/SFTP client for Mozilla Firefox which provides easy and intuitive access to FTP/SFTP servers.
FireUnit
JavaScript Unit Testing Extension
FoxGuide
Display horizontal and vertical floating guides, exactly the way you use it in photoshop. Helps improving layout, placing elements in proper grids, laying out elements symmetrically and structure a design.
FoxyProxy Standard
FoxyProxy is an advanced proxy management tool that completely replaces Firefox’s limited proxying capabilities. It offers more features than SwitchProxy, ProxyButton, QuickProxy, xyzproxy, ProxyTex, TorButton, etc.
Geolocater
Geolocate you where you want.
GreaseMonkey
Customize the way a web page displays or behaves, by using small bits of JavaScript.
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.
HttpFox
An HTTP analyzer addon for Firefox.
iMacros for Firefox
Automate Firefox. Record and replay repetitious work. If you love the Firefox web browser, but are tired of repetitive tasks like visiting the same sites every days, filling out forms, and remembering passwords, then iMacros for Firefox is the solution you’ve been dreaming of!
Jenkins Build Monitor
Monitor Jenkins (http://jenkins-ci.org) builds and display the status on Firefox status bar.
jQuery extension
jQuery and jQuery UI embedded in browser.
JSONovich
Pretty-prints JSON content in the browser for easy, unobtrusive viewing.
JSONView
View JSON documents in the browser.
JSView
If the website you are viewing contains any external js/css files, an icon will appear that says “SS”, “JS”, or both. Each individual file can then be viewed by clicking on the filename. The file will be opened in a new window.
Link Widgets
Eases navigation within sequences of pages (e.g. Web comics, forums, or technical specifications such as the HTML 4 Recommendation) by providing toolbar buttons for the first, previous, next, and last page.
Live HTTP Headers
View HTTP headers of a page and while browsing.
LiveReload
LiveReload refreshes a web page when files change.
MeasureIt
Draw a ruler across any webpage to check the width, height, or alignment of page elements in pixels.
Modify Headers
Add, modify and filter the HTTP request headers sent to web servers. This addon is particularly useful for Mobile web development, HTTP testing and privacy.
NoScript
The best security you can get in a web browser! Allow active content to run only from sites you trust, and protect yourself against XSS and Clickjacking attacks.
PageSpeed
Page Speed is an open-source project started at Google to help developers optimize their web pages by applying web performance best practices.
Phoenix
An editor with real time syntax highlighting which allows edit, run and test CSS, HTML and JavaScript code. Phoenix will tell you how many CSS and JS files are loaded into a page, how big these are, it will let you edit, pack and de-obfuscate them.
PixelZoomer
PixelZoomer takes a screenshot of the current website and provides various tools for pixel analysis. You can zoom into websites (up to 3200%), measure distances and pick colors with an eye dropper.
Pixlr Grabber
Grabbing screens and pulling images from the web just got a bit easier. With the Pixlr Grabber add-on, you can copy, save, share or even edit your final grabs – including any image or background – with just a right-click.
Poster
A developer tool for interacting with web services and other web resources that lets you make HTTP requests, set the entity body, and content type. This allows you to interact with web services and inspect the results.
QuickJava
Allows quick enable and disable of Java, Javascript, Flash, Silverlight, Images, Stylesheets and Proxy from the Statusbar and/or Toolbar without having to open any dialogs!
Rainbow Color Tools
Color tools for web development. Color picker and eyedropper + saving colors and trying out colors with drag and drop.
Regular Expressions Tester
Testing tool for regular expressions with color highlighting (including submatches) and helpers for creating expressions.
Remove Cookie(s) for Site
A very simple extension to remove all the cookies of currently opened site. It adds an option to the Right Click menu of the page, and a Clear Cookies Button to perform this operation. It displays the status of operation in the status bar.
Screenshot Pimp
Capture, grab, save, download, or copy anything you see in your web browser with only one click! Screenshot pimp is by far the most customizable, and user friendly screenshot toolbar available for both Windows and Mac!
SQLite Manager
Manage any SQLite database on your computer.
Selenium IDE Button
Just one simple toolbar button to open Selenium IDE. You need to have installed Selenium IDE: http://seleniumhq.org/projects/ide/
SeoQuake SEO extension
Seoquake is a Firefox SEO extension aimed primarily at helping web masters who deal with search engine optimization (SEO), social media optimization (SMO) and internet promotion. Seoquake allows to investigate many important SEO parameters.
ShowIP
Show the IP address(es) of the current page in the status bar. It also allows querying custom information services by IP (right click) and hostname (left click), like whois, netcraft, etc. Additionally you can copy the IP address to the clipboard.
Stylish
Restyle the web with Stylish, a user styles manager. Stylish lets you easily install themes and skins for Google, Facebook, YouTube, Orkut, and many, many other sites. You can even customize Firefox and other programs themselves.
Tamper Data
Use tamperdata to view and modify HTTP/HTTPS headers and post parameters.
TAW3
You can have an idea, with a single click, of how accesible web sites are.
Tilt 3D
A WebGL-based 3D visualization of a webpage.
Total Validator
Perform many different validations in one go. This multiple validator works with external, internal, or local web pages using a local copy of the desktop tool obtained from http://www.totalvalidator.com/downloads/extensiontool.html.
TryAgain
TryAgain keeps trying to load a webpage when the server cannot be reached.
User Agent Switcher
The User Agent Switcher extension adds a menu and a toolbar button to switch the user agent of a browser.
Wappalyzer
Wappalyzer is a browser add-on that uncovers the technologies used on websites.
Web Developer
The Web Developer extension adds various web developer tools to a browser.
Firebug extensions
There exists a lot of extensions for Firebug for a number of different use cases, and a number of them are listed here:
Acebug
Syntax highlighting for the Firebug command line using Ace. Fuzzy auto completion.
Code Coverage v2 for Firebug 0.1
This Firebug extension is used to report the Javascript code coverage.
CSS Usage
Firebug extension to view which CSS rules are actually used.
Firecookie
Firecookie is an extension for Firebug that makes possible to view and manage cookies in your browser.
Firefinder
Finds HTML elements matching chosen CSS selector(s) or XPath expression.
FirePHP
FirePHP enables you to log to your Firebug Console using a simple PHP method call.
FireQuery
Firebug plugin for jQuery development.
friendly bug
Makes firebug friendlier and easier to use
Inline Code Finder for Firebug
Inline Code Finder is an add-on to Firebug, to be able to find HTML elements with any of these issues: Inline JavaScript events, Inline style, javascript: links.
FireRainbow
Javascript syntax highlighting for Firebug.
NetExport
NetExport is a Firebug extension that allows exporting all collected and computed data from the Net panel. The structure of the created file uses HTTP Archive (HAR) format (based on JSON).
Pixel Perfect
Pixel Perfect is a Firefox/Firebug extension that allows web developers and designers to easily overlay a web composition over top of the developed HTML.
YSlow
YSlow analyzes web pages and why they’re slow based on Yahoo!’s rules for high performance web sites.
There are even more extensions available for Firebug, available in the Firebug Extensions wiki.
About Robert Nyman [Editor emeritus]
Technical Evangelist & Editor of Mozilla Hacks. Gives talks & blogs about HTML5, JavaScript & the Open Web. Robert is a strong believer in HTML5 and the Open Web and has been working since 1999 with Front End development for the web - in Sweden and in New York City. He regularly also blogs at http://robertnyman.com and loves to travel and meet people.
89 comments