Tools

 

 

 

 

 

 

 

 

 

age Inspector

A useful tool that shows you the HTML of the element you're currently pointing at with your mouse, in context.

Web Console

A console that lets you interactively output information, run JavaScript snippets, and experiment with your content.

Scratchpad

A text editor built into Firefox that lets you edit and run JavaScript code.

Style Editor

Lets you edit CSS styles for the current page in real time; in addition, you can toggle them on and off. A fantastic way to work in real time with the look and feel of web content!

JavaScript Debugger

Step through JavaScript code that is running in the browser (or even on a remote browser!) and watch variables to help track down bugs. This documentation also covers the Remote Debugger, which you can use to debug code running on a Firefox OS device or in Firefox on an Android device.

Responsive Design View

See how your designs will look on different screen sizes without changing the overall size of your browser window.

Using the Source Editor

The Source Editor isn't a standalone tool; instead, it's the underlying editor used by Scratchpad and the Style Editor. This article provides information common to all tools that make use of the Source Editor API.

Developer Toolbar

The Developer Toolbar provides a command-line interface to manipulate and work with the developer tools in Firefox, and buttons for quick access to the most commonly used tools.

Extensions

Firebug

Integrates a wealth of development tools to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page (details)

DOM Inspector

A developer tool used to inspect, browse, and edit the DOM of documents - usually web pages or XUL windows.

Web Developer

Adds a menu and a toolbar to the browser with various web developer tools. (details)

Aardvark

Reveals DOM elements as you scrub the mouse over a page. (details)

More on Firefox Add-ons

Web development category in the Firefox Add-ons site

Validators

List of validators

Various validators for things like HTML, CSS, RDF, Firefox extensions, and many others.

Authoring Software

HTMLTidy

Tool used to fix or point out invalid HTML as well as improve the layout and indentation style of the resulting markup.

JavaScript

Error Console

Tool used for reporting errors in the application chrome and user-opened web pages. Also reports JavaScript-related errors and warnings, CSS errors and arbitrary messages from chrome code.

Venkman

Mozilla's JavaScript Debugger

JSHint

JavaScript Static Analysis and Code Quality Tool

JSLint

JavaScript Code Quality Tool

JSDoc

Tool used for generation of (usually HTML) documentation from code comments (similar to JavaDoc).

DOM

DOM Inspector

Developer tool used to inspect, browse, and edit the Document Object Model of documents

MODI

Mouseover DOM Inpector is a bookmarklet that allows you to view and manipulate the DOM of a web page simply by mousing around the document.

Localization

Localization and Leveraging Tools

Tools and resources to help localize and translate your extensions to other languages.

Accessibility

Policy

WAI-ARIA Overview

An overview of WAI-ARIA, the Accessible Rich Internet Applications Suite; a set of documents that lay out how to make Web 2.0 sites and applications more accessible.

Testing Tools

AChecker

AChecker is a tool that allows you to type in a url and test for accessibility.

W3C complete list of tools

A Complete list of web accessibility evaluation tools

A more comprehensive list of accessibility resources, see: Fluid Project accessibility resources and ARIA

Tree and branch management

cross-commit script

Concurrent Versions System(CVS) script that allows a single patch to be easily checked in on multiple branches.

User profile tools

Multiple Firefox profiles

Navigating the Mozilla Codebase

MXR (if you use vim, mxr-vim speeds up the process)

DXR

Profile Manager

Categories

Interwiki Language Links