Перейти к основному содержимому

Окно дерева элементов

Пожалуйста, ознакомьтесь с Правилами использования материалов на данном ресурсе.

🔗 Оригинальная страница — Источник данного материала

Описание​

Инструмент для визуального анализа HTML кода страницы.

Построение страницы​

Когда пользователь запрашивает страницу сайта, браузер (от англ. browser, веб-обозреватель) получает исходный HTML‑код. Прежде чем начать отображать графику, браузер проводит анализ этого кода и строит дерево узлов страницы (render tree).

Работа со структурой HTML является неотъемлемой частью любого браузерного проекта. Для упрощения этого процесса в программу ZennoPoster встроен инструмент для визуального анализа дерева элементов.

Как открыть окно в программе?​

Необходимо в ProjectMaker в верхнем меню нажать:

Окно → Дерево элементов
Дерево элементов ZennoPoster

Теперь можно перемещаться по элементам страницы и наглядно видеть выделенный объект в браузере.

Фильтр дерева элементов​

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

Фильтр окна дерево элементов

Дополнительно на панели окна, располагаются кнопки:

Интерфейс окна дерево элементов

  • Показать только важные элементы — автоматически оставит только (важные) часто используемые теги.
  • Добавить или удалить теги — по умолчанию в программу добавлены часто используемые элементы, но вы можете управлять их списком самостоятельно.

Добавить теги в панель дерево элементов

Работа с объектом страницы​

Правой кнопкой мыши (ПКМ) на выбранном элементе, вызвав контекстное меню, можно выбрать раздел для дальнейшей работы с элементом, как с объектом.

Работа с объектом страницы

  • Исследовать элемент - вызывает окно Свойства элемента для более детального анализа свойств, у выбранного вами элемента.
  • В конструктор действий - позволяет тонко настроить методы поиска элемента, одновременно тестируя действия над ним.
  • Поиск по XPath - автоматически строит путь до элемента, в представление XML Path Language, для последующей работы в конструкторе действий.
  • Парсить данные - вы можете с минимальным количеством кликов настроить условия сбора данных, при этом с предварительным выводом результата в том же окне.
  • Это каптча - добавляет в проект модуль ввода каптчи в ручную.
  • Поиск по картинке - нужен для определенных действий мышью над выбранным участком.

Дополнительные инструменты​

Они понадобятся для работы с исходным кодом страницы.

Свойства элемента​

Панель для анализа атрибутов HTML элемента

Окно → Свойства элемента

Панель свойства элемента

Просмотр текста страницы​

Инструмент для анализа DOM-модели документа, исходного HTML-код, а также текстового содержимого страницы.

Просмотр исходного кода, DOM и текста страницы

Помимо анализа исходного кода текущей страницы, можно настроить поиск по регулярному выражению. Для этого, необходимо нажать Копировать в конструктор рег. выражений и содержимое документа, поместиться в область Текст для обработки, для дальнейшего создания/тестирования регулярного выражения.

Кнопка для просмотра исходного кода в браузере
Кнопка просмотр исходного кода, DOM и текста страницы

Инструмент веб-разработчика​

Developer tools (или сокращённо DevTools) — набор инструментов, который помогает тестировать, отлаживать, профилировать и проверять код на соответствие тем или иным стандартам и многое другое.

Developer tools от ZennoChromium

Доступен только при работе с браузером Google Chrome
Открыть DevTools для активной вкладки
Инструменты web-разработчика для активной вкладки