Como usar as Ferramentas de Desenvolvedor do Firefox

Links rápidos

• Page Inspector

• HTML Inspector

• CSS Inspector

• JavaScript Scratchpad

• Web Console

• Get More Tools

Firefox agrupa utilitários para inspecionar elementos, executar código JavaScript arbitrário e visualizar requisições HTTP e mensagens do browser. Com o Firefox 10 o Inspector e o Scratchpad foram atualizados — hoje as ferramentas integradas, combinadas com add-ons (por exemplo Firebug), compõem um ambiente robusto para desenvolvedores web. Todas as ferramentas aparecem no menu Web Developer do Firefox.

Page Inspector

Inspecione um elemento específico clicando com o botão direito sobre ele e selecionando Inspecionar (ou pressionando Q). Você também pode abrir o Inspector pelo menu Web Developer.

Ao abrir, um painel geralmente aparece na parte inferior da tela com controles para o inspector. O elemento selecionado ficará destacado enquanto o restante da página é atenuado — ideal para encontrar rapidamente o nó DOM de interesse.

Se quiser escolher outro elemento sem usar o menu, clique no botão Inspecionar na barra do Inspector, passe o cursor sobre a página e clique no elemento alvo. O Firefox destaca o elemento sob o cursor.

Navegue pela hierarquia DOM usando os breadcrumbs na barra do Inspector para subir/baixar entre pais e filhos.

Dicas práticas

• Use o atalho Q para abrir e fechar rapidamente.
• Clique duas vezes no nome de uma tag no painel para renomear (útil em testes locais).
• Ao reproduzir bugs de layout, use o modo responsivo (Responsive Design Mode) em conjunto com o Inspector para testar pontos de quebra.

HTML Inspector

Clique no botão HTML para ver o HTML do elemento atualmente selecionado.

O HTML inspector permite expandir e recolher tags, facilitando a visualização da estrutura. Se preferir ver o HTML da página como arquivo plano, escolha Ver código-fonte da página no menu Web Developer.

Quando usar

• Confirmar atributos e valores dinâmicos adicionados por scripts.
• Verificar se elementos foram removidos/duplicados por manipulação do DOM.
• Encontrar IDs/classes para seletores CSS ou testes automatizados.

CSS Inspector

Clique em Style para ver as regras CSS aplicadas ao elemento selecionado.

Existe também um painel de propriedades – alterne entre Regras (Rules) e Propriedades (Properties). Para localizar propriedades específicas, use a caixa de busca do painel de propriedades.

Você pode editar o CSS em tempo real: desmarque caixas para desativar regras, clique no texto para editar uma regra ou adicione suas próprias regras no topo do painel. Por exemplo, adicionar font-weight: bold; torna o texto do elemento em negrito imediatamente.

Mini-metodologia para depurar problemas de CSS

1. Selecione o elemento com o Inspector.
2. Abra o painel Rules e verifique quais regras estão marcando como riscadas (overridden).
3. Use o painel Computed para ver o valor final aplicado a uma propriedade.
4. Desative regras suspeitas ou modifique propriedades para testar correções rápidas.
5. Quando encontrar a mudança correta, replique no arquivo fonte e verifique cross-browser.

JavaScript Scratchpad

O Scratchpad recebeu realce de sintaxe no Firefox 10. Permite escrever e executar JavaScript no contexto da aba atual.

Depois de escrever o código, no menu Execute selecione Run. O código será executado na aba atual, permitindo testar funções, manipular DOM ou inspecionar variáveis.

Snippets úteis para o Scratchpad

// Exibe o HTML do elemento selecionado no console
console.log($0.outerHTML);

// Remove todos os elementos com a classe 'debug'
document.querySelectorAll('.debug').forEach(el => el.remove());

// Força redraw para testes de layout
document.body.style.display = 'none';
setTimeout(() => document.body.style.display = '', 50);

Web Console

O Web Console substitui o antigo Error Console e mostra quatro tipos principais de mensagens: requisições de rede, erros CSS, erros JavaScript e mensagens de desenvolvedor (console).

O que é uma mensagem de desenvolvedor? É qualquer coisa impressa via window.console, por exemplo:

window.console.log("Hello World");

Essas mensagens ajudam na depuração quando integradas ao código.

Refresque a página para ver as requisições geradas e mensagens ao carregar recursos.

Use a caixa de busca para filtrar mensagens; clique numa requisição para ver cabeçalhos, payload, tempo e resposta.

Desde o Firefox 10, o Web Console pode trabalhar junto ao Page Inspector. A variável $0 refere-se ao objeto atualmente selecionado no inspector. Exemplo: para ocultar o elemento selecionado, rode:

$0.style.display = "none";

Cheatsheet rápido do Console

• $0 — elemento selecionado no Inspector
• $$(‘selector’) — retorna NodeList (querySelectorAll)
• $x(‘//xpath’) — executa XPath
• monitorEvents(element) — log de eventos do elemento
• clear() — limpa o console

Get More Tools

A opção Get More Tools abre a coleção Web Developer’s Toolbox no site Mozilla Add-Ons. Lá estão add-ons como Firebug e Web Developer Toolbar que estendem e complementam as ferramentas nativas.

Alternativas e quando usá-las

• Firebug: histórico e recursos avançados (alguns fluxos antigos ainda dependem dele).
• Extensões de performance (ex.: ferramentas de profiling) quando precisar de métricas detalhadas de CPU/heap.
• Ferramentas externas (Lighthouse, WebPageTest) para análise de performance e UX automatizada.

Fluxo de trabalho recomendado (Playbook)

1. Reproduza o problema localmente.
2. Abra Page Inspector e identifique o elemento/estrutura afetada.
3. Use HTML Inspector para confirmar estrutura e atributos.
4. Inspecione CSS (Rules/Computed) e teste alterações ao vivo.
5. Verifique console e rede para erros JS/recursos faltando.
6. Teste correção rápida no Scratchpad ou Editor local.
7. Repita em múltiplos tamanhos de viewport e navegadores.
8. Commit das mudanças e veja se os testes automatizados passam.

Checklists por função

Desenvolvedor frontend

• Reproduzir bug com console aberto
• Confirmar elemento e regras CSS que o afetam
• Testar correções no Rules panel
• Rodar lint e testes unitários

Designer/UI

• Verificar comportamento responsivo com Responsive Design Mode
• Testar fontes, espaçamentos e alinhamento no Inspector
• Confirmar consistência visual entre estados (hover/focus)

QA

• Registrar passos com screenshots via Inspector
• Validar mensagens no console e erros de rede
• Testar em configurações de rede lenta (throttling)

Metamodelos e heurísticas

• Muda no DOM -> procurar scripts que manipulam o nó (event listeners, frameworks).
• Problema visual mas nenhuma regra parece errada -> ver Computed e valores herdados; testar com estilos inline temporários.
• Erros intermitentes -> observar logs de rede e ações assíncronas (XHRequests, fetch, websockets).

SOP breve para incidente de performance (passos de contenção)

1. Abrir Web Console e identificar requisições longas (>500ms) e recursos grandes.
2. Desabilitar extensões que possam afetar o teste.
3. Reproduzir o cenário com rede simulada (Slow 3G) e registrar waterfall.
4. Identificar imagens/JS/CSS que podem ser adiados (defer/async, lazy-load).
5. Aplicar correções temporárias (ex.: compressão, cache headers) e validar ganhos.
6. Planejar correção permanente no repositório.

Glossário rápido (1 linha cada)

• Inspector: ferramenta para navegar e editar o DOM.
• Scratchpad: editor temporário para executar JavaScript na aba atual.
• Web Console: painel que mostra logs, erros e tráfego de rede.
• Rules panel: área para ver e editar regras CSS aplicadas.

Perguntas frequentes

Como abrir as Ferramentas de Desenvolvedor rapidamente?

Pressione F12 ou use o menu Web Developer; o atalho Q abre/fecha o Inspector especificamente.

O Scratchpad altera meus arquivos locais?

Não. O Scratchpad executa código no contexto da aba aberta — alterações são temporárias no DOM até que você atualize a página.

Posso depurar aplicativos single-page (SPA)?

Sim. Use o Inspector e o Console; observe mensagens do framework, pontos de quebra no código e monitore alterações do DOM.

Quando isso pode falhar

• Algumas regras são aplicadas por scripts que reescrevem estilos após a inspeção — a mudança temporária pode ser revertida ao reexecutar o script.
• Extensões de terceiros podem alterar o comportamento do site durante a depuração.
• Em ambientes altamente dinamizados (websockets intensos), o estado pode ser volátil e difícil de reproduzir em ambiente local.

Importante: nunca edite produção direto via Console como correção permanente. Use o Console para diagnóstico e teste; aplique mudanças no código-fonte com controle de versão.

Nota: mantenha o Firefox atualizado e revise a coleção de add-ons para evitar incompatibilidades.

Se você usou Firefox por alguns anos, talvez lembre do DOM Inspector. As ferramentas integradas evoluíram muito desde então — hoje oferecem fluxo mais rápido, edição em tempo real e integração entre painéis que aceleram diagnóstico e correção.

Resumo

• As Ferramentas de Desenvolvedor do Firefox cobrem inspeção DOM, edição CSS, execução de JS e análise de rede.
• Combine Inspector + Console + Scratchpad para depuração eficiente.
• Use add-ons quando precisar de recursos especializados, mas priorize correções no código fonte.

Pequeno anúncio (versão curtinha)

Aprenda a inspecionar, depurar e otimizar páginas com as Ferramentas de Desenvolvedor do Firefox. Este guia traz dicas práticas, checklists por função e trechos prontos para acelerar sua rotina de desenvolvimento.