Como visualizar o código HTML no Chrome

Você está curioso sobre o que compõe uma página da web? Quer saber como alterar o tamanho ou a cor da fonte do seu site? Ao visualizar o código HTML de uma página da Web, você pode fazer tudo isso e muito mais.

Neste tutorial, mostraremos como visualizar o código HTML de uma página da Web no Chrome.

Como visualizar o código HTML no Chrome

Ao escrever em HTML, o código-fonte é a série de tags e atributos usados ​​para definir a estrutura e o conteúdo de uma página da web.

O código-fonte é lido por navegadores da web e traduzido na página gráfica da web que você vê na tela. Além de definir a aparência de uma página da Web, o código-fonte também pode ser usado para adicionar interatividade, como janelas pop-up, formulários e menus suspensos.

Embora o usuário médio da Internet talvez nunca precise visualizar o código-fonte HTML de uma página da Web, há vários motivos pelos quais alguns podem querer fazê-lo.

Para desenvolvedores, visualizar o código-fonte pode ser uma maneira útil de entender como uma página é estruturada e determinar quais elementos de estilo e script estão sendo usados. Para designers, pode ser benéfico ver como outros designers usaram HTML para criar layouts eficazes.

Em alguns casos, os usuários também podem querer visualizar o código-fonte para solucionar erros ou aprender mais sobre como um determinado site ou aplicativo da web funciona. Seja qual for o motivo, visualizar o código-fonte HTML é um processo relativamente simples no Chrome.

Como visualizar o código HTML de uma página da Web no Chrome em um PC com Windows

O sistema operacional Windows é um dos sistemas mais compatíveis com o Chrome. O Chrome foi desenvolvido com base no projeto de código aberto Chromium, do qual a Microsoft é uma das principais colaboradoras. Essa compatibilidade se estende ao domínio HTML, onde o popular navegador permite que os usuários visualizem o código HTML de qualquer site.

Você pode visualizar o código HTML de duas maneiras.

Usando a Fonte da Página de Visualização

Este método é direto:

1. Abra o Chrome e navegue até a página onde deseja visualizar o código-fonte HTML.

   

2. Clique com o botão direito do mouse na página e selecione Exibir código-fonte da página ou pressione Ctrl + U no teclado para abrir o código-fonte em uma nova guia.

   

O código-fonte aparecerá na nova guia e você poderá percorrê-lo para visualizar a marcação HTML dessa página.

Usando ferramentas de desenvolvedor

Para inspecionar o código-fonte de uma página da Web usando as Ferramentas do desenvolvedor no Google Chrome, siga as etapas abaixo.

1. Abra o Google Chrome e navegue até a página da Web que deseja inspecionar.

   

2. Pressione Ctrl + Shift + I no seu teclado. O painel Ferramentas do Desenvolvedor será aberto em um encaixe ao lado da página da Web que você está visualizando.

   

3. Clique na guia “Elementos” na parte superior do painel. Isso exibirá o código-fonte HTML da página da web.

   

4. Agora você pode revisar o código-fonte da página. Para recolher um elemento, clique no triângulo ao lado do nome da tag. Para ver mais informações sobre um componente, clique com o botão direito nele e selecione “Inspecionar”.

   

Lembre-se de que esse método é melhor para páginas HTML; é possível visualizar o código-fonte de outros tipos de páginas da web, mas a formatação pode ser mais difícil de ler.

Como visualizar o código HTML de uma página da Web no Chrome em um Mac

Se você for um desenvolvedor da Web, é importante poder visualizar o código HTML de uma página da Web. Isso permite que você veja como a página está estruturada e solucione quaisquer problemas que possam surgir. Felizmente, é fácil fazer isso no Chrome em um Mac. Basta seguir estes passos:

1. Abra o Chrome e navegue até a página da Web onde deseja visualizar o código HTML.

   

2. Clique com o botão direito do mouse na página e selecione “Inspecionar”.

   

3. Um novo painel será aberto na parte inferior da tela exibindo o código HTML.

   

4. Você também pode clicar em elementos específicos no código HTML para ver como eles são estilizados na página. Por exemplo, você pode ver quais estilos CSS estão sendo aplicados a um elemento selecionando-o e clicando na guia “Estilos” no painel que se abre.

   

5. Para fechar o painel, clique no “X” no canto superior direito.

   

Como alternativa, você pode usar as Ferramentas do desenvolvedor do Chrome para visualizar o código-fonte.

1. Abra o Google Chrome e navegue até a página da Web que você deseja inspecionar.

   

2. Clique no ícone do menu (três pontos) no canto superior direito do navegador e selecione Mais ferramentas e Ferramentas do desenvolvedor no menu suspenso.

   

3. O painel Ferramentas do desenvolvedor será aberto na parte inferior da tela. Selecione os “Elementos” na parte superior do painel.

   

4. Agora você verá o código HTML da página atual exibido no painel Elementos. Você pode usar as diferentes opções no painel para inspecionar e depurar o código conforme necessário.

   

Com apenas alguns cliques, você pode visualizar facilmente o código HTML de qualquer página da Web no Chrome em um Mac. Isso pode ser útil quando você está tentando solucionar problemas de desenvolvimento da Web ou deseja examinar mais de perto como um determinado site é construído.

Como visualizar o código HTML de uma página da Web no Chrome no aplicativo para iPhone

Se estiver usando um iPhone, você pode visualizar o código HTML de qualquer página no Chrome de duas maneiras:

Ajustando a URL

Você pode visualizar facilmente o código HTML de qualquer página fazendo um pequeno ajuste na URL:

1. Abra o Chrome e navegue até a página da Web cujo código HTML você deseja visualizar.

   

2. Toque uma vez na barra de endereços para iniciar o modo de edição.

   

3. Mova o cursor para a frente da URL.

   

4. Digite “View-source” e, em seguida, clique no botão “Go”. O código HTML da página da Web será exibido no Chrome.

   

Usando ferramentas de desenvolvedor

As ferramentas do desenvolvedor do Chrome também estão disponíveis no iOS, mas um conjunto diferente de etapas é necessário para iniciá-lo em comparação com os PCs.

1. Toque nos três pontos no canto superior direito da tela e selecione “Configurações”.
2. Role para baixo e toque em “Avançado” e ative a alternância ao lado de “Ferramentas do desenvolvedor”.
3. Toque e segure uma área vazia da página e selecione “Inspecionar elemento”. Isso abrirá um painel lateral com o código HTML dessa página.

Como visualizar o código HTML de uma página da Web no Chrome no aplicativo Android

Ao usar o aplicativo Chrome em seu telefone Android, você pode querer visualizar o código HTML de uma página da web. Isso pode ser útil se você estiver tentando solucionar um problema com a página ou quiser ver como a página está estruturada. Para visualizar o código HTML de uma página da Web no Chrome em seu telefone Android, siga estas etapas:

1. Abra o Chrome no seu Android.

   

2. Digite “view-source:” seguido da URL da página que você deseja visualizar o código-fonte. Por exemplo, se você quiser visualizar o código-fonte de www.google.com, digite “view-source:www.google.com” na barra de endereço do Chrome.

   

Isso abrirá o código HTML dessa página na interface de ferramentas do desenvolvedor integrada do Chrome. A partir daí, você pode visualizar e editar o código conforme desejado. Lembre-se de que esse método só funcionará se o site que você está tentando visualizar permitir acesso ao seu código-fonte. Caso contrário, você não conseguirá ver nada além de uma mensagem de erro.

Como visualizar o código HTML de uma página da Web no Chrome em um iPad

O aplicativo Chrome no iPad facilita a visualização do código HTML de qualquer página da web. Basta seguir estes passos:

1. Abra o Chrome e digite “view-source:” seguido do URL da página que deseja visualizar. Por exemplo, se você deseja visualizar o código-fonte de www.alphr.com, digite “view-source:www.alphr.com” na barra de endereços do Chrome.

   

2. Aperte o botão “Ir”.

   

Isso deve carregar o código-fonte da página em uma nova guia no Chrome. A partir daí, você pode salvar ou compartilhar o código conforme necessário.

O código-fonte é a cola que mantém as páginas unidas

HTML é a base de qualquer site. Ele fornece a estrutura e o conteúdo que os visitantes veem quando carregam uma página em seu navegador.

Embora a aparência final de uma página possa ser determinada por CSS ou outras linguagens de estilo, o código HTML determina a estrutura e o conteúdo básicos da página. Algumas alterações podem potencialmente quebrar a página. Por esse motivo, é importante ter um bom conhecimento de HTML ao visualizar ou fazer alterações no código-fonte.

Além disso, lembre-se de que, embora a visualização do código HTML possa ser útil em alguns casos, as alterações feitas no código não serão refletidas na página da Web ao vivo. Apenas as alterações publicadas pelo administrador do site serão visíveis aos visitantes.

Você já tentou visualizar o código HTML de qualquer página da Web usando algum dos métodos discutidos neste tutorial? Como foi?

Deixe-nos saber na seção de comentários.