Como visualizar a fonte HTML no Google Chrome

O que saber

• Clique com o botão direito na página da web e escolha Ver fonte da página .
• Atalho: pressione Ctrl + EM (PC com Windows) ou Comando + Opção + EM (Mac).
• Para usar as ferramentas para desenvolvedores do Chrome, selecione Cardápio (três pontos) > Mais ferramentas > Ferramentas de desenvolvimento .

Este artigo explica como acessar o código-fonte HTML de um site no navegador Google Chrome, bem como acessar e usar as ferramentas de desenvolvedor do Chrome. Visualizar o código-fonte de um site é uma excelente maneira para iniciantes aprenderem HTML.

Ver o código-fonte no Chrome

Então, como você visualiza o código-fonte de um site? Aqui estão as instruções passo a passo para fazer isso usando o navegador Google Chrome.

1. Abra o Navegador Google Chrome (Se você não tem Google Chrome instalado , este é um download gratuito).

2. Navegue até o página da web que você gostaria de examinar .

3. Clique com o botão direito a página e veja o menu que aparece. Nesse menu, clique em Ver fonte da página .

   

4. O código-fonte dessa página agora aparecerá como uma nova guia no navegador.

5. Alternativamente, você também pode usar os atalhos de teclado de Ctrl + EM em um PC para abrir uma janela com o código-fonte de um site exibido. Em um Mac, este atalho é Comando + Opção + EM .

Hilary Allison / Lifewire

windows 10 adicionar pasta ao menu iniciar

Use as ferramentas para desenvolvedores do Chrome

Além do simplesVer fonte da páginacapacidade que o Google Chrome oferece, você também pode aproveitar suas excelentes Ferramentas de desenvolvimento para se aprofundar ainda mais em um site. Essas ferramentas permitirão que você não apenas veja o HTML, mas também o CSS que se aplica à visualização dos elementos desse documento HTML.

Para usar as ferramentas de desenvolvedor do Chrome:

1. Abrir Google Chrome .

2. Navegar para a página da web que você gostaria de examinar .

3. Selecione os menu de três pontos no canto superior direito da janela do navegador.

4. No menu, passe o mouse sobre Mais ferramentas e então escolha Ferramentas de desenvolvimento no menu que aparece.

   

5. Será aberta uma janela que mostra o código-fonte HTML à esquerda do painel e o CSS relacionado à direita.

6. Alternativamente, se você clicar com o botão direito um elemento em uma página da web e selecione Inspecionar no menu que aparece, as ferramentas de desenvolvedor do Chrome aparecerão e destacarão a parte específica que você escolheu no HTML com o CSS correspondente mostrado à direita. É muito útil se você quiser saber mais sobre uma determinada parte de um site.

   como eu salvo minhas mensagens de texto

A visualização do código-fonte é legal?

Ao longo dos anos, muitos novos web designers questionaram se é aceitável visualizar o código-fonte de um site e usá-lo para sua educação e, em última análise, para o trabalho que realizam. Embora copiar o código de um site no atacado e passá-lo como seu em um site certamente não seja aceitável, usar esse código como um trampolim para aprender é, na verdade, quantos avanços foram feitos neste setor.

Como mencionamos no início deste artigo, seria difícil encontrar hoje um profissional da web que não tenha aprendido algo visualizando o código-fonte de um site! Sim, ver o código-fonte de um site é legal. Usar esse código como recurso para construir algo semelhante também é seguro. Pegar o código como está e transmiti-lo como seu trabalho é onde você começa a encontrar problemas.

No final, os profissionais da web aprendem uns com os outros e muitas vezes melhoram o trabalho que veem e no qual são inspirados, por isso não hesite em visualizar o código-fonte de um site e usá-lo como ferramenta de aprendizagem.

Mais do que apenas HTML

Uma coisa a lembrar é que os arquivos de origem podem ser muito complicados (e quanto mais complexo for o site que você está visualizando, mais complexo será o código do site). Além da estrutura HTML que compõe a página, também haverá CSS (folhas de estilo em cascata) que ditarão a aparência visual daquele site. Além disso, muitos sites hoje incluem arquivos de script incluídos junto com o HTML.

É provável que haja vários arquivos de script incluídos; na verdade, cada um alimentando diferentes aspectos do site. Francamente, o código-fonte de um site pode parecer complicado, especialmente se você for novo nisso. Não fique frustrado se não conseguir descobrir imediatamente o que está acontecendo com aquele site. Visualizar o código-fonte HTML é apenas a primeira etapa deste processo. Com um pouco de experiência você começará a entender melhor como todas essas peças se encaixam para criar o site que você vê no seu navegador. À medida que você se familiarizar com o código, poderá aprender mais com ele e não parecerá tão assustador para você.

como adicionar amigos no Apex Legends

• Como edito o código HTML no Chrome?

  Abra as ferramentas do desenvolvedor no Chrome pressionando Ctrl (ou Comando em um Mac) + Mudança + eu . A partir daí, pressione Ctrl ( Comando no Mac) + O e selecione o arquivo de origem salvo que deseja editar para abri-lo.

• Como posso visualizar o código-fonte da página no Chrome se Visualizar código-fonte estiver desativado?

  Se um site tiver desativado a opção Exibir código-fonte, você ainda poderá dar uma olhada nos bastidores. No topo da janela do navegador, selecione Visualizar > Desenvolvedor > Ver fonte , que deve exibir o código-fonte da página da web.

• Como posso visualizar o código-fonte de um site no Chrome usando meu dispositivo Android?

  Navegue até o site que deseja visualizar usando o aplicativo Chrome do seu dispositivo e selecione a barra de endereço do navegador. Mova o cursor de texto para a extrema esquerda – na frente do URL – e digite fonte de visualização , então aperte Digitar ou selecione Ir .