Já quis ver o código-fonte de uma página da Web em um iPad ou iPhone? Infelizmente, o Safari móvel não inclui o recurso por conta própria e ainda não possui um kit de ferramentas de inspetor da web móvel integrado, mas com a ajuda de um bookmarklet personalizado, você pode visualizar o código-fonte de qualquer página da web diretamente no iOS e iPadOS.

Este artigo mostrará como você pode configurar para poder visualizar a fonte no Safari para iPad e iPhone usando um bookmarklet e um truque de javascript.

Como visualizar a fonte no Safari para iPad e iPhone

1. Abra o Safari caso ainda não o tenha feito
2. Marque esta página da web (ou qualquer outra) com o Safari em um iPad, iPhone ou iPod touch e nomeie o marcador como “Visualizar fonte”
3. Clique aqui para visualizar o javascript do bookmarklet e selecione Selecionar tudo -> Copiar
4. Toque no ícone Marcador na nova tela do navegador Safari e toque em “Editar” e toque no marcador que você salvou na etapa 2
5. Cole o código javascript que você copiou na etapa 3 na barra de URL e salve as alterações no marcador tocando em “Concluído”
6. Agora, quando quiser visualizar uma fonte de páginas da web no iPad ou iPhone, abra o menu Favoritos e selecione “Exibir fonte”
7. O código-fonte aparecerá na sintaxe destacada com URLs de origem clicáveis

Uma coisa importante a observar é que o javascript usado aqui envia a página que você está visualizando para o servidor michelsen.dk para processamento. Se você não se sentir confortável com isso, existem outras soluções disponíveis, mas elas não destacam a sintaxe e não são tão elegantes no geral.

Por exemplo, você pode usar o Javascript abaixo como um bookmarklet para visualizar o código-fonte também, que não será processado por meio de um servidor remoto, mas não usa realce de sintaxe:

javascript:(function(){var a=window.open('about:blank').document;a.write('Fonte de '+location. href+'');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))})();

Uma dica semelhante utiliza um marcador editado para permitir que você execute o Firebug com Mobile Safari em um iPhone ou iPad também, o que pode ser um pouco mais útil para alguns desenvolvedores da web.

Esta dica incrível vem de Michelsen.dk. Encontrado via Twitter, você pode nos seguir lá também

Quem sabe um dia o Safari no iOS e iPadOS terá uma capacidade nativa de visualizar a fonte? Até lá, você terá que contar com aplicativos ou ferramentas como esta.

Isso funcionou bem nos testes, mas alguns usuários relatam resultados diferentes em várias versões posteriores do Safari e iOS. Deixe-nos saber nos comentários abaixo o que funciona para você e qual versão do iOS e iPad ou iPhone você está usando.