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

06.08.21

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

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

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

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

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

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

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

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

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

См. также

SALE! 20%

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

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

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

13000 10400 руб.

02.09.2020    121569    670    389    

710

SALE! 25%

Infostart PrintWizard

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

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

18000 15300 руб.

06.10.2023    7257    21    6    

39

SALE! 20%

Infostart УДиФ: Управление данными и формами

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

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

10000 8000 руб.

10.11.2023    3492    11    1    

33

SALE! 30%

PowerTools

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

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

3600 2520 руб.

14.01.2013    177720    1073    0    

849

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

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

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

5000 руб.

07.02.2018    99336    239    97    

296

[ЕХТ] Фреймворк для Расширений 1С

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

"Фреймворк для Расширений 1С" это универсальное и многофункциональное решение, упрощающее разработку и поддержку создаваемых Расширений. Поставляется в виде комплекта из нескольких Расширений с открытым исходным кодом. Работает в любых Конфигурациях в режиме Управляемого приложения с режимом совместимости 8.3.12 и выше без необходимости внесения изменений в Конфигурацию.

3000 руб.

27.08.2019    18097    6    8    

39

1С HTML Шаблоны / HTML Templates

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

Быстрая и удобная обработка для работы с шаблонами HTML. Позволяет легко и быстро формировать код HTML.

2040 руб.

27.12.2017    28089    3    10    

15

Выполнение произвольного кода или запроса с параметрами через Web-сервис (замена COM-подключений)

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

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

2400 руб.

24.09.2019    23592    15    15    

32
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. SerVer1C 748 06.08.21 09:06 Сейчас в теме
"веб-гнезда"... Однако....
nekit_rdx; a_a_burlakov; rpgshnik; andy23; Steelvan; +5 Ответить
3. ixijixi 1775 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 748 06.08.21 09:09 Сейчас в теме
А в чем отличие данного подхода от разбора структуры DOM ? Вы же здесь тоже жестко привязаны к классам (тэгам).
4. Steelvan 302 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 302 18.07.22 19:54 Сейчас в теме
(8) Просьба писать в личку учетки.
Комменты здесь не отслеживаю.

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