Suponha que você esteja visitando um site no qual trabalhou e veja algumas falhas. Você precisa visualizar a fonte da página no iPhone ou iPad para encontrar o código com bugs e corrigi-lo. Você abre o Safari e fica louco para encontrar o botão de visualização do código-fonte HTML no Safari sem sucesso. O que você faz agora? É fácil, basta ler este artigo!
Todo desenvolvedor de site, programador, designer de software, desenvolvedor de aplicativo da App Store, criador de conteúdo e webmaster sabe como o código-fonte é crucial. Nesta parte do trabalho, você sempre precisa olhar para o código-fonte de uma página da web para corrigir problemas, depurar, projetar e agregar valor ao site.
Embora essa tarefa seja bastante fácil em dispositivos Android e Windows , é igualmente difícil em dispositivos Apple como iPhone, iPad, MacBook e iMac. No entanto, no macOS, o recurso está disponível, mas oculto, e você pode encontrá-lo seguindo este artigo “Visualizar código-fonte HTML no Safari”. No entanto, para dispositivos iOS, é uma história diferente.
A Apple tornou absolutamente difícil visualizar as fontes da página no iPad/iPhone. Não há métodos nativos, ou devo dizer, fáceis nos quais você pode tocar ou tocar para obter o código-fonte HTML das páginas da web. Mas não fique muito louco ainda. Em vez disso, leia este artigo até o final para encontrar as melhores maneiras de aprender como visualizar a origem da página no Safari no iPhone ou iPad.
Razões pelas quais você deve visualizar a origem da página no iPhone/iPad
Encontre abaixo algumas situações e razões para visualizar fontes de página no Safari no iPad/iPhone:
Você deve visualizar a fonte de página de uma página da web para um dispositivo específico como iPhone ou iPad. Se você acessar o site no Mac e visualizar o código-fonte HTML, verá os elementos da versão para desktop, não as versões para iPhone ou iPad. Você está viajando e quer investir seu tempo olhando códigos de páginas da web para obter novas ideias ou criar um plano de depuração. Você prefere fazer o desenvolvimento de sites em seu iPad, pois ele vem com muitos recursos multitarefa, como Stage Manager, Split View, etc. momento.
Melhores métodos para visualizar a origem da página no iPhone/iPad
Abaixo estão as formas populares de visualizar as origens da página em códigos HTML em um iPhone ou iPad sem usar nenhum aplicativo de terceiros. Esses métodos são apropriados para codificadores e usuários finais preocupados com privacidade e segurança:
1. Obtenha o código-fonte HTML usando o aplicativo Atalhos
Este método só funcionará se você estiver executando o iOS 12.0 (iPadOS 12.0) e posterior. Veja como criar um atalho de origem da página de visualização no iPhone ou iPad:
Abra o aplicativo Atalhos na tela inicial ou na gaveta de aplicativos. Toque no ícone mais (+) para criar um novo atalho vazio. Na caixa de pesquisa, digite HTML e escolha Criar HTML a partir de Rich Text. Novamente, procure o aplicativo Quick Look na caixa de pesquisa e adicione-o ao editor de atalhos. Agora, toque no ícone de atalho na parte superior e escolha Renomear. Atalho para visualizar o código-fonte em páginas da Web Renomeie-o para Exibir código-fonte e toque em Concluído. Toque no botão (i) e ative a opção Mostrar na planilha de compartilhamento. Agora, abra o navegador Safari e visite uma página da web de sua escolha. 
Exibir atalho do código-fonte na folha de compartilhamento no Safari Toque no botão Compartilhar no aplicativo Safari e role para baixo para encontrar o atalho Exibir código-fonte. Toque no atalho e você obtém o código-fonte HTML no Quick Look.
2. Exibir código-fonte da página usando um script de marcador
Neste método, você criará um marcador e a URL será um script de código-fonte de exibição. Quando você navegar em qualquer página da web e precisar visualizar a origem da página no Safari, basta tocar no marcador. Você obterá um código-fonte HTML para a página. Veja como é feito:
Visite um site aleatório e marque-o em seu navegador Safari para iPad ou iPhone. Toque no menu Safari no canto superior esquerdo e vá para Favoritos. Toque em Favoritos para encontrar o marcador que acabou de adicionar. Dê um toque longo no marcador e selecione Editar no menu de contexto. 
Como editar o título e o endereço do marcador Limpe o título do marcador existente e renomeie-o para código-fonte HTML ou qualquer outra coisa apenas para lembrar o marcador. Toque no campo Endereço e limpe o URL existente. Copie e cole o seguinte código como URL (criador do código: Rob Flaherty): javascript:(function(){var a=window.open(‘about:blank’).document;a.write(”);a. close();var b=a.body.appendChild(a.createElement(‘pre’));b.style.overflow=’auto’;b.style.whiteSpace=’pre-wrap’;b.appendChild(a.createTextNode(document.documentElement.innerHTML))})(); Toque em Concluído no teclado para salvar as alterações feitas até agora. Agora, vá para a página da Web para a qual você precisa inspecionar o código-fonte. 
Como visualizar o código-fonte da página no Safari usando um script de favoritos Vá para o menu Favoritos e toque no favorito código-fonte HTML que você acabou de criada. Você deve ver o código HTML da página que está visitando em uma nova guia do Safari.
Leia também: Como gerenciar favoritos no Safari no iOS e Mac
3. Visualize o código-fonte da página usando o macOS Tethering
O aplicativo Safari para iPhone e iPad vem com uma ferramenta Web Inspector integrada. Infelizmente, o recurso não funciona diretamente em dispositivos iPhone ou iPad. Você precisa conectar os dispositivos a um MacBook ou iMac. Em seguida, você pode usar os controles do Mac Safari para visualizar o código-fonte HTML. O processo funciona em duas fases, conforme descrito abaixo:
Ativar o Web Inspector
Siga estas etapas para ativar a funcionalidade do Web Inspector no Safari para iPad e iPhone:
No seu iPhone ou iPad, abra o aplicativo Ajustes. Vá para Configurações do Safari. Role para baixo até a parte inferior da janela de configurações do Safari para encontrar o menu Avançado. Toque nele. 
Como obter o Web Inspector no Safari iPad Ative o Web Inspector tocando no botão de alternância.
Visualizar fonte da página no Mac Safari
Vá para o seu Mac e siga estas etapas:
Conecte o iPhone ou iPad a um MacBook ou iMac usando o cabo USB. Se o dispositivo não tiver sido autenticado anteriormente, o Mac solicitará que você o autentique usando o ID Apple. Agora abra o aplicativo Safari no Mac e visite qualquer site. Na barra de ferramentas do Mac, clique em Desenvolver. Procure seu iPad ou iPhone no menu de contexto que se abre. Clique no seu iPad ou iPhone para abrir uma nova janela no seu Mac que mostra a tela do Safari desses dispositivos. Agora, abra o site de destino em seu iPhone ou iPad e visualize o código-fonte no navegador Mac Safari.
Se você concorda com aplicativos e ferramentas de terceiros, também pode querer examinar estes métodos adicionais para visualizar códigos-fonte HTML de páginas da web:
4. Extensão Safari – Web Inspector
Você pode instalar a extensão Web Inspector para o navegador Apple Safari no iPad e iPhone. Em seguida, chame a extensão ao navegar em uma página da Web para visualizar seu código-fonte HTML. Aqui estão as etapas que você deve tentar:
Abra o aplicativo Configurações e vá para a seção Configurações do Safari. Role para baixo até encontrar a opção Extensões. Toque nele. 
Vá para Mais Extensões nas Configurações do Safari Dentro de Extensões, toque em Mais Extensões. A página da App Store para Safari Extensions aparecerá. Toque na caixa Pesquisar, digite Web Inspector e toque em Pesquisar no teclado. Encontre e instale o aplicativo Web Inspector. Vá novamente para Configurações > Safari > Extensões > e toque em Inspetor da Web. Use o botão de alternância para ativar esta extensão para o Safari. Abra o Safari e visite qualquer site. 
Ative o Web Inspector no menu de extensões do Safari Toque no ícone Extensões no canto direito da barra de endereço. Selecione a extensão Web Inspector. Escolha a opção Permitir um dia no pop-up exibido. Novamente, toque no ícone Extensões e, em seguida, toque em Web Inspector. O código-fonte HTML deve aparecer na parte inferior da página da Web que você está visualizando. 
Aprenda como visualizar a origem da página no iPhone ou iPad usando o Web Inspector Você pode alternar entre as guias como DOM, Elements, Console, Network e Resources. Para voltar à visualização normal, basta tocar na extensão Web Inspector na seção Extensões do Safari.
5. Aplicativo iOS – Ver fonte
Você pode obtê-lo gratuitamente na App Store. Na caixa de pesquisa, digite View Source e toque em Search. Você verá vários resultados na App Store. Instale aquele que diz View Source. O provedor do aplicativo é Roman Tomjak.
Abra o aplicativo na tela inicial ou na gaveta de aplicativos. Em seguida, digite o URL do site na barra de endereço para revelar o código-fonte HTML.
Como usar o aplicativo View Source
A ferramenta oferece uma visualização do tamanho do iPhone do código-fonte. No entanto, você pode alterar a orientação ou aumentar o zoom usando os botões relevantes no canto inferior direito da tela.
6. Visualize o código-fonte gratuitamente usando o Google Web Cache
Você pode executar o seguinte truque interessante em sites visitados para visualizar o código-fonte subjacente no Safari ou Chrome:
Visite a página da Web para a qual você precisa encontrar o código-fonte HTML. Toque no endereço na barra de endereços do Safari ou do Chrome. 
Tomar cursor antes do código HTTPS Posicione o cursor de digitação no início do endereço conforme a imagem acima. 
Digite Cache antes de HTTPS code Agora, digite o seguinte código antes do cache https://: Pressione o botão Ir no teclado do iOS. 
Como visualizar o código-fonte da página no Safari usando o Google Web Cache No topo da página, você deve ver a opção Exibir código-fonte. Toque nele. Agora você obtém o código-fonte da página da Web que acabou de visitar.
Leia também: Como importar seus favoritos, senhas e muito mais
7. Visualize o código-fonte em aplicativos da Web
Existem muitos sites que permitem revelar os códigos-fonte subjacentes de sites e páginas da web gratuitamente ou por uma pequena taxa. De todos esses aplicativos da web, escolhi o visualizador de código-fonte do CodeBeautify. Veja como funciona:
Como visualizar o código-fonte em aplicativos da Web Na caixa Inserir URL, digite ou copie e cole o URL da página da Web cujo código-fonte HTML você deseja revelar código. Toque no botão Visualizar para visualizar a origem da página no navegador Safari do iPhone/iPad.
Conclusão
Agora você conhece todos os truques para visualizar a origem da página em dispositivos iPhone e iPad. Você descobriu alguns métodos nativos e não nativos neste artigo. Você pode simplesmente seguir os truques nativos no iPad ou iPhone para visualizar o código-fonte HTML das páginas da web ou usar aplicativos que tornam a tarefa muito mais fácil.
Deixe-me saber qual método você gostou deixando um comentário abaixo. Além disso, compartilhe o artigo nas mídias sociais e no WhatsApp para ajudar seus amigos que estão aprendendo a desenvolver sites e codificar aplicativos.
A seguir, como aprender Swift no Mac e iPad.