Ferramentas de Desenvolvimento do Firefox

Criação

Authoring tools for websites and web apps.

Scratchpad

A text editor built into Firefox that lets you write and execute JavaScript.

Style Editor

View and edit CSS styles for the current page.

Shader Editor

View and edit the vertex and fragment shaders used by WebGL.

Web Audio Editor

Examine the graph of audio nodes in an audio context, and modify their parameters.

Exploração e depuração

Examine, explore, and debug websites and web apps.

Consola da Web

See messages logged a web page, and interact with the page using JavaScript.

Page Inspector

View and modify the page HTML and CSS.

JavaScript Debugger

Stop, step through, examine and modify the JavaScript running in a page.

Network Monitor

See the network requests made when a page is loaded.

Storage Inspector

Inspect cookies, local storage, indexedDB and session storage present in a page.

Developer Toolbar

A command-line interface for the developer tools.

3D View

3D visualization of the page.

Eyedropper

Select a color from the page.

Working with iframes

How to target a particular iframe.

Móvel

Ferramentas para o desenvolvimento móvel.

Gestor de Aplicação

App Manager has been replaced by WebIDE.

WebIDE

The replacement for the App Manager, available from Firefox 33 onwards.

Simulador do Firefox OS

Run and debug your Firefox OS app on the desktop, without needing a real Firefox OS device.

Visualização de Desenho Compreensiva

See how your website or app will look on different screen sizes without changing the size of your browser window.

Depuração no Firefox para Android

Connect the developer tools to Firefox for Android.

Depurar o Firefox para Android com WebIDE

For Desktop Firefox 36+ / Android Firefox 35+, there's a simpler process.

Valence

Connect the developer tools to Chrome on Android and Safari on iOS

Desempenho

Diagnose and fix performance problems.

Ferramenta de Desemepnho

Analyze your site's general responsiveness, JavaScript and layout performance.

Frame rate graph

See the frame rate for your site.

Waterfall

Figure out what the browser is doing as it runs your site.

Call Tree

Figure out where your JavaScript code is spending its time.

Flame Chart

See which functions are on the stack over the course of a performance profile.

Paint Flashing Tool

Highlights the parts of the page that are repainted in response to events.

Reflow Event Logging

See reflow events in the web console.

Network Performance

See how long the parts of your site take to load.

Depuração do navegador

By default, the developer tools are attached to a web page or web app. But you can also connect them to the browser as a whole. This is useful for browser and add-on development.

Consola do Navegador

See messages logged by the browser itself and add-ons, and run JavaScript code in the browser's scope.

Caixa de Ferramentas do Navegador

Attach the Developer Tools to the browser itself.

Aumento das ferramentas de desenvolvimento

The developer tools are designed to be extensible. Firefox add-ons can access the developer tools and the components they use to extend existing tools and add new tools. With the remote debugging protocol you can implement your own debugging clients and servers, enabling you to debug websites using your own tools or to debug different targets using the Firefox tools.

Add a new panel to the devtools

Write an add-on that adds a new panel to the Toolbox.

Remote Debugging Protocol

The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.

Source Editor

A code editor built into Firefox that can be embedded in your add-on.

The Debugger Interface

An API that lets JavaScript code observe the execution of other JavaScript code. The Firefox Developer Tools use this API to implement the JavaScript debugger.

Web Console custom output

How to extend and customize the output of the Web Console and the Browser Console.

Example devtools add-ons

Use these examples to understand how to implement a devtools add-on.

Firebug

A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.

DOM Inspector

Inspect, browse, and edit the DOM of web pages or XUL windows.

Web Developer

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

Webmaker Tools

A set of tools developed by Mozilla, aimed at people getting started with Web development.

W3C Validators

The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.

JSHint

JavaScript code analysis tool.