Como depurar uma página web no iPhone — sem um Mac

Comece pelo diagnóstico: a verificação automática

Antes de mexer no DOM, deixe a verificação automática apontar o óbvio: o Diagnóstico do OpenHTML lista os arquivos ausentes que a página referencia, os recursos remotos bloqueados pelo padrão de privacidade, os erros de JavaScript em tempo de execução e os problemas de codificação — cada um com uma correção em um toque, quando existe (permitir rede, ativar o JavaScript, mudar para o servidor local).

Na prática, isso resolve em segundos a maioria dos casos de “por que a página está em branco / sem estilo / funcionando pela metade”, principalmente com páginas geradas por IA que referenciam arquivos que nunca foram criados.

Console: o que a página está dizendo

O console captura a saída de log, warn e error do JavaScript da página, ao vivo. Exceções não tratadas caem aqui com suas mensagens — normalmente a pista mais rápida quando a interatividade morre.

Inspetor de elementos: o DOM, no dispositivo (Pro)

• Toque em qualquer elemento para ver a tag, os atributos e os estilos computados.
• Edite atributos ali mesmo para testar uma hipótese — o layout se ajeita sozinho se aquela classe sair?
• Pule de um elemento inspecionado direto para a linha dele na visualização de código.

Painel de rede: cada requisição, com os tempos (Pro)

Acompanhe o tráfego de fetch, XHR e WebSocket com URLs, códigos de status, tamanhos e tempos — o equivalente à aba de rede, no dispositivo. Exporte a sessão inteira como arquivo HAR para analisar depois no DevTools do computador, no Charles ou no Proxyman.

Lembre-se do padrão de privacidade: as páginas não acessam a rede até você permitir por documento, então um painel de rede vazio pode significar apenas que a página está sendo mantida offline — o diagnóstico avisa quando é o caso.

Reproduza as condições reais

• O modo servidor local (Pro) serve projetos em 127.0.0.1 para que fetch(), módulos ES e o carregamento de JSON se comportem como em produção — essencial para projetos web em ZIP.
• As predefinições de viewport (Pro) renderizam a página nas larguras de celular, tablet e computador para revelar bugs de layout responsivo.
• Solicitar site para computador (Pro) carrega o layout de desktop quando a página se adapta ao celular de forma agressiva demais.

Uma sessão realista

1. Importe a página ou o projeto; o diagnóstico aponta uma folha de estilo de CDN bloqueada e um erro no console.
2. Permita a rede para o documento → os estilos chegam; o erro continua.
3. O console mostra uma variável indefinida em app.js; a visualização de código pula para a linha.
4. A correção é confirmada editando o atributo do DOM no inspetor — depois você conserta o arquivo direito na sua mesa e importa de novo para verificar.