Ferramentas de Desenvolvimento do Firefox

Examinar, editar, e depurar HTML, CSS, e JavaScript no PC e nos dispositivos móveis. Para as últimas atualizações das ferramentas de desenvolvimento, transfira:

Edição de Desenvolvoimento do Firefox

 

 

As Ferramentas Centrais


Inspetor de Página

Ver e editar conteúdo e apresentação da página. Visualize muitos aspetos da página, incluindo o modelo de caixa, animações e apresentações de grelha.

Consola da Web

Ver mensagens registadas por uma página da Web e interagir com a página utilizando o JavaScript.


Depurador de JavaScript

Parar, percorrer, examinar e modificar o JavaScript em execução numa página.

Monitor de Rede

Ver os pedidos de rede efetuados quando uma página é carregada.


Ferramentas de Desempenho

Analise a reação geral do site, JavaScript, e desempenho da apresentação.

Modo de Desenho Responsivo

Ver como o seu site da Web ou aplicação serão apresentados e se comportam nos diferentes dispositivos e tipos de rede.


Mais Ferramentas

These developer tools are also built into Firefox. Unlike the "Core Tools" above, you might not use them every day.

Memória
Figure out which objects are keeping memory in use.
Inspetor de Armazenamento 
Inspect cookies, local storage, indexedDB, and session storage present in a page.
DOM Property Viewer
Inspect the page's DOM properties, functions, etc.
Barra de Ferramentas do Programador
A command-line interface for the developer tools.
Eyedropper
Select a color from the page.
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.
Editor de Áudio da Web
Examine the graph of audio nodes in an audio context, and modify their parameters.
Capturas de ecrã
Efetuar uma captura de ecrã de uma página completa ou de um único elemento.

Ligação de Ferramentas de Desenvolvimento

If you open the developer tools using atalhos de teclado or the equivalent menu items, they'll target the document hosted by the currently active tab. But you can attach the tools to a variety of other targets, too, both within the current browser and in different browsers or even different devices.

about:debugging
Debug add-ons, content tabs, and workers running in the browser.
Connecting to Firefox for Android
Connect the developer tools to an instance of Firefox running on an Android device.
Connecting to iframes
Connect the developer tools to a specific iframe in the current page.
Connecting to other browsers
Connect the developer tools to Chrome on Android and Safari on iOS.

Depurar 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 extras 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 de 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: