Como visualizar o código-fonte da página da Web no iPhone e no iPad

Embora os aplicativos iOS ainda não sejam máquinas de desenvolvimento, geralmente você encontrará um iPhone ou um iPad no kit de ferramentas de um web designer/desenvolvedor. Embora se você for um desenvolvedor/editor ou apenas alguém que deseja visualizar o código-fonte de uma página ou visualizar todos os recursos implantados nela, geralmente o faz no computador.

Agora, o iOS 8 tornou muito mais fácil visualizar a fonte, os ativos e os recursos DOM de uma página. E, graças a incríveis aplicativos de terceiros com suporte a extensões, você pode fazer isso no Safari (o Chrome não é compatível porque as extensões podem acessar o DOM apenas no Safari).

Vamos falar sobre os dois aplicativos que ajudarão você a visualizar e salvar o código-fonte de qualquer site quando estiver em trânsito.

Exibir extensão de origem para Safari

View Source ($ 0,99) é um aplicativo simples e poderoso com uma extensão do Safari. Custa $ 0,99, mas vem com muitos recursos.

Depois que o aplicativo estiver instalado, vá para o Safari, toque no Compartilhar botão, deslize para a direita na linha inferior e toque em Mais. A partir daqui alternar Ver fonte. Isso ativará a extensão.

Mais sobre as extensões do iOS 8: As extensões do iOS 8 estão rapidamente se tornando uma ferramenta poderosa. Dê uma olhada em como eles funcionam, as melhores extensões de compartilhamento e como uma extensão pode ajudá-lo a transformar o Safari em um downloader completo.

Agora, vá para a página, toque no Compartilhar botão e escolha Ver fonte. Você verá o código-fonte da página em toda a sua glória. Toque em Compartilhar botão para abrir a planilha de compartilhamento nativo. A partir daqui, você pode enviar o código para um aplicativo de notas ou enviá-lo por e-mail.

Abaixo, você verá quatro botões – Assets, DOM, Script e Info.

Os ativos listam todas as imagens na página. Você pode tocar em um link para ver uma prévia e salvar a imagem.

o DOM O botão mostrará um modelo de árvore com uma estrutura hierárquica dos documentos HTML, XML e SVG. Você pode tocar em qualquer elemento para expandi-lo.

o Roteiro botão permite escrever e injetar Javascript em qualquer página (localmente). o Informações painel mostra informações sobre a página.

Srcfari

Srcfari ($ 0,99) é uma alternativa ao View Source. Embora o aplicativo mostre o código-fonte e os recursos, como imagens, folhas de estilo CSS e scripts em execução na página, você terá que fazer isso no próprio aplicativo. Não há extensão do Safari para Srcfari.

Dito isso, usar Srcfari não é uma experiência ruim. O aplicativo tem uma boa tipografia e faz um trabalho muito melhor ao dividir ativos por scripts, CSS e imagens do que o aplicativo View Source. Uma reclamação que tenho com o Srcfari é que ele permite a quebra de texto para folhas de estilo CSS, mas não quando você está visualizando a fonte inteira (o que o aplicativo View Source faz). Isso significa que haverá uma boa quantidade de panorâmica e zoom envolvidos, pelo menos no iPhone.

Fora isso, Srcfari é o assunto de sempre. Você pode copiar o código-fonte para a área de transferência ou enviá-lo por e-mail para alguém. Você também pode salvar imagens usando o aplicativo.

Conclusão

O Safari provavelmente já é seu navegador preferido no iOS (principalmente porque o iOS não permite que você selecione o Chrome como padrão). Se você precisar visualizar o código-fonte com bastante frequência, o aplicativo View Source de $ 0,99 com sua extensão Safari valerá o preço.

Você costuma usar seu iPhone ou iPad para solucionar problemas de sites? Ou para ver o que há de errado com eles? Deixe-nos saber nos comentários abaixo.