Como visualizar o código HTML no Chrome

Links de dispositivos

• Android
• Iphone
• Chromebook
• Mac
• janelas
• Dispositivo ausente?

Você está curioso para saber o que constitui 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.

Visualizando 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 web.

O código-fonte é lido pelos navegadores da web e traduzido na página gráfica 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 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 os desenvolvedores, visualizar o código-fonte pode ser uma maneira útil de entender como uma página está 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 funciona um determinado site ou aplicativo da web. 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 do Chrome. O Chrome foi desenvolvido com base no projeto de código aberto Chromium, do qual a Microsoft é um dos principais contribuidores. Essa compatibilidade se estende ao domínio HTML, onde o navegador popular permite aos usuários visualizar o código HTML de qualquer site.

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

Usando Exibir código-fonte da página

Este método é simples:

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 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 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 próximo ao nome da tag. Para visualizar mais informações sobre um componente, clique com o botão direito sobre ele e selecione “Inspecionar”.
   

Tenha em mente que este 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ê é um desenvolvedor web, é importante poder visualizar o código HTML de uma página 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 estas etapas:

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 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 é aberto.
   
5. Para fechar o painel, clique no “X” no canto superior direito.
   

Alternativamente, 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 deseja inspecionar.
   
2. Clique no ícone do menu (três pontos) no canto superior direito do navegador e selecione Mais ferramentas e Ferramentas de 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 exibida 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 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 o 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 cujo código HTML você deseja visualizar.
   
2. Toque uma vez na barra de endereço para iniciar o modo de edição.
   
3. Mova o cursor para a frente do URL.
   
4. Digite “View-source” e clique no botão “Go”. O código HTML da página da web será exibido no Chrome.
   

Usando ferramentas de desenvolvedor

As ferramentas para desenvolvedores do Chrome também estão disponíveis no iOS, mas é necessário um conjunto diferente de etapas 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 o botão de 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 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 ela 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 do URL da página onde 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 integrada das Ferramentas do desenvolvedor 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 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 estas etapas:

1. Abra o Chrome e digite “view-source:” seguido do URL da página que deseja visualizar. Por exemplo, se desejar visualizar o código-fonte de www.alphr.com, você precisa digitar “view-source:www.alphr.com” na barra de endereço do Chrome.
   
2. Clique no 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 básica e o conteúdo 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 ativa. Somente as alterações publicadas pelo administrador do site ficarã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?