Visualizar o código-fonte de qualquer página HTML é uma boa maneira de aprender HTML tanto para iniciantes quanto para programadores intermediários. Além disso, se você precisar extrair dados de sites que não restringem tais ações para seus projetos de web scraping, você deve entender os blocos de código e tags no código-fonte.
O Google Chrome permite que você verifique o código-fonte de qualquer página da Web de duas maneiras. Uma maneira é visualizar o código HTML de origem diretamente do servidor da web. Ele geralmente abre como uma única guia”Exibir código-fonte”.
Outra maneira é verificar o código depois que o navegador da Web otimizou o código-fonte real e adicionou qualquer manipulação de Javascript. O Chrome mostra isso como a ferramenta Inspecionar elementos , e esse utilitário existe para o benefício de qualquer desenvolvedor.
Usando atalhos
A maneira mais fácil de abrir o código-fonte de uma página da Web no Chrome é por meio do atalho de teclado.
Para abrir a guia Visualizar fonte, pressione Ctrl + U no Windows. No Mac, esse atalho é ⌘-Option-U.
Se você precisar abrir a ferramenta Inspecionar elementos, pressione Ctrl + Shift + C. Você também pode pressionar F12 ou Ctrl + Shift + I para abrir a ferramenta Desenvolvedores e depois ir para a guia Elementos.
Usando o menu de contexto
O menu de contexto (menu do botão direito do mouse) nas páginas da Web do Google Chrome também inclui as opções para abrir o código-fonte. Você pode optar por visualizar o código-fonte inalterado ou o código após a otimização pelo navegador.
Clique com o botão direito do mouse em qualquer lugar quando estiver dentro da página da web. Selecione Exibir origem da página ou Inspecionar conforme sua necessidade. A inspeção levará você ao bloco de código exato correspondente ao elemento gráfico onde você clicou com o botão direito.
Ao editar o URL
Outra maneira de visualizar o código-fonte é adicionando um código trecho para o URL. Se você usar as opções acima para visualizar o código-fonte da página, talvez tenha visto view-source: no endereço URL do código-fonte. Na verdade, você pode inserir esse código manualmente para executar a mesma tarefa.
Clique na barra de endereços. Pressione Home ou mantenha pressionada a tecla esquerda até que o cursor do teclado fique na frente da URL, mesmo antes de https://Digite view-source: e pressione Enter. Então, se o URL era https://www.google.com, agora ele deve se tornar view-source:https://www.google.com
Através do menu Chrome
Também é possível abrir os elementos de inspeção ferramenta no menu de controle do Chrome. Aqui, você pode abrir a ferramenta Desenvolvedores, que inclui Elements junto com outras ferramentas, como o Console do Chrome.
Clique no ícone de ponto triplo dentro da janela do Chrome. Acesse Mais ferramentas e selecione Ferramentas do desenvolvedor.
