Elements: inspecionar e editar ao vivo
A árvore DOM viva da página com estilos computados, herança e modelo de caixa. Mude um valor e o aparelho redesenha na hora — o caminho mais curto para um bug de layout no celular.
Depure as páginas web do celular a partir do computador
Como apertar F12 no seu próprio navegador, só que nas páginas abertas em um iPhone ou Android real: abas do navegador ou o WebView / H5 embutido em um app. Inspecionar elementos, erros de console, breakpoints, requisições de rede, cookies e armazenamento local.
- Requisições do WebView do app
- Requisições do navegador
- Tela do aparelho ao lado
- Sem recompilar o app
Depuração web no celular, sem o desvio de sempre
Tudo abaixo é o dia a dia de depurar uma página no celular. A coluna da esquerda é como isso costuma ser feito.
| O que você quer fazer | O jeito de sempre | Com o inspetor web |
|---|---|---|
| O layout só quebra no celular | Chutar a correção, recompilar, publicar e olhar de novo | Editar o elemento e o CSS ao vivo e ver o aparelho atualizar na hora |
| Tela em branco ou botão que não faz nada | Não há console no celular, então entram alerts e logs | Os erros e logs exatamente como a página os lançou |
| Descobrir qual linha de JavaScript disparou uma requisição | A captura mostra a requisição, nunca quem a chamou | Breakpoints e execução passo a passo em Sources, com as variáveis à vista |
| Ver o que realmente há nos cookies e no localStorage | Deduzir pelos cabeçalhos da requisição | Tabelas completas — nome, valor, domínio, validade, Secure, HttpOnly, SameSite — e editáveis |
| Depurar uma página H5 embutida num app | Enterrada no tráfego, sem jeito de se conectar a ela | Listada sob o app que a contém: escolha e depure como qualquer página |
| Só conseguir fazer a depuração remota funcionar | Ajustes diferentes por plataforma, entradas escondidas, passos chatos | Uma única caixa de diálogo: escolha o aparelho, escolha a página, clique em Depurar |
| Ler o tráfego e o estado da página juntos | Uma ferramenta de captura e um depurador, lado a lado e sem ligação | Os dois na mesma ferramenta: a requisição descriptografada e o código que a enviou |
Ferramentas de desenvolvimento de verdade, apontadas para o aparelho
Não é um visualizador simplificado: são os mesmos painéis do desktop, ligados à página que roda no celular.
Console: erros e REPL ao vivo
Todos os erros e logs que a página produziu, mais um prompt que executa o seu JavaScript dentro daquela página, naquele aparelho. Chega de depurar no alert().
Sources: breakpoints e passo a passo
Navegue pelos scripts e folhas de estilo carregados, ponha breakpoints, percorra a pilha de chamadas e inspecione as variáveis no exato momento em que algo dá errado.
Network: cada requisição, em cascata
Status, tipo, origem, tamanho, tempos e estado do cache por requisição, com os totais de requisições, bytes transferidos, DOMContentLoaded e tempo total de carregamento.
Storage: cookies, local e sessão
Cookies agrupados por domínio com validade, Secure, HttpOnly e SameSite, ao lado de localStorage e sessionStorage — o jeito mais rápido de destrinchar um problema de sessão.
A tela do aparelho na sua tela
No Android a página ao vivo é espelhada ao lado dos painéis e você clica e rola com o mouse: inspecionar e operar numa tela só, sem alternar entre celular e teclado.
Como fica na prática
Sessões reais contra um celular real — nada montado.
O que dá para depurar
Celulares, tablets, emuladores e simuladores, além de um navegador na sua própria máquina.
| 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 passo a passo | ✓ | ✓ | ✓ |
| Cascata de rede da página | ✓ | ✓ | ✓ |
| Cookies / localStorage / sessionStorage | ✓ | ✓ | ✓ |
| Tela do aparelho ao lado dos painéis | — | — | ✓ |
| Sem certificado e sem proxy para configurar | ✓ | ✓ | ✓ |
O preparo, que se faz 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 e mantenha o aparelho desbloqueado. No Safari ative Ajustes → Safari → Avançado → Inspetor web; no Chrome, Ajustes do Chrome → Configurações de conteúdo → Inspetor web.
Aparelho Android
Conecte o cabo e ative a depuração USB nas opções do desenvolvedor. Emuladores costumam aparecer 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.
Também uma página dentro de um app? Mais uma coisa
Pule se você só precisa de abas do navegador. Seu próprio app: no Android chame uma vez setWebContentsDebuggingEnabled(true); a partir do iOS 16.4, defina isInspectable = true na WKWebView. App de terceiros, ou sem mexer no código: marque “Incluir também as páginas dentro de apps” e as páginas dos apps abertos entram na lista — exige Android com root e, no iOS, funciona só com apps assinados para desenvolvimento.
Feito isso, cada sessão é só isto
Nova captura → alvo (Este computador / iOS / Android) → método “Inspetor web” → Atualizar → escolha a página → Inspect. Ferramentas de desenvolvedor completas abrem no navegador; abra quantas quiser ao mesmo tempo.
Também as páginas escondidas dentro dos apps
Quase todo app é metade nativo, metade web. É nessas páginas H5 embutidas que moram os bugs chatos — e é justamente ali que as ferramentas comuns não mostram nada.
Agrupadas pelo app que as contém
A lista de páginas é organizada por app, então você distingue de imediato uma tela de pagamento dentro do app de uma aba do navegador e se conecta exatamente à que quer.
Uma caixa de seleção
«Incluir também páginas dentro de apps» acrescenta à lista as páginas dos apps abertos no momento. Desmarque e voltam apenas as abas do navegador.
Sem deixar rastro
Você não recompila o app, não assina nada e não instala um auxiliar no aparelho. Terminada a sessão, o aparelho volta a ser o que era.
Combina com a captura de tráfego
Depure a página aqui e capture o tráfego do mesmo app na mesma ferramenta: HTTPS descriptografado, inclusive em apps com certificado fixado ou que ignoram o proxy do sistema.
Depuração web no celular: perguntas frequentes
Como inspecionar um elemento no celular?
Conecte o celular ao computador por USB, abra o Trace Eagle, escolha Nova captura → iOS ou Android → método «Inspetor web», selecione a página e clique em Depurar. No computador abre um painel Elements completo com o DOM e o CSS ao vivo da página do aparelho; mudar um valor ali altera a página no celular imediatamente.
Dá para depurar uma WebView do Android sem modificar o app?
Dá. As WebViews que já permitem depuração aparecem direto na lista. Para os apps que não expõem isso, marque «Incluir também páginas dentro de apps» e as páginas dos apps abertos entram na lista — isso exige um aparelho com root, e nada é recompilado, reempacotado ou instalado em definitivo.
Como depurar uma página web num iPhone ou iPad?
Conecte o aparelho, desbloqueie e ative Ajustes → Safari → Avançado → Inspetor web (ou Ajustes do Chrome → Configurações de conteúdo → Inspetor web). Depois escolha aparelho e página no Trace Eagle e clique em Depurar: o inspetor web completo abre no navegador do computador, com Elements, Console, Sources, Network, Storage, Layers e mais.
É a mesma coisa que chrome://inspect?
Cobre o mesmo trabalho e mais, numa caixa de diálogo só. A página de depuração remota do navegador só lida com alvos Chromium no Android; aqui iOS, Android e o navegador local ficam no mesmo seletor, as páginas são agrupadas por app, as H5 embutidas entram com uma caixa de seleção e tudo isso convive com uma ferramenta de captura que descriptografa o tráfego HTTPS do mesmo app.
Preciso de jailbreak ou root?
Não para a depuração comum: abas do navegador e apps que já permitem funcionam num aparelho de fábrica. Só a opção extra que acrescenta páginas de apps de terceiros exige um Android com root; no iOS é o sistema que limita quais apps podem ser incluídos.
Precisa de certificado, proxy ou SDK no app?
De nenhum dos três. A depuração web remota passa pela conexão USB: não há proxy para configurar, nem certificado raiz para instalar no aparelho, nem SDK ou biblioteca para incluir no app.
Qual a diferença para a captura de tráfego?
A captura responde o que passou pela rede: requisição, resposta, cabeçalhos e corpo, descriptografados. O inspetor web responde o que a página fez: o DOM, os estilos, os erros do console, qual script disparou a requisição e o que já havia nos cookies e no armazenamento. O Trace Eagle traz os dois, então você vai de um ao outro sem trocar de ferramenta.
Qual navegador abre a janela de depuração?
As sessões de Android e do navegador local abrem no Chrome, Edge ou Brave (o Trace Eagle inicia um deles para você); as de iOS funcionam em qualquer navegador.
Funciona com emuladores e simuladores?
Funciona. Emuladores Android costumam ser detectados sem cabo, e simuladores iOS rodando na máquina também — o fluxo é idêntico ao de um aparelho físico.
O inspetor web é gratuito?
É. Como todo o resto do Trace Eagle, é totalmente gratuito no macOS, Windows e Linux, sem recursos pagos.