---
title: Ferramentas do Firefox para desenvolvedores
slug: Tools
tags:
  - Developing Mozilla
  - NeedsMarkupWork
  - NeedsTechnicalReview
  - NeedsTranslation
  - Tools
  - TopicStub
  - Web Development
  - 'Web Development:Tools'
translation_of: Tools
---
<div class="summary"><span class="seoSummary">Examine, edite e depure HTML, CSS e JavaScript no computador e no celular</span></div>

<div class="column-container zone-callout"><a href="https://www.mozilla.org/pt-BR/firefox/developer/" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; color: white; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.3) 0px -1px 0px 0px inset;">Instalar o Firefox Developer Edition</a>

<h3 id="Whats_new_in_Aurora.3F" name="What's_new_in_Aurora.3F">Quais as novidades no Firefox Developer Edition?</h3>

<p>O <a href="/pt-BR/Firefox/Developer_Edition">Firefox Developer Edition</a> é a versão do Firefox para desenvolvedores, com as mais recentes funcionalidades e ferramentas de desenvolvimento experimentais. Atualmente a Developer Edition inclui as seguintes atualizações para as ferramentas de desenvolvimento:</p>

<ul>
 <li><a href="/pt-BR/docs/Tools/Network_Monitor#Security">Painel de segurança no Network Monitor</a></li>
 <li><a href="/pt-BR/docs/Tools/Page_Inspector#Animations_view">Painel de animações no Page Inspector</a></li>
 <li><a href="/pt-BR/docs/Tools/WebIDE#Running_a_custom_build_step">Suporte para execução de builds customizados na WebIDE</a></li>
</ul>
</div>

<div class="column-container zone-callout"><a href="http://mzl.la/devtools" style="float: right; margin-bottom: 20px; padding: 10px; text-align: center; border-radius: 4px; display: inline-block; background-color: rgb(129, 188, 46); white-space: nowrap; color: white; text-shadow: rgba(0, 0, 0, 0.25) 0px 1px 0px; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 0px 0px, rgba(0, 0, 0, 0.3) 0px -1px 0px 0px inset;">Compartilhe suas ideias</a>

<h3 id="Share_your_ideas" name="Share_your_ideas">Compartilhe suas ideias</h3>

<p>Peça novas funcionalidades nas ferramentas de desenvolvimento ou vote em ideias de outros desenvolvedores.</p>
</div>

<p><img alt="" dir="ltr" src="https://mdn.mozillademos.org/files/7307/inspector.png" style="display: block; height: 467px; margin-left: auto; margin-right: auto; width: 815px;"></p>

<div class="column-container">
<div class="column-half">
<h2 id="Creating" name="Creating">Criando</h2>

<p>Ferramentas de criação de sites e aplicativos web.</p>

<dl>
 <dt><a href="/pt-BR/docs/Tools/Scratchpad">Scratchpad</a></dt>
 <dd>Um editor de texto embutido no Firefox que permite editar e executar código JavaScript.</dd>
 <dt><a href="/pt-BR/docs/Tools/Editor_de_Estilos">Style Editor</a></dt>
 <dd>Visualize e edite estilos CSS na página atual.</dd>
 <dt><a href="/pt-BR/docs/Tools/Shader_Editor">Shader Editor</a></dt>
 <dd>Visualize e edite vértices e fragmentos de shaders usados pelo <a href="/en-US/docs/Web/WebGL">WebGL</a>.</dd>
 <dt><a href="/pt-BR/docs/Tools/Web_Audio_Editor">Web Audio Editor</a></dt>
 <dd>Examine o gráfico de nós de audio num contexto de audio, e modifique seus parâmetros.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Exploring" name="Exploring">Explorando e depurando</h2>

<p>Examine, explore e depure sites e aplicativos web.</p>

<dl>
 <dt><a href="/pt-BR/docs/Tools/Web_Console">Web Console</a></dt>
 <dd>Visualize os logs de execução da página e interaja com ela usando JavaScript.</dd>
 <dt><a href="/pt-BR/docs/Tools/Page_Inspector">Page Inspector</a></dt>
 <dd>Visualize e modifique a página HTML e CSS.</dd>
 <dt><a href="/pt-BR/docs/Tools/Depurador">JavaScript Debugger</a></dt>
 <dd>Pare, analise e modifique o JavaScript em execução na página.</dd>
 <dt><a href="/pt-BR/docs/Tools/Network_Monitor">Network Monitor</a></dt>
 <dd>Acompanhe as requisições de feitas à rede enquanto a página é carregada.</dd>
 <dt><a href="/pt-BR/docs/Tools/Storage_Inspector">Storage Inspector</a></dt>
 <dd>Inspecione cookies, armazenamento local, indexedDB e armazenamento da sessão presentes na página.</dd>
 <dt><a href="/pt-BR/docs/Tools/GCLI">Developer Toolbar</a></dt>
 <dd>Uma interface de linha de comando para as ferramentas de desenvolvimento.</dd>
 <dt><a href="/pt-BR/docs/Tools/3D_View">3D View</a></dt>
 <dd>Visualização da página em 3D.</dd>
 <dt><a href="/pt-BR/docs/Tools/Eyedropper">Eyedropper</a></dt>
 <dd>Obtenha o código da cor de um determinado pixel da página.</dd>
 <dt><a href="/pt-BR/docs/Tools/Working_with_iframes">Trabalhando com iframes</a></dt>
 <dd>Como trabalhar com iframe.</dd>
</dl>
</div>
</div>

<div class="column-container" dir="ltr">
<div class="column-half">
<h2 id="Mobile" name="Mobile">Móvel</h2>

<p>Ferramentas para desenvolvimento <em>mobile</em>.</p>

<dl>
 <dt><a href="/pt-BR/Firefox_OS/Using_the_App_Manager">Gerenciador de app</a></dt>
 <dd>Design e desenvolvimento de apps para FirefoxOS
 <hr></dd>
 <dt><a href="/pt-BR/docs/Tools/WebIDE">WebIDE</a></dt>
 <dd>O substituto do App Manager, disponível a partir da versão 33 do Firefox.</dd>
 <dt><a href="/pt-BR/docs/Tools/Simulador_Firefox_OS">Firefox OS Simulador</a></dt>
 <dd>Simule e faça debug de sua aplicação para o Firefox OS no desktop, sem a necessidade de um aparelho com Firefox OS instalado.</dd>
 <dt><a href="/pt-BR/docs/Tools/Modo_Design_Adaptavel">Responsive Design View</a></dt>
 <dd>Veja como o seu site ou app responde a diferentes resoluções de tela, sem precisar ficar redimensionando a janela do browser.</dd>
 <dt><a href="/pt-BR/docs/Tools/Remote_Debugging/Firefox_for_Android">Debugging no Firefox for Android</a></dt>
 <dd>Developer tools para o Firefox for Android.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Performance" name="Performance">Performance</h2>

<p>Diagnosticando e corrigindo problemas.</p>

<dl>
 <dt><a href="/pt-BR/docs/Tools/Performance">Performance tool</a></dt>
 <dd>Renovada o perfil JS e o cronograma de taxa de quadros</dd>
</dl>

<dl>
 <dt><a href="/pt-BR/docs/Tools/Profiler">JavaScript Profiler</a></dt>
 <dd>Descubra onde seu código JavaScript está gastando seu tempo.</dd>
 <dt><a href="/pt-BR/docs/Tools/Paint_Flashing_Tool">Paint Flashing Tool</a></dt>
 <dd>Destaque as partes da página que são redesenhados em resposta a eventos.</dd>
 <dt><a href="/pt-BR/docs/Tools/Web_Console#Reflow_events">Reflow Event Logging</a></dt>
 <dd>Veja eventos de reflow no web console.</dd>
 <dt><a href="/pt-BR/docs/Tools/Network_Monitor#Performance_analysis">Network Performance</a></dt>
 <dd>Veja quanto tempo as partes do seu site levam pra carregar.</dd>
</dl>
</div>
</div>

<hr>
<div class="column-container" dir="ltr">
<div class="column-half">
<h2 id="Debugging_the_browser" name="Debugging_the_browser">Depurando no navegador</h2>

<p>Por padrão, a ferramenta de desenvolvimento é ligada a uma página web ou web <em>app</em>. Mas você pode também conecta-los ao navegador como um todo. Isso é útil para o desenvolvimento para navegador e para add-ons.</p>

<dl>
 <dt><a href="/pt-BR/docs/Tools/Browser_Console">Browser Console</a></dt>
 <dd>Veja as mensagens de log do browser e de add-ons, e execute JavaScript no escopo do browser.</dd>
 <dt><a href="/pt-BR/docs/Tools/Browser_Toolbox">Browser Toolbox</a></dt>
 <dd>Anexe o Developer Tools para o próprio navegador.</dd>
</dl>
</div>

<div class="column-half">
<h2 id="Extending_the_devtools" name="Extending_the_devtools">Estendendo o devtools</h2>

<p>As ferramentas de desenvolvimentos são desenhadas para serem extensíveis. Add-ons do Firefox podem acessar as ferramentas de desenvolvimento e os componentes que eles usam para estender ferramentas existentes e adicionar novas. Com o protocolo remoto de debugging você pode implementar seu próprio cliente de debugging e servidores, permitindo a você o debug de websites usando suas próprias ferramentas ou debuggando diferentes alvos usando as ferramentas do Firefox.</p>

<dl>
 <dt><a href="https://wiki.mozilla.org/Remote_Debugging_Protocol">Remote Debugging Protocol</a></dt>
 <dd>O protocolo usado para conectar o Firefox Developer Tools a um destino de debuggin como uma instância do Firefox ou um aparelho com Firefox OS.</dd>
 <dt><a href="/pt-BR/docs/Tools/Editor">Editor de código</a></dt>
 <dd>Um editor de código embutido dentro do Firefox que pode ser incorporado no seu add-on.</dd>
 <dt><a href="/pt-BR/docs/Tools/Debugger-API">A interface do <code>Debugger</code></a></dt>
 <dd>Uma API que permite que o código JavaScript observe a execução de outro código JavaScript. O Firefox Developer Tools usa essa API para implementar o debugger JavaScript.</dd>
 <dt><a href="/pt-BR/docs/Tools/Web_Console/Custom_output">Output do Web Console personalizado</a></dt>
 <dd>Como estender e customizar o output do <a href="/en-US/docs/Tools/Web_Console">Web Console</a>  e o <a href="/en-US/docs/Tools/Browser_Console">Browser Console</a>.</dd>
</dl>
</div>
</div>

<hr>
<h2 dir="ltr" id="More_resources" name="More_resources">Mais recursos</h2>

<p dir="ltr">Essa seção lista recursos que não são mantidos pela equipe do developer tools da Mozilla, mas que são largamente usados por desenvolvedores web. Nós temos incluído alguns add-ons do Firefox nessa lista, mas para uma lista completa veja a <a href="https://addons.mozilla.org/en-US/firefox/extensions/web-development/">categoria “Web Development” em addons.mozilla.org</a>.</p>

<div class="column-container" dir="ltr">
<div class="column-half">
<dl>
 <dt><a href="https://www.getfirebug.com/">Firebug</a></dt>
 <dd>Uma ferramenta de desenvolvimento muito popular e poderosa, que inclue um debugger JavaScript, visualizador e editor de HTML e CSS, e um monitor de rede.</dd>
 <dt><a href="/pt-BR/docs/DOM_Inspector">DOM Inspector</a></dt>
 <dd>Inspeciona, navega e edita o DOM de páginas web ou janelas XUL.</dd>
 <dt><a href="https://addons.mozilla.org/en-US/firefox/addon/web-developer/">Web Developer</a></dt>
 <dd>Adiciona um menu e uma barra de ferramentas ao browser com várias ferramentas de desenvolvimento web.</dd>
</dl>
</div>

<div class="column-half">
<dl>
 <dt><a href="https://webmaker.org/en-US/tools/">Webmaker Tools</a></dt>
 <dd>Um conjunto de ferramentas desenvolvidas pela Mozilla, destinada a pessoas que estão começando no desenvolvimento Web.</dd>
 <dt><a href="http://www.w3.org/Status.html">W3C Validators</a></dt>
 <dd>O site W3C hospeda um número de ferramentas para checar a validação do seu website, incluindo <a href="http://validator.w3.org/" title="http://validator.w3.org/">HTML</a> e <a href="http://jigsaw.w3.org/css-validator/">CSS</a>.</dd>
 <dt><a href="http://www.jshint.com/">JSHint</a></dt>
 <dd>Ferramenta de análise de código JavaScript.</dd>
</dl>
</div>
</div>