Инструмент для визуального анализа HTML кода страницы.
Кратко о построение страницы
При запросе страницы сайта, браузер (от англ. browser, веб-обозреватель) в ответ получает исходный HTML-код, но перед началом отрисовки графики, предшествует этап анализа кода и его построение в виде дерева узлов (render tree). В рамках браузерного проекта, со структурой HTML, работать приходится постоянно. Для лучшего удобства, в программу ZennoPoster, входит дополнение для визуального анализа дерева элементов.
Открыть окно в программе
Чтобы вызвать данное окно в программе ProjectMaker, необходимо, в верхнем меню нажать:
Главное меню: “Окно” → “Дерево элементов“
С его помощью, можно перемещаться по элементам страницы, а в браузере, можно наглядно видеть выделенный объект.
Фильтр дерева элементов
В окне дерева элементов, можно настроить вывод определенных тегов, освободив себя, тем самым от лишних элементов, что упростит анализ документа и в разы сократит время поиска нужного вам тега.
Дополнительно на панели окна, располагаются кнопки:
Показать только важные элементы - автоматически оставит только (важные) часто используемые теги.
Добавить или удалить теги - по умолчанию в программу добавлены часто используемые элементы, но вы можете управлять их списком самостоятельно.
Работа с объектом страницы
Правой кнопкой мыши (ПКМ) на выбранном элементе, вызвав контекстное меню, можно выбрать раздел для дальнейшей работы с элементом, как с объектом.
Исследователь элемент - вызывает окно “Свойства элемента”, для более детального анализа свойств, у выбранного вами элемента.
В конструктор действий - инструмент, позволяет тонко настроить методы поиска элемента, одновременно тестируя действия над ним.
Поиск по XPath - автоматически строит путь до элемента, в представление XML Path Language, для последующей работы в конструкторе действий.
Парсить данные - инструмент, позволяет с минимальным количеством кликов, настроить условия сбора данных, с предварительным выводом результата, в том же окне.
Это каптча - добавляет в проект модуль ввода каптчи в ручную.
Поиск по картинке - инструмент, для определенных действий мышью над выбранным участком.
Дополнительные инструменты для работы с исходным кодом страницы
Панель для анализа атрибутов HTML элемента
Открыть окно “Свойства элемента”
“Окно” → “Свойства элемента“
Инструмент, для анализа: DOM-модели документа, исходного HTML-код, текстового содержимого страницы.
Открыть окно “Просмотра текста страницы”
“Браузер” → “Просмотр исходного кода, DOM и текста страницы“
Область применения
Помимо анализа исходного кода текущей страницы, можно настроить поиск по регулярному выражению, для этого, необходимо нажать “Копировать в конструктор рег. выражений” и содержимое документа, поместиться в область “Текст для обработки”, для дальнейшего создания /тестирования регулярного выражения.
Developer tools или сокращённо — DevTools, набор инструментов помогает тестировать, отлаживать, профилировать, проверять код на соответствие тем или иным стандартам и многое другое.
Инструмент веб-разработчика, активен только при работе с браузером Google Chrome.
Открыть окно “Инструмент веб-разработчика”
“Браузер” → “Инструменты web-разработчика для активной вкладки“
Данная кнопка на панели, активна только при работе с браузером Google Chrome.
