Ferramentas de Desenvolvimento do Firefox

Examinar, editar, e depurar HTML, CSS, e JavaScript no pc e nos dispositivos móveis

Instalar Edição de Desenvolvoimento do FirefoxQuais são as novidades da Edição de Desenvolvimento do Firefox?

Edição de Desenvolvimento do Firefox é uma versão do Firefox adaptada para os programadores, apresentando as funcionalidades do Firefox mais recentes e ferramentas de desenvolvimento experimentais. Esta edição inclui essas atualizações para as ferramentas do programador:

 

Criação

Ferramentas de preparação para sites da Web e aplicações da Web.

Scratchpad
Um editor de texto incorporado no Firefox que o deixa escrever e executar JavaScript.
Editor de Estilo
Ver e editar estilos de CSS para a página atual.
Editor Shader
Ver e editar vértice e fragmentos de shaders utilizados pelo WebGL.
Editor de Áudio da Web
Examine os nodos do gráfico de áudio num contexto de áudio, e modifique os seus parâmetros.

Exploração e depuração

Examine, explore, e depure sites e aplicações da Web.

Consola da Web
See messages logged a web page, and interact with the page using JavaScript.
Inspetor de Página
View and modify the page HTML and CSS.
Depurador de JavaScript
Stop, step through, examine and modify the JavaScript running in a page.
Monitor de Rede
See the network requests made when a page is loaded.
Inspetor de Armazenamento
Inspect cookies, local storage, indexedDB and session storage present in a page.
Barra de ferramenta do Programador
A command-line interface for the developer tools.
Visualização 3D
Visualização da página em 3D.
Eyedropper
Selecione uma cor da página.
Trabalhar com iframes
How to target a particular iframe.

Móvel

Ferramentas para o desenvolvimento móvel.

Gestor de Aplicação
O Gestor de Aplicações foi substituído por 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 Desempenho
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.
Registo de Eventos Reflow
See reflow events in the web console.
Desempenho da Rede
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.

Adicione um novo painel às ferramentas de desenvolvimento
Write an add-on that adds a new panel to the Toolbox.
Protocolod e Deputação Remoto
The protocol used to connect the Firefox Developer Tools to a debugging target like an instance of Firefox or a Firefox OS device.
Editor de Fonte
A code editor built into Firefox that can be embedded in your add-on.
A Interface do Depurador
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.
Consola da Web - saída personalizada
How to extend and customize the output of the Web Console and the Browser Console.
Exemplo de add-ons das ferramentas de desenvolvimento
Utilize estes exemplos para compreender como implementar um add-on das ferramentas de desenvolvimento.

Mais recursos

This section lists resources which are not currently maintained by Mozilla's developer tools team, but which are widely used by web developers. We've included a few Firefox add-ons in this list, but for the complete list see the “Web Development” category on addons.mozilla.org.

Firebug
A very popular and powerful web development tool, including a JavaScript debugger, HTML and CSS viewer and editor, and network monitor.
Inspetor DOM
Inspecione, explore, e edite o DOM das páginas da Web ou janelas XUL.
Programador da Web
Adds a menu and a toolbar to the browser with various web developer tools.
Ferramentas de Webmaker
A set of tools developed by Mozilla, aimed at people getting started with Web development.
Validadores de W3C
The W3C website hosts a number of tools to check the validity of your website, including its HTML and CSS.
Dica de JS
ferramenta de análise do código JavaScript.

Join the Developer tools community

Choose your preferred method for joining the discussion:

Etiquetas do documento e colaboradores

 Colaboradores para esta página: mansil, robert882, Leite, caobarbosa, Timmi
 Última atualização por: mansil,