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
O DevTools pode responder tudo isso. E você não escreverá uma única linha de código.
Este artigo ensina a forma mais simples de ler as informações-chave no DevTools e localizar rapidamente onde está o problema 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 + I
Safari
Primeiro ative o menu Desenvolvimento: Safari → Preferências → Avançado → marque "Mostrar menu Desenvolvimento na barra de menus"
Cmd + Option + I
Uma vez aberto, um painel aparece na parte inferior ou direita do navegador. Não se intimide pelas abas densamente povoadas — você só precisa se preocupar com três delas.
Você 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 |
Vamos percorrê-las uma a uma.
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
`
Não se assuste com o inglês — quebre em partes:
| 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 |
Você não precisa entender o que o erro significa. Você só precisa fazer uma coisa: faça uma captura desta mensagem vermelha ou copie-a e envie-a ao desenvolvedor. Esta única linha pode economizar 30 minutos de busca.
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
)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
(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 width
eheight— as dimensões estão restritas?
Verificar por que o texto está truncado:
- Encontre o elemento de texto
- Verifique a propriedade CSS overflow
— está definida comohidden? - Verifique white-space
etext-overflow— limitam a quebra de linha?
Verificar por que um botão não é clicável:
- Encontre o elemento botão
- Verifique o CSS z-index
— está coberto por outro elemento? - Verifique pointer-events
— o clique está desabilitado? - Verifique display
evisibility— 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:
vermelhoReportar ao desenvolvedor: "Página em branco, Console mostra TypeError: Cannot read properties of undefined at app.js:23:5"
Caso 2: Imagem como ícone quebrado
Sintoma: Uma imagem na página aparece como ícone quebrado ou área vazia
Diagnóstico:
Reportar ao desenvolvedor: "Imagem do banner da home 404, URL é /images/hero-v2.png"
Caso 3: Envio de formulário não faz nada
Sintoma: Preenche o formulário, clica em enviar, sem resposta
Diagnóstico:
vermelhoReportar ao desenvolvedor: "Clique no botão de enviar não faz nada, Console mostra ReferenceError: submitForm is not defined at checkout.js:15:3"
Caso 4: Página carrega muito lento
Sintoma: Abrir a página leva 10+ segundos
Diagnóstico:
Reportar ao desenvolvedor: "Página carrega lento, product-hero.jpg (3MB) levou 8s para carregar, recomenda-se comprimir"
Caso 5: Layout móvel quebrado
Sintoma: No celular, botões e texto se sobrepõem
Diagnóstico:
para mudar ao modo de emulação de dispositivoReportar ao desenvolvedor: "Mobile (largura 375px) botões se sobrepõem, falta @media (max-width: 768px) adaptação de layout"
Existe 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
Você não precisa abrir DevTools, saber onde está a Console, ou copiar mensagens de erro manualmente. Basta:
Todas as informações de diagnóstico são anexadas ao e-mail automaticamente. De detectar o problema a enviar o relatório: 30 segundos.
Resumo
A Console e o Network do DevTools são as ferramentas mais diretas para diagnosticar problemas de site. Você não precisa programar — basta:
Se você não quer operar o DevTools manualmente toda vez, o BugCapturer pode coletar automaticamente os erros de console e as requisições de rede falhadas, permitindo que você envie feedback com diagnóstico completo da forma mais simples possível.
Pronto para reportar problemas de site mais eficientemente?
Adicionar BugCapturer ao Chrome — Grátis
Coleta automaticamente erros de console e requisições de rede falhadas — envie um relatório de diagnóstico profissional em 30 segundos.