Como visualizar o código HTML no Chrome

Links de dispositivos

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.

Como visualizar o código HTML no Chrome

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.
    Como visualizar o código HTML no Chrome
  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.
    Como visualizar o código HTML no Chrome

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.
    Como visualizar o código HTML no Chrome
  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.
    Como visualizar o código HTML no Chrome
  3. Clique na guia "Elementos" na parte superior do painel. Isso exibirá o código-fonte HTML da página da web.
    Como visualizar o código HTML no Chrome
  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”.
    Como visualizar o código HTML no Chrome

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.
    Como visualizar o código HTML no Chrome
  2. Clique com o botão direito do mouse na página e selecione "Inspecionar".
    Como visualizar o código HTML no Chrome
  3. Um novo painel será aberto na parte inferior da tela exibindo o código HTML.
    Como visualizar o código HTML no Chrome
  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.
    Como visualizar o código HTML no Chrome
  5. Para fechar o painel, clique no “X” no canto superior direito.
    Como visualizar o código HTML no Chrome

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.
    Como visualizar o código HTML no Chrome
  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.
    Como visualizar o código HTML no Chrome
  3. O painel Ferramentas do desenvolvedor será aberto na parte inferior da tela. Selecione os "Elementos" na parte superior do painel.
    Como visualizar o código HTML no Chrome
  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.
    Como visualizar o código HTML no Chrome

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.
    Como visualizar o código HTML no Chrome
  2. Toque uma vez na barra de endereço para iniciar o modo de edição.
    Como visualizar o código HTML no Chrome
  3. Mova o cursor para a frente da URL.
    Como visualizar o código HTML no Chrome
  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.
    Como visualizar o código HTML 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.
    Como visualizar o código HTML no Chrome
  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.
    Como visualizar o código HTML no 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.
    Como visualizar o código HTML no Chrome
  2. Aperte o botão "Ir".
    Como visualizar o código HTML no Chrome

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.

Sign up and earn $1000 a day ⋙

Como corrigir o erro de não conseguir instalar software no Windows

Como corrigir o erro de não conseguir instalar software no Windows

Como corrigir o erro de não conseguir instalar software no Windows. Por que você não consegue instalar aplicativos ou software no Windows 10/11? Aqui está tudo o que você precisa saber sobre como consertar isso

Instruções para excluir ou alterar o PIN no Windows 11

Instruções para excluir ou alterar o PIN no Windows 11

Instruções para excluir ou alterar o código PIN no Windows 11, No Windows 11, o código PIN é uma ferramenta de segurança muito útil e conveniente para os usuários. Contudo algumas pessoas

Como corrigir o erro Não há opções de energia disponíveis no momento no Windows 10

Como corrigir o erro Não há opções de energia disponíveis no momento no Windows 10

Como corrigir o erro Não há opções de energia disponíveis no momento no Windows 10, Não é possível selecionar o modo de energia no Windows 10, o que devo fazer? Veja como corrigir o erro

A maneira mais simples de corrigir erros do aplicativo Fotos no Windows 10

A maneira mais simples de corrigir erros do aplicativo Fotos no Windows 10

A maneira mais simples de corrigir erros do aplicativo Fotos no Windows 10. O que devo fazer se o Microsoft Photos não funcionar? Não se preocupe com as maneiras de corrigir erros do aplicativo Fotos no Windows

Instruções para instalar atalhos de teclado para alternar idiomas de entrada no Windows 11

Instruções para instalar atalhos de teclado para alternar idiomas de entrada no Windows 11

Instruções para instalar atalhos para alternar idiomas de entrada no Windows 11. Durante o processo de uso do Windows, os usuários frequentemente terão que alternar entre os métodos.

Como verificar o status de energia compatível no Windows 11

Como verificar o status de energia compatível no Windows 11

Como verificar o status de energia é compatível com o Windows 11, o Windows 11 pode lidar com muitos estados de energia diferentes. Veja como verificar o status de energia

Como mudar de 2,4 GHz para 5 GHz no Windows 10

Como mudar de 2,4 GHz para 5 GHz no Windows 10

Como mudar de 2,4 GHz para 5 GHz no Windows 10. Se você deseja encontrar uma maneira rápida e simples de acelerar a Internet, alterar a banda WiFi de 2,4 GHz para 5 GHz pode ajudar.

Como corrigir erro de memória insuficiente para executar o Microsoft Excel no Windows

Como corrigir erro de memória insuficiente para executar o Microsoft Excel no Windows

Como corrigir o erro de memória insuficiente para executar o Microsoft Excel no Windows. Você está tendo um erro de memória insuficiente para executar o Microsoft Excel? Então, como corrigir o erro de memória insuficiente

Maneiras de encontrar todos os arquivos de vídeo no Windows

Maneiras de encontrar todos os arquivos de vídeo no Windows

Maneiras de encontrar todos os arquivos de vídeo no Windows. Não é possível encontrar vídeos gravados e salvos no PC. Abaixo estão algumas maneiras de ajudá-lo a encontrar todos os clipes no Windows.

Como corrigir o erro 0xa00f4288 no aplicativo Câmera no Windows 10 e 11

Como corrigir o erro 0xa00f4288 no aplicativo Câmera no Windows 10 e 11

Como corrigir o erro 0xa00f4288 no aplicativo Câmera no Windows 10 e 11. O aplicativo Câmera padrão do Windows é a principal ferramenta para tirar fotos. Portanto, no caso das câmeras Win 10 e 11

Como abrir vários programas com um atalho no Windows 10

Como abrir vários programas com um atalho no Windows 10

Como abrir vários programas com um atalho no Windows 10, na verdade você pode abrir vários programas ao mesmo tempo com uma única tecla. Veja como usar um

Como excluir opções antigas do menu de inicialização do Windows

Como excluir opções antigas do menu de inicialização do Windows

Como remover opções antigas do menu de inicialização do Windows, a inicialização dupla do Windows 10 é útil, mas pode deixar opções de inicialização redundantes no menu. Veja como remover o menu

Instruções para corrigir erros da Ferramenta de Recorte no Windows 11

Instruções para corrigir erros da Ferramenta de Recorte no Windows 11

Instruções para corrigir erros da Ferramenta de Recorte no Windows 11. O Windows 11 foi lançado oficialmente há algum tempo, mas durante o uso ainda existem muitos erros

Instruções para inserir texto por voz no Windows 11

Instruções para inserir texto por voz no Windows 11

Instruções para inserir texto por voz no Windows 11, Inserir texto por voz no Windows 11 ajuda a melhorar significativamente a eficiência do seu trabalho. Veja como

Como ligar/desligar a Sticky Key no Windows 11

Como ligar/desligar a Sticky Key no Windows 11

Como ligar/desligar o Sticky Key no Windows 11, o Sticky Key torna o teclado do PC mais fácil de usar. Veja como ativar e desativar o Sticky Key no Windows 11.

O que é o instalador de módulos do Windows?

O que é o instalador de módulos do Windows?

O que é o Instalador de Módulos do Windows? O Instalador de Módulos do Windows às vezes ocupa muitos recursos do sistema. O instalador de módulos do Windows é importante ou não?

Como aumentar o volume no Windows 10

Como aumentar o volume no Windows 10

Como aumentar o volume no Windows 10, Como aumentar o volume do computador ao nível máximo? Vamos aprender com WebTech360 como aumentar o volume do computador com Windows 10

Como usar o Assistente de Instalação do Windows 11 para instalar o Windows 11

Como usar o Assistente de Instalação do Windows 11 para instalar o Windows 11

Como usar o Assistente de Instalação do Windows 11 para instalar o Windows 11, o Assistente de Instalação do Windows 11 é uma das melhores maneiras de atualizar seu computador para o Windows 11.

Como desligar o som de inicialização no Windows 11

Como desligar o som de inicialização no Windows 11

Como desligar o som de inicialização no Windows 11. O som de inicialização do PC incomoda você? Então consulte como desligar o som de inicialização para PC com Windows 11 abaixo

Instruções para alterar o tempo limite de bloqueio de tela no Windows 11

Instruções para alterar o tempo limite de bloqueio de tela no Windows 11

Instruções para alterar o tempo limite de bloqueio de tela no Windows 11. Ao usar o Windows 11, há momentos em que os usuários precisarão deixar o computador por um período de tempo.