Ferramentas do Firefox para desenvolvedores

Examine, edite e depure HTML, CSS e JavaScript no computador e no celular
Instalar o Firefox Developer Edition

Quais as novidades no Firefox Developer Edition?

O Firefox Developer Edition √© 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:

Compartilhe suas ideias

Compartilhe suas ideias

Peça novas funcionalidades nas ferramentas de desenvolvimento ou vote em ideias de outros desenvolvedores.

Criando

Ferramentas de criação de sites e aplicativos web.

Scratchpad
Um editor de texto embutido no Firefox que permite editar e executar código JavaScript.
Style Editor
Visualize e edite estilos CSS na p√°gina atual.
Shader Editor
Visualize e edite v√©rtices e fragmentos de shaders usados pelo WebGL.
Web Audio Editor
Examine o gr√°fico de n√≥s de audio num contexto de audio, e modifique seus par√Ęmetros.

Explorando e depurando

Examine, explore e depure sites e aplicativos web.

Web Console
Visualize os logs de execução da página e interaja com ela usando JavaScript.
Page Inspector
Visualize e modifique a p√°gina HTML e CSS.
JavaScript Debugger
Pare, analise e modifique o JavaScript em execução na página.
Network Monitor
Acompanhe as requisi√ß√Ķes de feitas √† rede enquanto a p√°gina √© carregada.
Storage Inspector
Inspecione cookies, armazenamento local, indexedDB e armazenamento da sess√£o presentes na p√°gina.
Developer Toolbar
Uma interface de linha de comando para as ferramentas de desenvolvimento.
3D View
Visualização da página em 3D.
Eyedropper
Obtenha o código da cor de um determinado pixel da página.
Trabalhando com iframes
Como trabalhar com iframe.

Móvel

Ferramentas para desenvolvimento mobile.

Gerenciador de app
Design e desenvolvimento de apps para FirefoxOS
WebIDE
O substituto do App Manager, disponível a partir da versão 33 do Firefox.
Firefox OS Simulador
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.
Responsive Design View
Veja como o seu site ou app responde a diferentes resolu√ß√Ķes de tela, sem precisar ficar redimensionando a janela do browser.
Debugging no Firefox for Android
Developer tools para o Firefox for Android.

Performance

Diagnosticando e corrigindo problemas.

Performance tool
Renovada o perfil JS e o cronograma de taxa de quadros
JavaScript Profiler
Descubra onde seu código JavaScript está gastando seu tempo.
Paint Flashing Tool
Destaque as partes da p√°gina que s√£o redesenhados em resposta a eventos.
Reflow Event Logging
Veja eventos de reflow no web console.
Network Performance
Veja quanto tempo as partes do seu site levam pra carregar.

Depurando no navegador

Por padr√£o, a ferramenta de desenvolvimento √© ligada a uma p√°gina web ou web app. Mas voc√™ pode tamb√©m conecta-los ao navegador como um todo. Isso √© √ļtil para o desenvolvimento para navegador e para add-ons.

Browser Console
Veja as mensagens de log do browser e de add-ons, e execute JavaScript no escopo do browser.
Browser Toolbox
Anexe o Developer Tools para o próprio navegador.

Estendendo o devtools

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.

Remote Debugging Protocol
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.
Editor de código
Um editor de código embutido dentro do Firefox que pode ser incorporado no seu add-on.
A interface do Debugger
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.
Output do Web Console personalizado
Como estender e customizar o output do Web Console  e o Browser Console.

Mais recursos

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 categoria ‚ÄúWeb Development‚ÄĚ em addons.mozilla.org.

Firebug
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.
DOM Inspector
Inspeciona, navega e edita o DOM de p√°ginas web ou janelas XUL.
Web Developer
Adiciona um menu e uma barra de ferramentas ao browser com v√°rias ferramentas de desenvolvimento web.
Webmaker Tools
Um conjunto de ferramentas desenvolvidas pela Mozilla, destinada a pessoas que estão começando no desenvolvimento Web.
W3C Validators
O site W3C hospeda um n√ļmero de ferramentas para checar a valida√ß√£o do seu website, incluindo HTML e CSS.
JSHint
Ferramenta de an√°lise de c√≥digo JavaScript.