Парсинг данных с помощью инструментов разработчика Chrome

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

В качестве примера я собираюсь спарсить факты о еде с этой веб-страницы. На этой веб-странице перечислены некоторые из самых странных и удивительных фактов о еде.

Инспектирование страницы

Щелкните правой кнопкой мыши на элементе текста, который вы хотите спарсить, и выберите Инспектировать. Откроются инструменты разработчика в разделе элементов.

Использование консоли

Щелкните многоточие (…) на левой стороне раздела элементов, перейдите к Копировать и нажмите на JS-путь.

Теперь перейдите в раздел консоли и вставьте ранее скопированный JS-путь, затем нажмите Enter. Вы увидите что-то вроде этого:

Добавьте .innerHTML, чтобы получить текстовое содержимое между тегами:

На этой странице есть 30 фактов о еде. Чтобы получить все 30 фактов, используйте следующий код и вставьте его в раздел консоли.

Array.from(document.querySelectorAll("div > div.slide-title.clearfix > h2")).map(r => r.innerHTML)

Обратите внимание, что querySelectorAll используется для выбора всех фактов, а селектор "div.slide-title.clearfix > h2". И вот результат: