Разбор сайтов с применением Chrome devtools. Примеры от kuzkov.info

06.08.21

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

Пример обработки-шаблона для веб-разбора сайтов с применением chrome devtools через веб-гнезда. Рассмотрение практического случая веб-разбора данных сайта с цитатами Пушкина. Плюсы применения обозревателя для веб-разбора перед получением и разбором голой строки html, полученной get запросом.

Скачать исходный код

Наименование Файл Версия Размер
Обработка примера
.epf 1,16Mb
26
.epf 1,16Mb 26 Скачать

Для чего нужен веб-разбор

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

В основном это нужно для последующей автоматизированной обработки собранных данных.

Например, разбор сайтов поставщиков или конкурентов для составления списка товаров и цен.

Автоматический разборщик в своей работе опирается на html разметку сайта.

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

После изменения структуры верстки, разборщика надо снова перенастраивать (обучать).

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


Почему именно chrome devtools инструменты

Выбор данного подхода был выбран по следующим причинам:

*) По роду своей деятельности (я делаю веб для 1С) мне приходится много работать с этим инструментом и мне было интересно применить этот инструмент и для других целей;

*) Это отличный повод написать публикацию из разряда "Смотри как умею" :)

Если более развернуто ответить на сей вопрос, то подходы веб-разбора, основанный на получении простой html строки стремительно уходят в прошлое.

Сейчас все больше сайтов делаются по ОСП технологии (ОдноСтраничные Приложения) и на get запрос с сервера может приехать пустая страничка с подключенным js кодом. Что здесь разбирать ?

А при работе с сайтом через devtools, мы можем прочитать уже зрительно отображенные данные, которые обозреватель уже отрисовал кодом из js скрипта.

Для тех, кто к вебу имеет отдаленное отношение, расскажу пару слов, что такое приблуды разраба (devtools).

Инструменты разраба (от враж. «development tools» или сокращённо «DevTools») ^72; это программы, позволяющие создавать, тестировать и отлаживать программное обеспечение.

Современные обозреватели, Safari, Firefox, Microsoft Edge, Chrome и другие, имеют встроенные инструменты разработчика, позволяющие просмотреть исходный код сайта.

Отдельно устанавливать их не требуется.

С их помощью можно просматривать и отлаживать HTML сайта, его CSS и Javascript. Также можно проверить сетевой трафик, потребляемый сайтом, его быстродействие и много других параметров.

Так вот через эти приблуды можно управлять обозревателем извне:

*) Подключиться к обозревателю;

*) Оправить команду перехода на сайт;

*) Отправить команду поиска определенного элемента;

*) Получить html содержимое определенного элемента;

*) Отправить команду закрытия обозревателя;

Все управление выполняется через веб-гнезда. Для этого закрываем обозреватель и заново запускаем его с ключами командной строки. Запущенный обозреватель поднимает внутри себя сервер веб-гнезд и готов принимать подключения и выполнять команды. Ничего сложного (хе-хе, пока разберешься до уровня "ничего сложного" пуд соли скушаешь).

Более подробно описано на сайте https://chromedevtools.github.io/devtools-protocol/

Плюс можно посмотреть в коде приложенной обработки как оно работает на практике.

Мною выполнено несколько проектов на этой обработке. Например, https://youtu.be/hGplfrx4ubM

Структура обработки-шаблона

Итак, лирическое вводное отступление прошли и переходим к практике. Начнем с устройства обработки.

Обработка содержит в себе следующие блоки:

*) Подготовку набора адресов страничек, которые будем разбирать;

*) Запуск обозревателя;

*) Подключение родной компоненты для общения с обозревателем через веб-гнезда (компонента встроена);

*) Проход по каждой строке набора страничек;

*) Отправка команды обозревателю для перехода на целевой адрес в новой вкладке.

*) Выполнение команд: щелчки на элементах сайта, поиск определенных элементов структуры, передача 1С данных в виде html строки для разбора;

*) Преобразование сырых html данных в тз сырых данных;

*) Создание итоговой тз нужного формата и заполнение строк из тз с сырыми данными;

*) Обработка тз с итоговыми данными (запись в базу);

*) Закрытие обозревателя;

Обработка предназначена для запуска из регламентного задания. На форму обработки прокинута только одна кнопка для возможности ручного запуска. При этом весь код выполняется полностью на сервере.

Это надо учитывать, если вы запустите обработку в серверной базе и не увидите результата :)

Применение обработки для получения списка цитат

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

 


[Экрозапись1. Запуск двух вкладок обозревателя и закрытие]

Открываем обработку и нажимаем кнопку запуска. Зрительно мы видим следующие действия:

*) Запустился обозреватель;

*) Запустились по очереди две вкладки;

*) Закрылся обозреватель;

Далее по очереди разберем каждое действие.

Запуск обозревателя

Запуск обозревателя должен выполняться на порту 9222 (по умолчанию). При запуске должен подняться сервер, который мы и проверяем в трех попытках через каждые три секунды. Если обозреватель поднялся и отвечает, то ага и продолжаем дальше.

 


[Экроснимок2. Запуск обозревателя на порту по умолчанию]

Открытие вкладки с целью разбора

Следующим шагом мы должны открыть целевую страничку на новой вкладке и подключиться к этой вкладке. Для этого мы должны сделать запрос к обозревателю с указанием команды "/json/new?" и адреса загружаемой цели.

 


[Экроснимок3. Загрузка цели в новой вкладке]

В ответ обозреватель должен нам  вернуть через ключ "webSocketDebuggerUrl" адрес вкладки для управления.
В момент открытия вкладки, обозреватель как раз и выполняет построение структуры сайта. И нам уже без разницы, это ОСП сайт или статичная верстка.

Получение строки html с данными

 


[Экроснимок4. Выполнение запросов к вкладке по адресу]

Зная адрес веб-гнезда вкладки из прошлого шага, мы можем отправлять команды обозревателю, которые будут применены именно к этой вкладке. Для наших целей мы будем выполнять синхронные запросы для получения строки html с сырыми исходными данными.


Разбор html строки в тз с сырыми данными

Разбирать html строку мы будем в промежуточную таблицу следующей структуры.

 


[Экроснимок5. Структура тз сырых данных]

Данная структура позволит нам разобрать дерево html в плоский вид, а потом перебрать строки и, ориентуясь на классы, сделать тз с итоговыми данными.

 


[Экроснимок6. ТЗ сырых данных]

 

Формирование итоговой ТЗ с затребованной структурой данных

В данном примере мы хотим получить табличку с данными о авторе цитаты, саму цитату и оценку цитаты.

Для этого мы перебираем строки, ориентуясь на классы.

 


[Экроснимок8. Алгоритм разбора тз сырых данных]

В итоге мы получаем желаемый результат.

 


[Экроснимок9. Итоговый результат]


Автозакрытие обозревателя

Автозакрытие должно быть вызвано последней командой.

 


[Экроснимок7. Закрытие обозревателя]


На этом веб-разбор можно считать выполненным.

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

Если будут некоторые вопросы по обработке, смело обращайтесь, постараюсь помочь !

---

Данная публикация написана благодаря поддержке компании ITLand.
Лично благодарю руководителя отдела разработки за своевременные и грамотные ответы на мои вопросы.

---

Обработка писалась и тестировалась на версии 8.3.10.

разбор парсинг веб-разбор обозреватель браузер Кузьков kuzkov.info веб-гнезда

См. также.

Инструментарий разработчика Роли и права Запросы СКД Программист Платформа 1С v8.3 Управляемые формы Запросы Система компоновки данных Конфигурации 1cv8 Платные (руб)

Набор инструментов программиста и специалиста 1С для всех конфигураций на управляемых формах. В состав входят инструменты: Консоль запросов, Консоль СКД, Консоль кода, Редактор объекта, Анализ прав доступа, Метаданные, Поиск ссылок, Сравнение объектов, Все функции, Подписки на события и др. Редактор запросов и кода с раскраской и контекстной подсказкой. Доработанный конструктор запросов тонкого клиента. Продукт хорошо оптимизирован и обладает самым широким функционалом среди всех инструментов, представленных на рынке.

10000 руб.

02.09.2020    135046    740    391    

776

Пакетная печать Печатные формы Инструментарий разработчика Программист Платформа 1С v8.3 Запросы 1С:Зарплата и кадры бюджетного учреждения 1С:Конвертация данных 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 Платные (руб)

Инструмент, позволяющий абсолютно по-новому взглянуть на процесс разработки печатных форм. Благодаря конструктору можно значительно снизить затраты времени на разработку печатных форм, повысить качество и "прозрачность" разработки, а также навести порядок в многообразии корпоративных печатных форм.

18000 руб.

06.10.2023    10628    25    6    

55

Инструментарий разработчика Программист Платформа 1С v8.3 Платные (руб)

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

5400 руб.

17.05.2024    7552    20    12    

51

Инструменты администратора БД Инструментарий разработчика Роли и права Программист Платформа 1С v8.3 Конфигурации 1cv8 Россия Платные (руб)

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

10000 руб.

10.11.2023    6554    17    2    

42

Инструментарий разработчика Инструменты администратора БД Системный администратор Программист Платформа 1С v8.3 Управляемые формы Конфигурации 1cv8 Россия Платные (руб)

Универсальный инструмент программиста для администрирования конфигураций. Сборник наиболее часто используемых обработок под единым интерфейсом.

3600 руб.

14.01.2013    180744    1100    0    

873

Инструментарий разработчика Программист 8.3.14 1С:Конвертация данных Россия Платные (руб)

Расширение для конфигурации “Конвертация данных 3”. Добавляет подсветку синтаксиса, детальную контекстную подсказку, глобальный поиск по коду.

15000 руб.

07.10.2021    15691    3    12    

38

Инструментарий разработчика Программист Платформа 1С v8.3 Конфигурации 1cv8 Россия Платные (руб)

Восстановление партий или взаиморасчетов, расчет зарплаты, пакетное формирование документов или отчетов - теперь все это стало доступнее. * Есть желание повысить скорость работы медленных алгоритмов! Но... * Нет времени думать о реализации многопоточности? * о запуске и остановке потоков? * о поддержании потоков в рабочем состоянии? * о передаче данных в потоки и как получить ответ из потока? * об организации последовательности? Тогда ЭТО - то что надо!!!

5000 руб.

07.02.2018    100718    241    97    

300

Инструментарий разработчика Перенос данных 1C Программист Платформа 1С v8.3 Платные (руб)

В процессе работы в 1С часто возникает потребность получить данные из другой базы.  Обычно это делается через COM-соединение, и время выполнения запроса при этом оставляет желать лучшего. В данной публикации представлено универсальное решение, позволяющее практически моментально выполнить произвольный код или запрос с параметрами в другой информационной базе через Web-сервис.

2400 руб.

24.09.2019    24203    17    15    

34
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. SerVer1C 781 06.08.21 09:06 Сейчас в теме
"веб-гнезда"... Однако....
nekit_rdx; a_a_burlakov; rpgshnik; andy23; Steelvan; +5 Ответить
3. ixijixi 1825 06.08.21 09:59 Сейчас в теме
(1) Экроснимок...
nekit_rdx; a_a_burlakov; rpgshnik; andy23; Steelvan; +5 Ответить
5. aspirator23 339 12.08.21 12:02 Сейчас в теме
(3)Жизнетрюки...
nekit_rdx; a_a_burlakov; rpgshnik; Steelvan; +4 Ответить
6. aspirator23 339 12.08.21 12:04 Сейчас в теме
(5)Экрозапись...
nekit_rdx; a_a_burlakov; rpgshnik; Steelvan; +4 Ответить
2. SerVer1C 781 06.08.21 09:09 Сейчас в теме
А в чем отличие данного подхода от разбора структуры DOM ? Вы же здесь тоже жестко привязаны к классам (тэгам).
4. Steelvan 304 06.08.21 10:50 Сейчас в теме
(2)

Нет никакого отличия данного подхода от разбора структуры DOM.
Это и есть разбор dom структуры через devtools приблуды хрома и аналогичных обозревателей (edge, opera и т.п.).
7. orlin553 18.05.22 06:25 Сейчас в теме
Спасибо очень позновательно!
8. Michael7777 10.06.22 15:10 Сейчас в теме
Можно ли наладить обработку таким образом, что бы система логинилась в аккаунт на сайте интернет магазина, и по очереди (по указанному в 1С списку) перебирала список нужных заказов и после этого вставляла в 1С нужные данные о заказе (номер отправки, статус и тд)?
9. Steelvan 304 18.07.22 19:54 Сейчас в теме
(8) Просьба писать в личку учетки.
Комменты здесь не отслеживаю.

Да, это возможно таким образом доработать, чтобы система опознавалась в учетке на сайте веб-магазина и перебирала список нужных заказов.
Контакты для связи на kuzkov.info
10. user2006867 26.10.23 14:53 Сейчас в теме
Здравствуйте, подскажите пожалуйста, может кто знает, как через devtools найти нужный путь к индексу на сервере? Допустим есть класс в html который я вижу через devtools, но где он лежит на сервере, в каком индексе, как его найти? Сам путь как-то можно отследить?
Оставьте свое сообщение