Como visualizar o código fonte HTML de uma página da Web no iOS ou Mac (Guia)

Se você se interessa por desenvolvimento da Web em pouco tempo ou se apenas tem interesse geral em pesquisar no código para ver como as coisas funcionam, pode haver momentos em que você queira ver o código-fonte HTML por trás de uma página da web específica.

É possível fazer isso nos dispositivos iOS, como iPhone ou iPad, e no Mac. Neste tutorial, mostraremos como visualizar o código-fonte HTML de uma página da web nas duas plataformas.

Como visualizar o código fonte de um site no iPhone ou iPad

Se você deseja visualizar o código fonte de uma página da Web a partir do seu iPhone ou iPad, use um aplicativo para ajudá-lo. A maioria dos aplicativos modernos facilita esse processo e inclui realce de sintaxe útil para que você possa entender melhor o que está vendo.

Recomendamos o uso do HTML Viewer Q, que é um download gratuito da App Store. Depois de instalado, siga estas etapas para exibir o código fonte de uma página da web:

1) Inicie o HTML Viewer Q na tela inicial.

2) Toque no Ligação botão no canto superior direito do aplicativo:

3) Digite o URL completo de uma página da web da qual você deseja ver o código-fonte e toque no Ir (usaremos a Amazon neste exemplo).

4) Depois que a página carregar, toque no Código botão no canto superior esquerdo do aplicativo.

Agora você está visualizando o código-fonte da página da web selecionada. Você pode tocar em qualquer um dos números na parte superior do aplicativo para alternar entre diferentes tamanhos de fonte: por exemplo, 9pt, 12pt, 16pt etc., e também pode usar o botão Pesquisar para pesquisar por palavras-chave ou sintaxe específica. procurando por.

O aplicativo também permite copiar o código HTML para colá-lo em qualquer outro aplicativo.

Como visualizar o código-fonte HTML da página no Safari no Mac

Se você estiver usando um Mac, não precisará de software de terceiros para visualizar o código-fonte de uma página da web. Você pode usar o Safari (ou qualquer outro navegador da web que você preferir) para ver o código-fonte no próprio navegador.

Nota: essas etapas variam um pouco, dependendo do navegador da web que você está usando.

Parte um: habilitando as ferramentas de desenvolvedor no Safari

Para visualizar o código-fonte de uma página da web no Safari, primeiro você precisa habilitar as ferramentas de desenvolvimento ocultas. Para fazer isso, execute as seguintes etapas:

1) Inicie o Safari se ainda não estiver aberto.

2) Vamos para Safari → Preferências na barra de menus.

3) Abra o Avançado guia na janela Preferências.

4) Coloque uma marca de seleção no Mostrar menu Desenvolver na barra de menus caixa se ainda não estiver marcada.

Agora que as ferramentas adequadas estão ativadas, você está pronto para avançar para a próxima seção para visualizar o código fonte de uma página da web.

Parte dois: visualizando o código fonte de uma página da web no Safari

Para exibir o código-fonte de uma página da Web depois que as ferramentas de Revelação estiverem ativadas, siga estas etapas:

1) Inicie o Safari se ainda não estiver aberto.

2) Carregue a página da web em que deseja ver o código-fonte (usaremos a Amazon neste exemplo).

3) Vamos para Desenvolver → Mostrar fonte da página na barra de menus (ou clique com o botão direito do mouse na página e selecione Mostrar fonte da página).

4) O código-fonte agora aparecerá em uma janela na parte inferior do aplicativo Safari:

Você pode usar a barra de pesquisa para encontrar palavras-chave ou sintaxe específicas, se desejar, ou redimensionar a janela Revelação clicando e arrastando uma borda, como faria para redimensionar um aplicativo no seu Mac.

Empacotando

Esse recurso capacita os Curious Georges por aí com a capacidade de ver o que faz uma página da Web funcionar, mas também é uma ferramenta inestimável para desenvolvedores da Web, iniciantes ou experientes, que desejam uma melhor compreensão do código por trás de uma página da Web ou simplesmente deseja solucionar problemas de seu próprio site.

Leia também: