Ferramentas de Desenvolvedor do Navegador: seu laboratório de código

Introdução às DevTools do navegador e sua importância para o desenvolvimento.

As Ferramentas de Desenvolvedor (DevTools) são como um laboratório dentro do navegador.
É onde você investiga problemas, testa ideias e entende o que seu código está fazendo em tempo real.

Se a sua página fosse um carro, as DevTools seriam o painel de diagnóstico + oficina.

Como abrir as DevTools

Você pode abrir de várias formas:

  • F12
  • Ctrl + Shift + I (Windows/Linux)
  • Cmd + Option + I (Mac)
  • Clique com botão direito na página → Inspecionar

Para que servem na prática?

Com as DevTools, você consegue:

  • ver e editar HTML/CSS temporariamente
  • acompanhar logs e erros no Console
  • depurar JavaScript com breakpoints
  • analisar requisições de rede (APIs, imagens, arquivos)
  • medir desempenho da página
  • inspecionar armazenamento (cookies, localStorage, sessionStorage)

Principais abas (visão geral)

1) Elements (ou Inspector)

Mostra o HTML da página e permite testar CSS ao vivo.

Use quando:

  • um elemento não aparece como esperado
  • o layout está “quebrado”
  • você quer testar um estilo rápido sem mexer no arquivo

2) Console

Mostra logs (console.log) e erros.
Também permite executar JavaScript direto ali.

Use quando:

  • quer inspecionar valores de variáveis
  • precisa ver mensagens de erro
  • quer testar um trecho rápido de código

3) Sources

É o “mapa” dos arquivos JS.
Aqui você coloca breakpoints e depura passo a passo.

Use quando:

  • quer pausar execução em linha específica
  • precisa entender o fluxo do código

4) Network

Mostra requisições HTTP (fetch, imagens, scripts etc.).

Use quando:

  • API não retorna dados
  • recurso não carrega
  • precisa validar status HTTP (200, 404, 500)

5) Application (ou Storage)

Mostra dados armazenados no navegador:

  • cookies
  • localStorage
  • sessionStorage

Use quando:

  • quer verificar se preferências foram salvas
  • precisa apagar dados locais para testar novamente

Fluxo simples de investigação (passo a passo)

  1. Abra DevTools.
  2. Veja o Console para identificar erro inicial.
  3. Vá em Sources e pause com breakpoint na área suspeita.
  4. Confira variáveis e chamadas.
  5. Se envolver API, cheque Network.
  6. Se envolver dados locais, cheque Application.

Exemplo prático rápido

Imagine que o botão não funciona.

Checklist:

  • Console mostra erro de null no addEventListener?
  • No Elements, o id do botão está correto?
  • No Sources, coloque breakpoint onde o evento é registrado.
  • Veja se o script está rodando antes do DOM estar pronto.

Boas práticas ao usar DevTools

  • Use console.log com contexto claro.
  • Não deixe logs desnecessários em produção.
  • Leia a linha e coluna do erro no Console.
  • Reproduza o problema com passos consistentes.
  • Teste correção e valide novamente no Console/Network.

Resumo da lição

  • DevTools são seu laboratório para investigar e corrigir código.
  • As abas mais usadas: Elements, Console, Sources, Network e Application.
  • Um bom debugging começa por observar erro, localizar causa e validar correção.
  • Quanto mais você pratica DevTools, mais rápido resolve problemas.