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 seu Mac.
Siga estas dicas rápidas para fazer o inspetor da web funcionar e 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 paraConfiguraçõ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á paraConfigurações> Safari> Avançado e ativar Inspetor da Web
- No computador, abra o Safari e vá para oMenu Safari> Preferências> Avançado e marca de verificação Mostrar menu de desenvolvimento na barra de menu
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 a versão do iOS ou a versão do Safari em execução no Mac.
Redefina suas configurações de localização e privacidade
- Vamos para Configurações> Geral
- Selecione Redefinir
- Escolha para Redefinir local 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.
Alterne o atalho do teclado para sair da visualização do desenvolvedor da web. 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, em seu iPad, abra o site que deseja depurar e, em seguida, em seu 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 em seu Mac. Certifique-se de que o cabo seja um cabo de iluminação 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 de DESLIGADO. Portanto, certifique-se de verificarConfigurações> Safari> Avançado> Web Inspector
- Tente desligar o Inspetor da Web, aguarde 10 segundos e ligue-o novamente
- Em vez disso, 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 se o seu iDevice aparecer brevemente no menu de desenvolvimento do Safari e depois desaparecer
- 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 emDefinições > Safári > Desenvolvedor > Console de depuração
