Como visualizar a fonte HTML no Google Chrome

Quer seja um web designer a depurar o código-fonte do seu site ou apenas curioso sobre o aspecto do código de um site, pode ver o código fonte HTML no Google Chrome. Existem duas maneiras de visualizar o código-fonte HTML: Exibir código-fonte e inspecionar usando as Ferramentas do desenvolvedor.

Fonte usando a fonte da página de exibição

Abra o Chrome e vá para a página da web que você deseja visualizar o código-fonte HTML. Clique com o botão direito do mouse na página e clique em "Exibir código-fonte da página" ou pressione Ctrl + U para ver a fonte da página em uma nova guia.

Uma nova guia é aberta com todo o HTML da página da Web, completamente expandido e não formatado.

Se você estiver procurando por um elemento ou peça específica na fonte HTML, usar View Source é entediante e complicado, especialmente se a página usa muito JavaScript e CSS.

Inspecionar fonte usando ferramentas de desenvolvedor

Esse método usa o painel Ferramentas do desenvolvedor no Chrome e é uma abordagem muito mais clara o código fonte. O HTML é mais fácil de ler aqui graças à formatação adicional e à capacidade de recolher elementos que você não está interessado em ver.

Abra o Chrome e vá para a página que deseja inspecionar; em seguida, pressione Ctrl + Shift + i. Um painel encaixado será aberto ao lado da página da Web que você está visualizando.

Clique na pequena seta cinza ao lado de um elemento para expandi-la ainda mais.

Se você não quiser ver o código da página inteira por padrão, mas, em vez disso, inspecionar um elemento específico no HTML, clique com o botão direito do mouse no espaço da página e clique em "Inspecionar". / p>

Quando o painel abre neste momento, ele vai diretamente para a parte do código que contém aquele elemento que você clicou.

Se você quiser alterar a posição do encaixe, poderá movê-lo para a parte inferior, esquerda, direita ou até mesmo desencaixá-lo em uma janela separada. Clique no ícone de menu (três pontos) e escolha entre desencaixar em uma janela separada, encaixar à esquerda, encaixar na parte inferior ou encaixar à direita, respectivamente.

[HR ]

Isso é tudo que existe para isso. Quando você terminar de examinar o código, feche a guia "Visualizar código-fonte" ou clique no "X" no painel "Ferramentas do desenvolvedor" para retornar à sua página da Web.

Via: How to Geek