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

Owned by Slava Obrezkov (Unlicensed)
Last updated: Dec 26, 2021 by ZL Support
3 min read

Оглавление

Описание

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

В чём разница между DOM и исходным кодом страницы Вы можете прочитать в заметке Разница между Source и DOM

Если Вы работаете на движке Chrome, то в качестве альтернативы можете использовать инструменты web-разработчика

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

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

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

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

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

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

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

Тут необходимо выбрать, что Вы хотите просматривать: 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.

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