DevTools não é só para programadores
Você provavelmente já ouviu falar de "Developer Tools" (DevTools) e assumiu que é algo que só programadores usam. Mas a verdade é que muitas funcionalidades do DevTools funcionam sem nenhum conhecimento de programação. Imagine estes cenários:- Você abre um site e a página está em branco — você quer saber se o site caiu ou se é sua rede
- Você preenche um formulário, clica em enviar, e nada acontece — você quer saber se o botão está quebrado ou o servidor nunca recebeu
- Você vê um layout estranho em uma página — você quer saber se é um problema do navegador ou um bug no código do site
Passo 1: Como abrir o DevTools
Chrome / Edge
Três formas, escolha a mais confortável:F12 ou Ctrl + Shift + I (Mac: Cmd + Option + I)Firefox
F12 ou Ctrl + Shift + ISafari
Primeiro ative o menu Desenvolvimento: Safari → Preferências → Avançado → marque "Mostrar menu Desenvolvimento na barra de menus"Cmd + Option + IVocê só precisa conhecer 3 abas
O DevTools tem uma dúzia de abas, mas não-desenvolvedores só precisam destas três:| Aba | O que faz | Para que pode usá-la |
|---|---|---|
| Console | Mostra os erros e avisos do site | Saber se o código do site teve erro |
| Network | Mostra todas as requisições de rede | Saber se imagens/APIs/recursos falharam ao carregar |
| Elements | Mostra o HTML e CSS da página | Inspecionar o estilo e posição de um elemento |
A aba Console: ler mensagens de erro vermelhas
O que é a Console
A Console é a "caixa preta" do site. Quando o código do site erra, o navegador o registra aqui. Pense nela como a luz de aviso de um carro — você não precisa entender como o motor funciona, mas precisa saber qual luz está acesa.Vermelho = Erro, Amarelo = Aviso
- 🔴 Mensagem vermelha: Ocorreu um erro, preste atenção
- 🟡 Mensagem amarela: Um aviso, problema possível mas não fatal
- 🔵 Mensagem azul/branca: Registro comum, ignore com segurança
Como ler uma mensagem de erro
Depois de abrir a Console, você pode ver um texto vermelho assim:
Uncaught TypeError: Cannot read properties of undefined (reading 'map')
at ProductList.jsx:47:18
| Parte | Significado | No que focar |
|---|---|---|
TypeError |
Erro de tipo | Tipo de erro |
Cannot read properties of undefined |
Tentou ler dados inexistentes | Descrição do problema (só traduza) |
ProductList.jsx:47:18 |
Onde falhou: nome de arquivo linha 47, coluna 18 | Diga ao desenvolvedor onde corrigir |
Tipos de erro comuns (traduzidos)
| Erro em inglês | Significado em português | Causa possível |
|---|---|---|
TypeError |
Erro de tipo | Formato de dados incorreto; código esperava um objeto mas recebeu vazio |
ReferenceError |
Erro de referência | Código usou uma variável ou função inexistente |
SyntaxError |
Erro de sintaxe | Sintaxe de código errada que o navegador não consegue analisar |
RangeError |
Erro de intervalo | Um valor excedeu o intervalo permitido |
Network Error |
Erro de rede | A requisição nunca chegou ao servidor |
404 Not Found |
Não encontrado | O recurso solicitado não existe |
500 Internal Server Error |
Erro interno do servidor | Um bug no código do servidor |
Os 5 problemas de Console mais comuns
1. Página em branco + TypeError A página carrega em branco, Console mostra um TypeError vermelho. Geralmente um crash de JavaScript impediu a renderização. 2. Uma função não responde + ReferenceError Clica em um botão, nada acontece, Console mostra um ReferenceError vermelho. Geralmente o código relacionado não foi carregado corretamente. 3. Dados não exibidos + TypeError: Cannot read properties of undefined Uma área de lista ou tabela está vazia, Console tem este erro. Geralmente o backend retornou dados em um formato inesperado pelo frontend. 4. Parte da página em branco + erro 404 Algumas imagens ou componentes não são exibidos, Console tem um 404. O caminho do recurso está errado ou o arquivo foi deletado. 5. Carregamento muito lento + muitos avisos amarelos A página carrega lento, Console tem muitos avisos amarelos. Possivelmente muitos recursos desnecessários carregados, ou um problema de performance.A aba Network: detectar recursos falhados
O que é Network
A aba Network registra cada requisição de rede que a página faz ao carregar — imagens, CSS, JavaScript, pontos de API, arquivos de fonte, tudo obtido do servidor.Como usar
F5)Codificação de cor
| Cor | Significado |
|---|---|
| Vermelho | Requisição falhada (erro 4xx/5xx) |
| Cinza | Requisição bloqueada ou cancelada |
| Outras cores | Requisição bem-sucedida |
Foco: códigos de status
Cada requisição tem um código de status — a pista mais direta do problema:| Status | Significado | O que você vê |
|---|---|---|
| 200 | Sucesso | Tudo normal |
| 301/302 | Redirecionamento | Redirecionado a outro endereço |
| 400 | Requisição inválida | Formato de dados de formulário errado |
| 401 | Não autorizado | Precisa de login mas não está logado |
| 403 | Proibido | Sem permissão para este recurso |
| 404 | Não encontrado | Imagem/página/API não existe |
| 429 | Muitas requisições | Limitado, tente mais tarde |
| 500 | Erro interno do servidor | Um bug no código do servidor |
| 502 | Gateway inválido | Servidor sobrecarregado ou em manutenção |
| 503 | Serviço indisponível | Servidor não consegue processar requisições temporariamente |
Exercício: diagnosticar "imagem não carrega" com Network
Img (só imagens)- 404 → caminho de imagem errado ou imagem deletada
- 500 → o servidor errou ao processar a requisição de imagem
- Nenhuma requisição correspondente → a URL da imagem nunca foi solicitada (provavelmente problema de código frontend)
Exercício: diagnosticar "envio de formulário não faz nada" com Network
A aba Elements: inspecionar estilos de elemento
O que é Elements
A aba Elements mostra a estrutura HTML e os estilos CSS da página. Você pode usá-la para inspecionar atributos, estilos e posição de um elemento.Função mais útil: inspecionar elemento
O que não-desenvolvedores podem fazer com isso
Verificar por que uma imagem exibe errado:- Encontre a tag
<img>
- Verifique o atributo
src— a URL da imagem está correta?
- Verifique
widtheheight— as dimensões estão restritas?
- Encontre o elemento de texto
- Verifique a propriedade CSS
overflow— está definida comohidden?
- Verifique
white-spaceetext-overflow— limitam a quebra de linha?
- Encontre o elemento botão
- Verifique o CSS
z-index— está coberto por outro elemento?
- Verifique
pointer-events— o clique está desabilitado?
- Verifique
displayevisibility— está oculto?
Nota: edições em Elements são temporárias
Qualquer estilo que você muda na aba Elements volta após atualizar a página. Serve apenas para depuração e não muda realmente o site. Experimente livremente — você não pode quebrar nada.5 casos reais
Caso 1: Página em branco
Sintoma: Abre o site, a página está em branco Diagnóstico:TypeError vermelhoCaso 2: Imagem como ícone quebrado
Sintoma: Uma imagem na página aparece como ícone quebrado ou área vazia Diagnóstico:srcCaso 3: Envio de formulário não faz nada
Sintoma: Preenche o formulário, clica em enviar, sem resposta Diagnóstico:ReferenceError: submitForm is not defined vermelhoCaso 4: Página carrega muito lento
Sintoma: Abrir a página leva 10+ segundos Diagnóstico:Caso 5: Layout móvel quebrado
Sintoma: No celular, botões e texto se sobrepõem Diagnóstico:Ctrl + Shift + M para mudar ao modo de emulação de dispositivo@media — constate que falta a adaptação móvelExiste uma forma mais fácil?
Se abrir DevTools, procurar a Console, achar o Network e copiar mensagens de erro ainda parece demais — há uma forma mais simples. O BugCapturer pode fazer tudo isso automaticamente por você. Quando você faz uma captura e envia feedback com o BugCapturer, ele coleta automaticamente:- Erros de console: até 10 registros de nível erro (com nome de arquivo e número de linha)
- Requisições de rede falhadas: até 5 requisições com status ≥ 400 (com URL, método, código de status)
- Informações de ambiente técnico: URL, navegador, SO, resolução de tela, tamanho do viewport, DPR