Como posso ver a estrutura de uma página da Web em linha?

Question

Como posso ver a estrutura da página da Web "inline" com a representação visual da página real, tudo de uma vez?

Estou tentando entender melhor o layout HTML, mas é difícil ter uma ideia, mesmo tendo a fonte aberta em um monitor separado, porque há muito código expansivo e diverso. Eu suponho que eu poderia filtrá-lo, limpá-lo e configurar algum tipo de sistema de árvore dobrável personalizado, mas isso levaria muito tempo para a quantidade de páginas que eu gostaria de obter uma visão rápida do layout / estrutura.

Para referência, estou usando o Firefox para navegar na Internet.

    

Answer 1

Eu acredito que sei o que você está tentando fazer.

Enquanto estiver no site no Firefox, clique na guia tools na parte superior do navegador.

Passe o mouse sobre o submenu Web Developer e clique em Inspector .

No Inspector, você pode passar o mouse sobre o item para o qual deseja ver o código e observá-lo aqui.

Funciona muito bem para mim enquanto edito o código HTML do meu site o tempo todo.

Espero que isso funcione para você (se confirmar, por favor, confirme minha resposta). Obrigado.

    

Answer 2

Como outros já mencionaram, as ferramentas do desenvolvedor da web são boas para esse tipo de trabalho / aprendizado. Todos os navegadores modernos são integrados. Como você está usando o Firefox, basta clicar com o botão direito do mouse na parte desejada e selecionar "Inspecionar elemento". Isso carregará um painel separado, com a origem, rolado para o item de interesse.

Outra alternativa é o Firefox addon Firebug , que é onde a maioria dessas ferramentas de desenvolvedores tem sua inspiração. Muita sobreposição com as ferramentas incorporadas do desenvolvedor no Firefox, e principalmente uma questão de preferência pessoal quanto ao que você usa. Eu costumo usar o Firebug desde que o usei desde o início, e é com o que eu estou mais familiarizado.

O mais interessante sobre essas ferramentas é que elas geralmente destacam a área da página da Web que é resultado do HTML, mostram o CSS calculado, bem como o que outro CSS pode ter correspondido mas não foi aplicado, visualize o DOM para você, etc etc etc.

    

Answer 3

Instale o addon Firebug para o Firefox e use inspecionar elemento para ver o que está acontecendo na página da web.