mozilla

Tradução em progresso.

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 logos de execução da página e interaja com ela usando JavaScript.
Page Inspector
Visualizando e modificando a página HTML e CSS.
JavaScript Debugger
Para, analisa e modifica 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, local storage, indexedDB e session storage 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
A substituta do App Manager, disponível a partir da versão 33 do Firefox.
Firefox OS Simulator
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
Revamped JS profiler and frame rate timeline.
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.

Extendendo 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 extender 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 extender e customizar o output do Web Console  e o Browser Console.

Mais recursos

Essa seção lista rcursos 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.

Junte-se à comunidade Developer tools

Escolha a sua forma preferida de juntar-se à discussão: