¿Cómo puedo ver la estructura de una página web en línea?

1

¿Cómo puedo ver la estructura de una página web "en línea" con la representación visual de la página real, todo a la vez?

Estoy tratando de entender mejor el diseño HTML, pero es difícil sentirlo, incluso teniendo la fuente abierta en un monitor separado, porque hay mucho código expansivo y misceláneo. Supongo que podría examinarlo, limpiarlo y configurar algún tipo de sistema de árbol plegable personalizado, pero eso tomaría demasiado tiempo para la cantidad de páginas de las que me gustaría obtener una vista rápida del diseño / estructura.

Como referencia, estoy usando Firefox para mi navegación en Internet.

firefox browser html

— Coldblackice
fuente

A decir verdad, en realidad es más fácil escribir su propio código en lugar de intentar descifrar el espagueti de código que es la página web aleatoria de Internet. De esta manera también aprenderás mejor. Además, pruebe el diseño 3D: vaya al Inspector y haga clic en el botón del cubo. Esto le dará una visualización en 3D de los elementos / estructura.

— Wk_of_Angmar

2

Creo que sé lo que estás tratando de hacer.

Mientras está en el sitio web en Firefox, haga clic en la toolspestaña en la parte superior del navegador.

Pase el Web Developermouse sobre el submenú y haga clic Inspector.

En el Inspector, puede pasar el mouse sobre el elemento para el que desea ver el código y observarlo aquí.

Funciona muy bien para mí ya que edito el código HTML de mi sitio web todo el tiempo.

Espero que esto funcione para ti (si es así, confirma mi respuesta). Gracias.

— HelpingHand
fuente

1

Como otros han mencionado, las herramientas de desarrollo web son buenas para este tipo de trabajo / aprendizaje. Todos los navegadores modernos tienen esto incorporado. Dado que está utilizando Firefox, puede hacer clic derecho en la parte que le interesa y seleccionar "Inspeccionar elemento". Esto cargará un panel separado, con la fuente, desplazada al elemento de interés.

Otra alternativa es el complemento Firebug de Firefox , que es donde la mayoría de estas herramientas de desarrollador se inspiraron. Mucha superposición con las herramientas de desarrollador integradas en Firefox, y principalmente una cuestión de preferencia personal en cuanto a la que utiliza. Tiendo a usar Firebug desde que lo usé desde el principio, y es con lo que estoy más familiarizado.

Lo realmente bueno de estas herramientas es que generalmente resaltarán el área de la página web que es el resultado del HTML, le mostrarán el CSS calculado, así como lo que otros CSS podrían haber coincidido pero no se aplicaron, visualizar el DOM para ti, etc., etc.

— ernie
fuente

1

Al hacer clic en Inspect Elementcargar el Inspector al que hice referencia en mi respuesta.

— HelpingHand

0

Instale el complemento Firebug para Firefox y use el elemento de inspección para ver qué sucede en la página web.

— Nikolai
fuente