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. Porém, no macOS, o recurso está disponível, mas oculto e você pode encontrá-lo seguindo este “Exibir código-fonte HTML no Safari" artigo. 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 a visualizar a origem da página no Safari no iPhone ou iPad.
Razões pelas quais você deve visualizar a fonte da página no iPhone/iPad
Veja abaixo algumas situações e motivos para visualizar fontes de páginas no Safari no iPad/iPhone:
- Você deve visualizar a origem da 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 Gerente de palco, Visualização Dividida, etc.
Portanto, siga os métodos abaixo para ficar preparado caso a necessidade de visualizar a fonte da página no iPhone ou iPad apareça a qualquer momento.
Melhores métodos para visualizar a fonte da página no iPhone/iPad
Abaixo estão as formas populares de visualizar fontes de páginas 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 exibição no iPhone ou iPad:
- Abra o Atalhos aplicativo na tela inicial ou na gaveta de aplicativos.
- Toque em mais (+) ícone para criar um novo atalho vazio.
- Na caixa de pesquisa, digite HTML e escolher Faça HTML a partir de Rich Text.
- Mais uma vez, procure o Uma olhadela app na caixa de pesquisa e adicione-o ao editor de atalhos.
- Agora, toque no ícone de atalho na parte superior e escolha Renomear.
- Renomeie para Ver código-fonte e toque em Concluído.
- Toque em (eu) botão e ative o botão Mostrar na planilha de compartilhamento opção.
- Agora, abra o navegador Safari e visite uma página da web de sua escolha.
- Toque o Compartilhar botão no aplicativo Safari e role para baixo para encontrar o Ver código-fonte atalho.
- 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
Nesse método, você criará um marcador e a URL será um script de código-fonte de visualizaçã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 em Menu Safari no canto superior esquerdo e vá para Favoritos.
- Tocar Favoritos para encontrar o marcador que acabou de adicionar.
- Dê um toque longo no marcador e selecione Editar no menu de contexto.
- 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 em 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('sobre: em branco').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))})();- Tocar Feito 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.
- Vou ao Favoritos menu e toque em Código-fonte HTML marcador que você acabou de criar.
- 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. Exibir código-fonte da página usando macOS Tethering
O aplicativo Safari no 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 Inspetor da Web
Siga estas etapas para ativar Inspetor da Web funcionalidade no Safari para iPad e iPhone:
- No seu iPhone ou iPad, abra o Configurações aplicativo.
- Vá para Configurações do Safari.
- Role para baixo até a parte inferior da janela Configurações do Safari para encontrar o Avançado cardápio. Toque nele.
- Ative o Inspetor da Web tocando no botão de alternância.
Veja a fonte da página no Mac Safari
Vá para o seu Mac e siga estas etapas:
- Conecte o iPhone ou iPad com 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 consultar estes métodos adicionais para visualizar códigos-fonte HTML de páginas da web:
4. Extensão do Safari – Inspetor da Web
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 os passos que você deve tentar:
- Abra o Configurações aplicativo e vá para o Configurações do Safari seção.
- Role para baixo até encontrar o Extensões opção. Toque nele.
- Dentro de Extensões, toque em Mais extensões.
- A página da App Store para Safari Extensions aparecerá.
- Toque o Procurar caixa e tipo Inspetor da Web e toque em Pesquisar no teclado.
- Encontre e instale o aplicativo Web Inspector.
- Novamente vá para Configurações > Safári > 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.
- Toque em Extensões ícone no canto direito da barra de endereço.
- Selecione os Inspetor da Web extensão.
- Escolha o Permitir um dia opção no pop-up que aparece.
- Novamente, toque no Extensões ícone 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.
- 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 para iOS – ver código-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 a URL do site na barra de endereço para revelar o código-fonte HTML.
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 legal em sites visitados para visualizar seu 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.
- Posicione o cursor de digitação no início do endereço conforme a imagem acima.
- Agora, digite o seguinte código antes https://
Cache:
- Acerte o Ir botão no teclado do iOS.
- No topo da página, você deve ver o Ver fonte opção. 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. Exibir 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:
- No iPhone ou iPad, acesse este link: Visualizador de código-fonte usando o navegador Safari.
- No Insira o URL caixa, digite ou copie e cole o URL da página da web para o qual você deseja revelar o código-fonte HTML.
- Toque em Visualizar botão para visualizar a fonte da página no navegador Safari do iPhone/iPad.
Conclusão
Então, agora você conhece todos os truques para visualizar a fonte 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.
Próximo, Como aprender Swift no Mac e iPad.