Просмотреть исходный код HTML в виде дерева?

Question

Я хотел бы проанализировать структуру некоторых сложных веб-страниц, которые я посетил.Разбор тегов в источнике HTML вручную утомителен и подвержен ошибкам.

Я хотел бы найти утилиту, которая будет принимать исходный код HTML (или URL) в качестве входных данных и отображать иерархическое расположение HTML.элементы, включая атрибуты source и id, желательно в виде дерева.

Я был уверен, что подобный инструмент будет легко найти, но несколько поисковых запросов в Google ничего не нашли для меня.Я все еще уверен, что такой инструмент существует.Может ли сообщество помочь мне найти что-нибудь?(Я пользователь Windows и, конечно, предпочел бы бесплатную, если это возможно.)

Answer 1

IE8 + и Chrome имеют прекрасные встроенные инструменты разработчика. Просто зайдите на веб-страницу и в IE нажмите F12, а в Chrome перейдите на wrench-> tools-> developer tools. Они оба показывают древовидное представление страницы и позволяют вам изменять ее. Они оба очень мощные.

Answer 2

Как уже упоминалось, большинство современных веб-браузеров имеют встроенные «инструменты разработчика», которые включают способ просмотра источника HTML в виде дерева. Я собрал быстрое сравнение скриншотов инструментов, которые предлагают последние версии пяти лучших браузеров (Internet Explorer 9, Firefox 4, Chrome 12, Opera 11 и Safari 5).

• Сравнение снимков экрана инструментов разработчика веб-браузера

Answer 3

Вы также можете использовать любой хороший редактор, например Notepad ++, в котором выделен синтаксис и происходит свертывание узлов.

Answer 4

Большинство браузеров имеют встроенную программу просмотра DOM. Firefox имеет стороннее расширение , которое обеспечивает это.

Все они будут отображать DOM после того, как браузер выполнит восстановление после ошибки, до этого вы не можете быть уверены, что допустимое дерево может быть построено.

Answer 5

Загрузите Firefox (http://www.mozilla.org/) и установите Firebug addon https://addons.mozilla.org/firefox/addon/firebug/) ОБА БЕСПЛАТНО

Answer 6

Используйте firebug или аддон DOMinspector на firefox.