Inspetor web

Um layout que só quebra no celular, um botão que não responde, uma página H5 que fica em branco — no computador basta apertar F12 para entender o motivo. No celular, geralmente sobra adicionar alert, recompilar e olhar de novo. O inspetor web conecta essas mesmas ferramentas de desenvolvedor à página real no aparelho: conecte o cabo e Elements, Console, Sources, Network e Storage abrem no computador, com o aparelho renderizando de novo assim que você muda um valor.

---

1. Como isso se divide com a captura de pacotes

Você precisa dos dois, mas eles respondem perguntas diferentes:

	Captura de pacotes	Inspetor web
Responde	O que passou pela rede	O que a página fez
Mostra	Requisições / respostas, cabeçalhos, corpo (decifrado)	Árvore DOM, estilos aplicados, erros de console, pilhas de chamada, cookies e armazenamento
Pergunta típica	O que esse endpoint retornou, os parâmetros estão certos	Qual linha de JavaScript enviou essa requisição, por que esse estilo não pegou

A captura mostra a requisição, mas nunca quem a disparou; o inspetor coloca um breakpoint em Sources e leva até essa linha. Os dois vivem na mesma ferramenta, então alternar entre eles não custa nada.

---

2. Preparo de uma vez só

Os três blocos abaixo são alternativas: faça o que corresponde ao seu alvo, e só uma vez.

Aparelho iOS

Conecte o cabo, mantenha o aparelho desbloqueado, e ative o interruptor do inspetor web:

• Safari: Ajustes → Safari → Avançado → Inspetor web
• Chrome: Ajustes do Chrome → Configurações de conteúdo → Inspetor web

Esse é o passo mais esquecido no iOS. Sem ele, o aparelho é detectado, mas a lista de páginas fica vazia.

Aparelho Android

Conecte o cabo e ative a depuração USB nas opções do desenvolvedor. Emuladores Android costumam ser detectados sem cabo.

Navegador deste computador

Inicie o Chrome ou o Edge com --remote-debugging-port=9222 e clique em Atualizar na lista de páginas.

# macOS
"/Applications/Google Chrome.app/Contents/MacOS/Google Chrome" --remote-debugging-port=9222

# Windows
"C:\Program Files\Google\Chrome\Application\chrome.exe" --remote-debugging-port=9222

---

3. Também uma página dentro de um app? Mais uma coisa

Se você só precisa de abas do navegador, pode pular esta seção.

Seu próprio app: ative uma vez no código.

// Android: chamar uma vez quando a Application ou Activity iniciar
WebView.setWebContentsDebuggingEnabled(true);

// A partir do iOS 16.4: tornar a WKWebView inspecionável
webView.isInspectable = true

App de terceiros, ou sem mexer no código: marque “Incluir também as páginas dentro de apps” na caixa de diálogo, e as páginas dos apps abertos entram na lista. Desmarque e volta a mostrar só abas do navegador.

	Exigência	Observação
Android	Um aparelho com root	Ativa a depuração de WebView em apps em execução, sem recompilar nada
iOS	Só apps assinados para desenvolvimento	Limite do sistema — apps instalados pela App Store não podem ser incluídos

De qualquer forma, o app nunca é recompilado, assinado, nem nada é instalado no aparelho. Ao fim da sessão, o aparelho volta a como estava.

---

4. Começar a depurar

Feito isso, cada sessão se resume a isto:

Nova captura → alvo (Este computador / iOS / Android) → método “Inspetor web” → Atualizar → escolha a página → Inspect

• As páginas vêm agrupadas pelo app dono, então uma página dentro de um app se distingue de uma aba do navegador à primeira vista.
• Clicar em Inspect abre ferramentas de desenvolvedor completas no navegador do computador, conectadas àquela página naquele aparelho.
• Abra quantas quiser ao mesmo tempo — uma janela por página, todas ativas em paralelo.

Qual navegador abre a janela de depuração

Sessões no Android e no navegador local precisam de Chrome, Edge ou Brave (o Trace Eagle abre um automaticamente); sessões no iOS funcionam em qualquer navegador.

---

5. O que você vê

Os mesmos painéis que você usa todo dia no computador, apontados para a página do celular.

Painel	O que faz
Elements	A árvore DOM ao vivo da página, com estilos aplicados, herança e o box model. Mude um valor e o aparelho renderiza na hora — o jeito mais rápido de achar um bug de layout mobile
Console	Todos os erros e logs que a página produziu, mais um prompt que roda JavaScript direto naquela página naquele aparelho
Sources	Navegar pelos scripts e folhas de estilo que a página carregou, colocar breakpoints, seguir a pilha de chamadas e inspecionar variáveis no exato momento do problema
Network	Cada requisição da página em cascata: status, tipo, iniciador, tamanho, tempos e estado de cache, com totais de requisições, bytes transferidos, DOMContentLoaded e tempo de carregamento completo
Storage	Cookies agrupados por domínio com validade, Secure, HttpOnly e SameSite, ao lado de localStorage e sessionStorage — o jeito mais rápido de desvendar um bug de estado de login

No Android, a tela do aparelho ao vivo é espelhada ao lado dos painéis e dá para clicar e rolar com o mouse — inspecionar e operar acontece numa única tela, sem alternar entre celular e teclado.

---

6. O que é suportado

	Este computador	iOS	Android
Abas do navegador	✓	✓	✓
Páginas dentro de apps (WebView / WKWebView / H5)	✓	✓	✓
Emulador / simulador	—	✓	✓
Inspecionar e editar elementos e estilos ao vivo	✓	✓	✓
Console, breakpoints e execução passo a passo	✓	✓	✓
Cascata de rede da página	✓	✓	✓
Cookies / localStorage / sessionStorage	✓	✓	✓
Tela do aparelho ao lado dos painéis	—	—	✓
Sem certificado nem proxy para configurar	✓	✓	✓

---

7. Nada aparece? Confira isto primeiro

Sintoma	Geralmente é	O que fazer
Aparelho detectado, lista de páginas vazia	Inspetor web do iOS desligado, ou tela bloqueada	Siga a seção 2, ative, mantenha desbloqueado e clique em Atualizar
Android não mostra páginas dentro de apps	Essa WebView nunca teve a depuração ativada	Seu app: adicione setWebContentsDebuggingEnabled(true); app de terceiros: marque “Incluir também as páginas dentro de apps” (precisa de root)
Um app específico do iOS nunca aparece	Um limite do sistema	Builds da App Store não podem ser incluídos — só apps assinados para desenvolvimento
O navegador local não lista páginas	Foi iniciado sem a porta de depuração	Reinicie o Chrome / Edge com --remote-debugging-port=9222 e clique em Atualizar
Inspect não faz nada	Um navegador não suportado	Sessões no Android e locais precisam de Chrome, Edge ou Brave

---

8. Quando usar

• Um bug que só aparece no celular: layout, áreas de toque, renderização de fonte.
• Uma página H5 fica em branco ou quebrada e você precisa ver erros de console e a pilha de chamadas.
• Você quer saber qual script enviou uma requisição — a captura sozinha não conta.
• Você está atrás de um problema de login ou cache e precisa ver o que realmente está em cookies e armazenamento.
• Você está depurando H5 embutido em um app — ferramentas comuns não dão acesso a isso.

---

Voltar para Primeiros passos · Relacionado: Inspecionar e decodificar · Captura em iOS · Captura em Android