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

06.08.21

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

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

Скачать файлы

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

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

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

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

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

Автоматический разборщик в своей работе опирается на 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 веб-гнезда

См. также

INFOSTART TECH EVENT 2023, 11-13 октября, Санкт-Петербург

Инструментарий разработчика Мобильная разработка DevOps и автоматизация разработки Администрирование СУБД Мероприятия Россия Платные (руб)

XIII конференция по управлению и технологиям автоматизации учета на платформе 1С:Предприятие, которая пройдет в Санкт-Петербурге и соберет 1500 участников из разных регионов России и мира.

5100 руб.

09.12.2022    30068    5    0    

406

Онлайн-интенсив "DevOps для 1С". с 4 сентября по 17 октября 2023 г.

Инструментарий разработчика DevOps и автоматизация разработки DevOps для 1С Платные (руб)

Данный онлайн-курс (интенсив) предусматривает изучение процессов, инструментов и методик DevOps, их применение при разработке на платформе 1С. 

20.06.2023    9634    0    Infostart    2    

120

SALE! %

Infostart Toolkit: Инструменты разработчика 1С 8.3 на управляемых формах

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

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

12000 10000 руб.

02.09.2020    93019    474    379    

530

SALE! 25%

PowerTools

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

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

3600 2700 руб.

14.01.2013    169992    1049    0    

789

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

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

Программист - это человек, непрерывно принимающий решения. Написание кода не является процессом принятия решения - это всего лишь трансляция ваших желаний. Если вас периодически тяготит написание сотен строк кода ради решения задач, то прошу обратить внимание. Данный продукт позволит существенно сократить время на рутинные операции при разработке. За счет библиотечной реализации сокращается объём кода, а его читаемость повышается. К библиотеке прилагается документация API и шаблоны кода для наиболее популярных методов.

4200 руб.

16.04.2021    12394    3    9    

9

Многопоточность. Универсальный «Менеджер потоков» 2.1

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

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

5000 руб.

07.02.2018    96393    233    97    

283

Менеджер конфигураций 1С

Инструментарий разработчика Платные (руб)

Менеджер конфигураций 1С — альтернативный стартер информационных баз 1С:Предприятие.

1439 руб.

21.02.2023    5183    1    33    

14

Программное формирование существующих печатных форм

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

Получение списка печатных форм, формирование выбранной печатной формы и сохранение ее в файл.

1 стартмани

17.12.2021    14030    39    RocKeR_13    5    

46
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. SerVer1C 663 06.08.21 09:06 Сейчас в теме
"веб-гнезда"... Однако....
nekit_rdx; a_a_burlakov; rpgshnik; andy23; Steelvan; +5 Ответить
3. ixijixi 1544 06.08.21 09:59 Сейчас в теме
(1) Экроснимок...
nekit_rdx; a_a_burlakov; rpgshnik; andy23; Steelvan; +5 Ответить
5. aspirator23 341 12.08.21 12:02 Сейчас в теме
(3)Жизнетрюки...
nekit_rdx; a_a_burlakov; rpgshnik; Steelvan; +4 Ответить
6. aspirator23 341 12.08.21 12:04 Сейчас в теме
(5)Экрозапись...
nekit_rdx; a_a_burlakov; rpgshnik; Steelvan; +4 Ответить
2. SerVer1C 663 06.08.21 09:09 Сейчас в теме
А в чем отличие данного подхода от разбора структуры DOM ? Вы же здесь тоже жестко привязаны к классам (тэгам).
4. Steelvan 292 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 292 18.07.22 19:54 Сейчас в теме
(8) Просьба писать в личку учетки.
Комменты здесь не отслеживаю.

Да, это возможно таким образом доработать, чтобы система опознавалась в учетке на сайте веб-магазина и перебирала список нужных заказов.
Контакты для связи на kuzkov.info
Оставьте свое сообщение