O que saber
- Ative o Web Inspector no iOS: Vá para Settings > Safari > Advanced e mova a chave de alternância Web Inspector para a posição On.
- Use o Web Inspector no macOS: conecte seu dispositivo iOS a um Mac e escolha o URL a ser inspecionado no menu Develop.
Se você encontrar um bug ou outro problema com um site no Safari móvel, use a ferramenta Web Inspector para investigar. Este artigo explica como usar o console Safari para iPhone para depurar erros com a ajuda do seu computador Mac. As instruções se aplicam a iPhones com iOS 14, iOS 12 ou iOS 11 e também a Macs com macOS Big Sur (11.0), macOS Catalina (10.15) ou macOS Mojave (10.14).
Ative o Web Inspector no seu iPhone ou outro dispositivo iOS
O Web Inspector está desabilitado por padrão, pois a maioria dos usuários do iPhone não o utiliza. No entanto, se você é um desenvolvedor ou está curioso, pode ativá-lo em poucos passos. Veja como:
-
Abra o iPhone Configurações menu.
Em um iPhone com uma versão inicial do iOS, acesse o Debug Console através de Settings > Safari > Developer > Debug Console Quando o Safari no iPhone detecta erros de CSS, HTML e JavaScript, detalhes de cada exibição no depurador.
- Role para baixo e toque em Safari para abrir a tela que contém tudo relacionado ao navegador Safari no seu iPhone, iPad ou iPod touch.
- Role até o final da página e selecione Avançado.
-
Mova a chave Web Inspector para a posição On.
Image
Conecte seu dispositivo iOS ao Safari em um Mac
Para usar o Web Inspector, conecte seu iPhone ou outro dispositivo iOS a um Mac que tenha o navegador Safari e ative o menu Desenvolver.
-
Com o Safari aberto, selecione Safari na barra de menu e escolha Preferences.
Image -
Selecione a guia Avançado.
Image -
Selecione a caixa de seleção Show Develop menu in menu bar e feche a janela de configurações.
Image -
Na barra de menus do Safari, selecione Desenvolver e escolha o nome do seu dispositivo iOS conectado e selecione o URL que aparece em Safaripara abrir o console de depuração desse site.
Image Depois de conectar seu dispositivo, use seu Mac para inspecionar o site que deseja depurar e abra-o no navegador móvel Safari.
O que é o Web Inspector?
Desenvolvedores da Web usam o Web Inspector para modificar, depurar e otimizar sites em Macs e dispositivos iOS. Com o Web Inspector aberto, os desenvolvedores podem inspecionar os recursos em uma página da web. A janela do Web Inspector contém HTML editável e notas sobre os estilos e camadas da página da Web em um painel separado.
Antes do iOS 6, o navegador da web iPhone Safari tinha um console de depuração integrado que os desenvolvedores usavam para encontrar defeitos na página da web. Versões recentes do iOS usam o Web Inspector.
Com Safari 9 e OS X Mavericks (10.9), a Apple introduziu o Modo de Design Responsivo no Web Inspector. Os desenvolvedores usam este simulador integrado para visualizar como as páginas da Web são dimensionadas para diferentes tamanhos de tela, resoluções e orientações.
