Ver fuente HTML en la vista de árbol?

Question

Me gustaría analizar la estructura de algunas páginas web complejas que he visitado. Analizar manualmente las etiquetas en la fuente HTML es tedioso y propenso a errores.

Me gustaría encontrar una utilidad que acepte código fuente HTML (o una URL) como entrada, y mostrar la disposición jerárquica de los elementos HTML, incluidos los atributos de origen y de id, preferiblemente en una vista en árbol.

yo estaba seguro de que debería ser fácil de encontrar una herramienta de este tipo, pero unas cuantas búsquedas de Google no han aparecido nada para mí. Todavía estoy seguro de que existe una herramienta de este tipo. ¿Puede la comunidad ayudarme a encontrar algo? (Soy un usuario de Windows y, por supuesto, preferiría gratis si es posible.)

Answer 1

IE8 + y Chrome tienen maravillosas herramientas de desarrollador incorporadas. Simplemente visite una página web y en IE, presione F12, y en Chrome, vaya a llave-> herramientas-> herramientas de desarrollador. Ambos muestran la vista en árbol de la página y te permiten modificarla. Ambos son muy poderosos.

Answer 2

Use firebug o DOMinspector addon en firefox.

Answer 3

mayoría de los navegadores tienen un visor DOM incorporado. Firefox tiene un third party extension que proporciona esta.

Estos serán todos mostrar el DOM después de la recuperación de error ha sido realizada por el navegador, antes de esa fecha no se puede estar seguro de que un árbol válida podría ser construido.

Answer 4

Descargar Firefox (http://www.mozilla.org/) e instalar el complemento Firebug https://addons.mozilla.org/firefox/addon/firebug/) ambos son gratuitos

Answer 5

También se puede utilizar cualquier editor como buena Notepad ++ que ha resaltado la sintaxis y el colapso del nodo.

Answer 6

como han mencionado otros, la mayoría de los navegadores web modernos tienen "herramientas de desarrollo" construidos en ellos que incluyen una forma de explorar el código fuente HTML en una vista de árbol. He reunido una rápida comparación captura de pantalla de las que las últimas versiones de los navegadores cinco (Internet Explorer 9, Firefox 4, Chrome 12, Opera 11 y Safari 5) ofrecen herramientas.

• Web Browser Developer Tools Screenshot Comparison