Como inspecionar um elemento num iPhone e num iPad, e o que fazer sem um Mac

A resposta curta é a que ninguém quer: no telefone não dá. No Safari móvel não há Inspecionar elemento, não há uma pressão longa que abra as ferramentas de programador, e não há definição nenhuma que as acrescente.

O que existe em vez disso é o Inspetor Web, que corre num Mac e se liga ao telefone por cabo. É a coisa a sério - os mesmos painéis que tem no computador, a mostrar a página tal como o telefone a está mesmo a desenhar - e precisa de hardware que a maioria de quem faz esta pergunta não tem à sua frente.

Com um Mac, que é a maneira correta

Três passos, e os dois primeiros são definições que só se fazem uma vez.

No iPhone ou no iPad. Abra Definições, depois Apps → Safari → Avançado, e ative Inspetor Web. No iOS 17 e anteriores o caminho é Definições → Safari → Avançado, sem o nível Apps.

No Mac. Abra Safari → Definições → Avançado e marque Mostrar funcionalidades para programadores web, o que coloca um menu Programador na barra de menus. Em versões mais antigas a caixa chama-se “Mostrar menu Programador na barra de menus”. É o mesmo interruptor de que precisa para inspecionar seja o que for no próprio Mac.

E depois ligue os dois. Ligue o telefone ao Mac com um cabo e desbloqueie-o. Se perguntar se deve confiar no computador, diga que sim. Abra a página no telefone e, no Mac, abra Programador, encontre o dispositivo pelo nome na lista e escolha a página. O Inspetor Web abre-se no Mac e está a comandar o telefone: passe o rato por cima de um elemento no Mac e ele fica realçado no aparelho.

Duas coisas que correm mal nesta altura. Se o dispositivo não aparecer, o telefone está bloqueado, o cabo só serve para carregar, ou o Inspetor Web nunca foi ativado. E por esta via só consegue inspecionar o Safari - o Chrome e o Firefox no iOS não são inspecionáveis a partir do menu Programador, o que importa menos do que parece, porque todos os browsers no iOS desenham com o mesmo motor WebKit por baixo.

Num iPad é o mesmo procedimento

Idêntico, incluindo os caminhos nas definições. A única diferença que vale a pena saber é que um iPad em Stage Manager ou em vista dividida declara um viewport que não é a largura inteira do ecrã, por isso um bug de layout que anda a perseguir pode depender da disposição e não do dispositivo.

Sem um Mac

Três opções, por ordem decrescente do que realmente lhe dizem.

Um serviço de depuração remota. Várias empresas alugam iPhones reais com o Inspetor Web ligado, dentro de um separador do browser. Custam dinheiro e funcionam, e para uma equipa que publica para iOS e não tem Macs, esta é a resposta honesta.

Uma consola incluída dentro da sua própria página. Se controla o site, uma pequena biblioteca de consola dentro da página dá-lhe um registo legível no próprio dispositivo. É o único caminho que não precisa de uma segunda máquina, e serve para as versões de desenvolvimento e não para produção, porque está a enviar uma superfície de depuração a toda a gente.

A simulação de dispositivo no computador, que não é a mesma coisa. A barra de dispositivos do Chrome muda o viewport, o user agent e o comportamento tátil, e é genuinamente útil para verificar um layout responsivo. O que não muda é o motor: continua a olhar para o Blink a fazer de telefone. Um bug que só aparece no iOS costuma ser um bug do WebKit, e o WebKit é exatamente a parte que a simulação não está a simular. (Este é o único sítio onde o Android é mais fácil: o Chrome dele é o mesmo motor que o seu Chrome no computador, por isso ali o modo dispositivo é um primeiro palpite razoável.)

Essa última distinção é a que custa um dia às equipas: “no modo telefone vê-se bem” e “funciona no telefone” são afirmações diferentes.

Quando quem tem o telefone não é você

Na maior parte das vezes esta pergunta não é sobre ferramentas. Alguém comunicou que o seu site está partido no iPhone dele, não está sentado ao seu lado, não tem um Mac, e pedir-lhe que ative o Inspetor Web e encontre um cabo não é um pedido que possa fazer razoavelmente.

O que pode pedir, e vale a pena ter:

• A versão exata do iOS e o browser. Definições → Geral → Acerca dá a versão. “iPhone” não é uma resposta; iOS 26.1 no Safari é.
• Uma gravação do ecrã. O iPhone torna isto fácil a partir do centro de controlo, e apanha o comportamento, os tempos e aquilo em que a pessoa tocou, que é quase tudo o que iria observar de qualquer maneira.
• As palavras exatas do que estiver no ecrã, fotografadas se for preciso. Um texto de erro procura-se no seu código; a descrição de um texto de erro não.
• Se acontece também num separador privado. Essa única pergunta separa um bug da sua página de algo que uma extensão, um recurso em cache ou um service worker velho está a fazer.

Esses quatro vão para o mesmo sítio que tudo o resto que pediria, e o nosso guia de relatórios de erro tem o resto da forma.

Convém sermos diretos sobre os nossos próprios limites aqui, já que esta é uma página sobre telemóvel. A nossa extensão é uma extensão do Chrome para computador: captura a consola e o registo de rede num computador, não num telefone. Se um visitante carregar num botão de reportar num iPhone, o que recebe é uma explicação e um link para levar para um browser de computador - útil para que o relatório chegue a ser aberto, e não um substituto do output de consola que teria tido com um Mac.

Para bugs de computador tira este problema todo do caminho, porque a metade técnica é capturada pela pessoa que carrega num botão. Para um bug que só acontece no iPhone de alguém, uma gravação do ecrã e um número de versão exato continuam a ser o melhor que vai conseguir sem um cabo.

Se está a depurar o seu próprio telefone

Vale a pena dizê-lo com clareza, porque a resposta longa acima é para o caso comum. Se o dispositivo, o Mac e a página são seus, ligue o cabo e use o Inspetor Web. Tudo o resto nesta página é um contorno para quando isso não é possível.

Referência rápida

• iPhone/iPad: Definições → Apps → Safari → Avançado → Inspetor Web ativo. (Definições → Safari → Avançado no iOS 17 e anteriores.)
• Mac: Safari → Definições → Avançado → Mostrar funcionalidades para programadores web.
• Ligue por cabo, desbloqueie, confie, depois Programador → dispositivo → página.
• Só Safari. Todos os browsers do iOS usam WebKit, chamem-se como se chamarem.
• O “modo dispositivo” do computador testa o layout, não o motor.