Como usar o Web Inspector para depurar o Mobile Safari (iPhone ou iPad)

Muitas vezes é difícil desenvolver páginas da web para dispositivos móveis ou depurar seu aplicativo híbrido. Mas, felizmente, para quem projeta no iOS, começando com o iOS 6, a Apple oferece um recurso de inspetor remoto da web no iOS.

O Web Inspector permite que os desenvolvedores de aplicativos móveis e da Web usem as ferramentas de desenvolvedor do macOS e OS X Safari para depurar remotamente o conteúdo da Web ou aplicativos híbridos no Safari móvel no iPad ou iPhone.

É uma maneira fácil e prática de depurar, otimizar e modificar suas páginas da web ou aplicativos híbridos no iOS.

Para acessar essas ferramentas de desenvolvimento, ative o menu Desenvolver nas preferências avançadas do Safari do Mac.

Dicas rápidas

Siga estas dicas rápidas para fazer o inspetor da web funcionar para que você possa depurar seu site ou aplicativo para o Safari

• Redefina suas configurações de localização e privacidade no seu iPhone, iPad ou iPod touch. Vamos para Configurações> Geral> Redefinir> Redefinir local e privacidade
• Certifique-se de fazer login com o mesmo ID Apple no computador que seu iPhone, iPad ou iPod touch
• Ative a sincronização do Safari iCloud para o computador e qualquer iPhone, iPad ou iPod touch
• No iPhone ou iPad, vá para Configurações> Safari> Avançado e ativar Inspetor da Web
• No computador, abra o Safari e vá para o Menu Safari> Preferências> Avançado e marca de seleção Mostrar menu de desenvolvimento na barra de menu

Artigos relacionados

• Visualize o código-fonte HTML da página da Web no iPad ou iPhone. Nenhum aplicativo necessário!
• Como visualizar o código-fonte HTML no Safari
• Como ver os favoritos no Safari para iPhones e Macs

Computador Mac necessário

Desculpe, pessoal do Windows, mas o Safari’s Web Inspector só é compatível com Macs!

Use o mesmo Apple ID e iCloud Sync!

Certifique-se de que seu iDevice e seu Mac estejam conectados com o mesmo ID Apple e que você ative o Safari no iCloud.

Para o seu iDevice: Configurações> Perfil de ID da Apple> iCloud> Safari > ativado

Para o seu Mac: Menu Apple> Preferências do Sistema> ID Apple ou iCloud> Safari> Marcado

E verifique se o Safari é da mesma versão também

Certifique-se de que o Safari em seu Mac seja a mesma versão do Safari em seu iDevice. Pode ser necessário atualizar sua versão do iOS ou versão do Safari em execução no Mac.

Redefina suas configurações de localização e privacidade

1. Vamos para Configurações> Geral
2. Selecione Redefinir
3. Escolha para Redefinir localização e privacidade

Dica de atalho do teclado Pro no Mac para desenvolvedores da Web

Se você pressionar CTRL + Command + R no Safari, poderá ver como seria a aparência de um site em um dispositivo específico, selecionando o dispositivo.

Use o Web Inspector para depurar o Safari móvel

1. No seu iPad, iPhone ou iPod touch, toque em Configurações> Safari> Avançado e ativar Inspetor da Web. E habilite o JavaScript, se ainda não estiver ativado

2. No seu Mac, inicie o Safari e vá para Menu Safari> Preferências> Avançado então verifique “Mostrar menu de desenvolvimento na barra de menu”Se ainda não o fez

3. Conecte seu dispositivo iOS ao Mac com o cabo USB. Isso é fundamental - você deve conectar os dispositivos manualmente, usando um cabo. Não funciona via WiFi!

4. Agora, no seu iPad, abra o site que deseja depurar e, em seguida, no Mac, abra o Safari e vá para o “Desenvolver" cardápio. Agora você vê o iDevice que conectou ao Mac. Se nenhuma página estiver aberta em seu iDevice, você verá uma mensagem dizendo “Nenhum aplicativo inspecionável”.

5. Agora depure a página que está aberta no Safari móvel como faria no Mac, inspecione os elementos DOM, modifique o CSS, meça o desempenho da página e execute comandos Javascript.

Use a ferramenta de depuração para ajudá-lo a encontrar a causa de quaisquer erros de JavaScript em sua página da web. Você pode adicionar pontos de interrupção, depurar o javascript e inspecionar o valor das variáveis ​​em tempo de execução.

O Safari também deve detectar erros de CSS, HTML e JavaScript. E você verá os detalhes de cada erro no depurador.

O iDevice não aparece no menu de desenvolvimento do Safari?

•  Limpe o cache e os cookies do Safari
• Atualize o Safari em seu Mac e iDevice se houver uma atualização disponível.
  • Se você executa uma versão beta do iOS ou macOS, pode ser necessário executar a versão beta mais recente em todos os dispositivos
• Experimente outro cabo e / ou porta no seu Mac. Certifique-se de que cabo é um cabo de relâmpago genuíno da Apple ou certificado pela MFI (feito para iPhone)
• Verifique se o Web Inspector está ativado. As atualizações do iOS às vezes voltam para a configuração padrão DESLIGADA. Portanto, certifique-se de verificar Configurações> Safari> Avançado> Web Inspector
  • Tente desligar o Inspetor da Web, aguarde 10 segundos e ligue-o novamente
• Experimente o navegador Safari Technology Preview
• Saia do Safari no seu Mac e reinicie-o. Veja se o Safari do seu Mac reconhece seu dispositivo e permite a depuração
• Verifique se você não está usando o modo de navegação privada do Safari if seu iDevice aparece brevemente no menu de desenvolvimento do Safari e depois desaparece
• Abra o Activity Monitor e verifique o que está acontecendo com o Safari

Dicas do leitor 

• Se você estiver usando um iDevice mais antigo com iOS 6 ou anterior, o navegador Safari do seu dispositivo tem seu próprio console de depuração integrado! Basta acessar o console de depuração do Safari em Definições > Safári > Desenvolvedor > Console de depuração