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

Оглавление

Описание

С помощью данного инструмента Вы легко можете просмотреть исходный код (Source), DOM модель и отображаемый текст загруженной в браузере страницы.

Для чего это используется?

Данный инструмент используется когда нужно более глубже понять структуру страницы:

• Поиск данных для того, чтобы “прицепиться” к элементу для клика/получения/установки значения

• Парсинг данных к которым не подобраться с помощью конструктора действий

• Быстрое копирование исходного кода, DOM или текста в Тестер регулярных выражений

Как открыть окно?

Кнопка включения данного окна находится правее адресной строки браузера.

Open

Как работать с окном?

При клике по иконке открывается окно:

Open

Выбор содержимого

Тут необходимо выбрать, что Вы хотите просматривать: DOM (по умолчанию), исходный код или видимый текст на странице (разница между Source и DOM).

Переносить по словам

При активации данной опции если строка слишком длинная, то она будет перенесена на следующую , а не скрываться за границей окна. В качестве примера скриншот того же окна, но с активной данной опцией:

Копировать в конструктор регулярных выражений

При клике по данной кнопке будет запущен конструктор регулярных выражений, а содержимое окна будет автоматически в него скопировано.

Пример использования

Представим, что Вам необходимо спарсить тэги <meta> с атрибутом propertyсо страницы темы на форуме ZennoLab. Через конструктор действий к ним не подберёшься, т.к. эти тэги никак не отображены. Наши действия:

• Переходим на необходимую страницу

• Запускаем окно просмотра кода (конкретно в этом случае можно использовать как DOM так и исходный код, это никак не отразится на итоговом результате) и смотрим на необходимые тэги (их несколько, но тут будет приведён только один):

  У всех тэгов одна и та же структура: всегда начинаются с <meta property=и заканчиваются на

  >в кавычках, сразу после property,название этого свойства, а в атрибуте content - содержимое.

• Копируем содержимое в конструктор регулярных выражений с помощью одноимённой кнопки. На основе анализа из предыдущего шага создаём регулярку - (?<=<meta\ property=)"([a-z:]+)"\s+content="(.*?)"(?=>)

• С помощью экшена Обработка текста и его действия Regex достаём из кода страницы нужные нам значения и сохраняем в таблицу:

   

Небольшие пояснения к скриншоту:

• {-Page.Dom-} - в данной переменной хранится DOM вкладки. Для исходного кода - это{-Page.Source-},для текста - {-Page.Text-}. В окне переменных можно найти и другие.

• Почему был исключён столбец под номером ноль? В регулярном выражении была использована скобочная группировка ( (?<=<meta\ property=)"([a-z:]+)"\s+content="(.*?)"(?=>) - две группы выделены красным ). При тестировании в конструкторе регулярных выражений , перейдя на вкладку Группы, Вы заметите, что было найдено три группы, несмотря на то, что у нас их две: в самой первой группе находится текст полного совпадения, а дальше уже следуют группы, которые были определены. А т.к. нумерация начинается с нуля, мы исключаем именно столбец с номер 0, а не 1.

Полезные ссылки

• Тестер регулярных выражений

• XPath

• Обработка текста

• 💻Окно браузера