Используйте инструменты разработчика Chrome для динамического парсинга веб-страниц

Как использовать ChromeDev Tools в ваших интересах

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

В этой статье мы рассмотрим процесс планирования скрипта парсинга.

В этой статье вы узнаете

  1. Чтобы понять рабочий процесс парсинга веб-страниц
  2. Как быстро проанализировать сайт на предмет извлечения данных
  3. Как использовать инструменты Chrome для парсинга веб-страниц

Понимание рабочего процесса веб-парсинга

При поиске парсинга веб-страниц следует учитывать три ключевых момента.

  1. Проверка веб-сайта
  2. Планирование требуемых данных и их селекторов / атрибутов со страницы
  3. Написание кода

В этой статье мы сосредоточимся на осмотре веб-сайта. Это первая и самая важная часть веб-скрапинга. Кроме того, об этом меньше всего говорят, поэтому вы здесь и читаете это!

1. Находятся ли данные на одной странице, на нескольких страницах или через несколько переходов по страницам?

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

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

2. Как устроен сайт? Насколько активно используется Javascript?

Знание того, как построен веб-сайт, является жизненно важной частью, которую нужно знать на ранней стадии процесса. Это часто определяет, насколько легкой или сложной будет очистка. Почти все страницы в Интернете будут использовать HTML и CSS, и в Python есть хорошие фреймворки, которые легко справляются с этим. Однако, зная, реализован ли какой-либо javascript для управления сайтом. Важно загружать новую информацию, которая может быть, а может и не быть доступной.

3. Требуется ли на странице логин?

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

4. Есть ли динамически генерируемый контент?

Под этим мы подразумеваем, достаточно ли с первого взгляда узнать, что функциональность веб-сайта интерактивна и, скорее всего, создается с помощью javascript? Чем больше интерактивности на сайте, тем сложнее разбираться.

5. Включена ли бесконечная прокрутка?

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

6. Есть ли раскрывающиеся меню?

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

7. Есть ли формы?

Формы часто используются на многих веб-сайтах либо для поиска данных, либо для входа в часть веб-сайта. HTML-форма обычно вызывает javascript для отправки данных на сервер, который аутентифицируется и отправляет вам нужную информацию. Javascript может вызывать HTTP-запросы и часто является источником изменения информации на странице без визуализации страницы. Итак, вам нужно понять, как веб-сайт это делает, существует ли API, который отвечает на HTTP-запросы, вызываемые javascript? Можно ли это использовать для получения нужной информации или ее нужно будет автоматизировать?

8. Есть ли таблицы с доступной информацией?

Посмотрим правде в глаза, таблицы - это боль! Больно создавать в HTML, но и мучительно царапать. Остерегайтесь табличных данных, у вас может возникнуть головная боль. К счастью, существуют фреймворки, которые могут быстро захватывать данные таблиц, но будьте готовы: вы не на 100% уверены, что сможете использовать эти фреймворки, и, возможно, придется вручную перебирать строки, чтобы получить нужные данные.

9. Есть ли API скрытый или нет?

Это ключевой момент при парсинге веб-сайтов с динамическим содержанием. Часто конечная точка API используется для обслуживания ответов, содержащих данные, отображаемые веб-сайтом на современных страницах. Часто это не отображается явно на веб-сайте, но, глядя на запросы, сделанные для отображения веб-сайта, мы можем узнать, существует ли API, который использует веб-сайт. Вот как работают веб-сайты, ориентированные на javascript: они отправляют HTTP-запросы на сервер, и отображаемые данные появляются на веб-сайте. Если мы сможем имитировать эти HTTP-запросы, у нас будет шанс получить те же данные. Это называется реинжинирингом HTTP-запросов.

10. Требуется ли активность браузера для очистки данных?

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

Пример парсинга веб-страниц

Итак, рассмотрев эти вопросы, давайте теперь рассмотрим пример, иллюстрирующий некоторые из этих принципов.

Вызов:

Чтобы узнать текущую температуру с сайта WeatherUnderground здесь

Так как же нам проанализировать эту страницу поближе? Ответ - Инструменты разработчика Chrome! Браузер Chrome предоставляет огромное количество способов анализа любого веб-сайта и должен быть частью любого вашего проекта по парсингу.

Анализ веб-страницы за 5 минут

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

Давайте рассмотрим вопросы по одному.

  1. Данные на одной странице или более?
    Информация на одной странице! Отлично, это делает жизнь намного проще
  2. Как устроен сайт?

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

Главный совет: отключение javascript - верный способ узнать, насколько JavaScript задействован в макете и информации веб-сайта.

Мы отключили javascript и, похоже, по-прежнему можем получить доступ ко всем нужным вам данным! Это облегчает нашу жизнь!

3. Требуется ли на сайте логин? Нет!

4. Контент создается динамически? Одним словом, наверное! Данные о температуре могут измениться, и, скорее всего, эти изменения отражаются на уровне сервера, который затем может отображаться без постоянного обновления веб-сайта. Похоже, что отключение javascript не меняет данные о температуре, но это только один снимок за раз.

5. Есть ли бесконечная прокрутка? Нет!

6. Есть ли раскрывающиеся меню? Нет!

7. Есть ли бланки? Нет!

8. Есть ли столы? Да, но мы посмотрим, как с этим справиться!

Прежде чем мы продолжим, давайте подведем итоги.

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

Теперь мы готовы посмотреть, сможем ли мы легко получить информацию.

9. Есть ли API?

Чтобы узнать, так ли это, нам нужно немного больше узнать о Chrome Dev Tools. Под каждой проверяемой страницей есть вкладка «Сеть». Здесь мы можем записывать любые входящие запросы и ответы, которые браузер делает и получает, обновляя страницу, пока открыта вкладка сети, или выполняя определенные функции на веб-сайте. Не забудьте включить вкладку сети, иначе активность не будет записана!

По экрану видно, что мы ничего не записали. Обновление страницы дает нам картинку ниже

Redbox: это обзор. Все строки отображают активность сервера.
Зеленое поле: это один запрос к серверу. Здесь отображается имя, используемый HTTP-метод и размер ответа!

В инструментах разработчика есть вкладка "XHR". Это означает запрос XML HTTP, это все, что взаимодействует с сервером, будет отфильтровано из всех запросов, сделанных с помощью браузера. Скорее всего, API будет здесь, поскольку все API взаимодействуют с серверами.

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

Здесь мы отсортировали запросы по размеру ответа. Щелкнув один-единственный запрос, мы увидим правую боковую панель с информацией заголовков HTTP-запроса и ответа, а также любыми данными, которые необходимо передать на сервер в HTTP-запросе.

Есть действительно полезная вкладка предварительного просмотра, где вы можете увидеть снимок данных. Мы сразу видим, что есть вероятность, что данные, которые нам нужны, исходят именно оттуда.

Давайте посмотрим на вкладку заголовков этого

На правой боковой панели мы видим URL-адрес запроса, мы видим, что это API api.weather.com/v2/pws/obeservations/.....

Вместе с URL-адресом передается пара параметров, включая apiKey, units, stationid,format. Обратите внимание, что мы будем использовать это позже.

Также обратите внимание, что из заголовков ответов мы видим content-type: application/json; charset=UTF-8. Это говорит нам, что ответ находится в объекте JSON! Высоко структурированные данные! Это потрясающе.

Здесь данные будут передаваться вместе с запросом. Обратите внимание на apiKey вместе с единицами измерения, идентификатором станции и форматом. Это данные, которые мы видели в URL-адресе запросов, но здесь они четко отформатированы!

Получение данных

Теперь мы могли жестко закодировать запрос, используя параметры, и потенциально получить доступ к данным. Но есть удобный веб-сайт, который устраняет это, преобразовывая команду запроса cURL и преобразуя ее в запрос python. Для этого смотрите картинку ниже.

Мы копируем «Копировать как cURL (bash)» и вставляем его на веб-сайт curl.trillworks.com

Теперь у нас есть красиво отформатированный HTTP-запрос, готовый к использованию, который мы можем скопировать в любой редактор, какой захотим. См. Ниже пример этого.

Пример кода

import requests
headers = {
    'authority': 'api.weather.com',
    'accept': 'application/json, text/plain, */*',
    'user-agent': 'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/84.0.4147.125 Safari/537.36',
    'origin': 'https://www.wunderground.com',
    'sec-fetch-site': 'cross-site',
    'sec-fetch-mode': 'cors',
    'sec-fetch-dest': 'empty',
    'referer': 'https://www.wunderground.com/calendar/gb/edinburgh',
    'accept-language': 'en-US,en;q=0.9',
    'dnt': '1',
}
params = (
    ('apiKey', '6532d6454b8aa370768e63d6ba5a832e'),
    ('units', 'e'),
    ('stationId', 'IUNITEDK517'),
    ('format', 'json'),
)
response = requests.get('https://api.weather.com/v2/pws/observations/current', headers=headers, params=params)

Обратите внимание, что он включает не только параметры, о которых мы говорили, но и заголовки запросов. Это важная концепция, которую нужно поднять. Мы пытаемся имитировать HTTP-запрос, чтобы получить данные с веб-сайта. Теперь иногда конечной точке API требуется всего лишь простой HTTP-запрос Get. Но в других случаях требуется гораздо больше, иногда требуются заголовки, включая пользовательский агент или файлы cookie. Иногда требуются параметры, как здесь.

Полезно опробовать HTTP-запрос в python без заголовков и с тем, чтобы увидеть, требуется ли им эта информация для получения нужных вам данных. После игры вы увидите, что на самом деле все, что требуется, - это параметры.

import requests
params = (
    ('apiKey', '6532d6454b8aa370768e63d6ba5a832e'),
    ('units', 'e'),
    ('stationId', 'IUNITEDK517'),
    ('format', 'json'),
)
response = requests.get('https://api.weather.com/v2/pws/observations/current', params=params)
response.json()

Примечания

  1. Используя requests.get() метод, мы делаем HTTP-запрос на получение
  2. Внутри get() метод позволяет передавать параметры вместе с телом запроса. В этом случае мы хотим конкретно указать apiKey и остальные параметры запроса.
  3. Это позволяет аутентифицироваться на сервере и давать нам правильный результат.
  4. response.json() преобразует объект JSON в словарь Python

Вывод

{'observations': [{'stationID': 'IUNITEDK517',
   'obsTimeUtc': '2020-08-28T08:54:16Z',
   'obsTimeLocal': '2020-08-28 09:54:16',
   'neighborhood': 'Edinburgh',
   'softwareType': 'N23DQ V2.2.2',
   'country': 'GB',
   'solarRadiation': 123.3,
   'lon': -3.210205,
   'realtimeFrequency': None,
   'epoch': 1598604856,
   'lat': 55.943665,
   'uv': 1.0,
   'winddir': 79,
   'humidity': 84,
   'qcStatus': 1,
   'imperial': {'temp': 54,
    'heatIndex': 54,
    'dewpt': 49,
    'windChill': 54,
    'windSpeed': 7,
    'windGust': 12,
    'pressure': 29.68,
    'precipRate': 0.0,
    'precipTotal': 0.0,
    'elev': 243}}]}

Теперь, глядя на словарь Python, который мы только что создали, мы видим, что на самом деле данные, которые нам требуются, находятся за ключом с именем observations. Значение наблюдения - это список с одним элементом, поэтому для получения значений из словаря нам нужно выбрать этот элемент observations[0]

В этом списке элемент - это ключ с именем imperial, в который также вложен ключ с именем temp. Много вложений, но это природа объектов JSON!

Чтобы получить доступ к нужным нам данным, мы переходим к нужному нам ключу.

response.json()['observations'][0]['imperial']['temp']

Вывод

54

Перемещаясь по этому словарю, мы теперь можем опубликовать последний фрагмент кода.

import requests
params = (
 ('apiKey', '6532d6454b8aa370768e63d6ba5a832e'),
 ('geocode', '55.95,-3.37'),
 ('language', 'en-US'),
 ('units', 'e'),
 ('format', 'json'),
)
response = requests.get('https://api.weather.com/v3/wx/forecast/daily/15day', params=params)
response = requests.get('https://api.weather.com/v3/wx/forecast/daily/15day', params=params)
temp = response.json()['observations'][0]['imperial']['temp']
print('Temperature: ', temp)

Вывод

Temperature:  52

Резюме

В этом руководстве мы узнали об эффективном рабочем процессе парсинга веб-страниц, а также о вопросах, которые мы должны задавать по каждому проекту парсинга. Мы также узнали, как получить динамические данные с помощью конечной точки API. Эти API-интерфейсы часто не указываются явно и требуют использования Chrome Dev Tools, чтобы понять, как имитировать запросы, которые вызывает Javascript. Сеть в Chrome Dev Tools хорошо подходит для предоставления нам всей информации, необходимой для выполнения правильного HTTP-запроса.

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

об авторе

Я практикующий врач и педагог, а также веб-разработчик.

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

Буду благодарен за любые комментарии, если вы хотите сотрудничать или вам нужна помощь с python, пожалуйста, свяжитесь с нами. Если вы хотите связаться со мной, пожалуйста, сделайте это здесь [email protected] или в twitter.

Статьи по Теме



Подход к изучению Python
Как получить максимальную отдачу от изучения Python сегодня в сторонуdatascience.com





Как запустить Scrapy из скрипта
Забудьте о фреймворке scrapy и напишите все это в скрипте Python, который использует scrapy todatascience.com





Эффективный парсинг с помощью Scrapy
Новые функции Scrapy, повышающие эффективность парсинга в сторонуdatascience.com