Зарегистрируйтесь для доступа к 15+ бесплатным курсам по программированию с тренажером

HTTP-запросы в браузере HTTP API

Проще всего увидеть использование HTTP API прямо в браузере. Для удобства разработки и тестирования браузеры включают в себя панель разработчика — с ее помощью можно полностью проанализировать страницу, происходящие внутри процессы и HTTP-запросы.

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

Чтобы открыть панель разработчика у себя в браузере, воспользуйтесь статьей. В этом курсе мы будем пользоваться панелью браузера Chrome:

Панель Разработчика Chrome

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

Chrome DevTools

Здесь нас интересует вкладка Network. На ней отображаются все запросы, которые выполняет браузер в процессе загрузки страницы. Также здесь показаны картинки, шрифты, файлы стилей, JavaScript и HTML самой страницы:

Вкладка Сеть во время загрузки Code Basics

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

Загрузка HTML для Code Basics

В этой же вкладке появляются запросы к HTTP API, которые выполняются на странице, использующей API.

Чтобы отделить запросы к HTTP API от всего остального, на вкладке Network нужно нажать кнопку Fetch/XHR. Тогда в списке загружаемых ресурсов останутся ресурсы с типом xhr. Это и есть запросы к HTTP API.

Возьмем для примера форму входа. Когда пользователь авторизуется на сайте, то сайт выполняет запрос (или несколько запросов) к API. Можете самостоятельно проверить, как это работает:

  1. Перейдите на сайт https://frontend-chat-ru.hexlet.app/
  2. Откройте панель разработчика, перейдите на вкладку Network и нажмите Fetch/XHR
  3. Введите данные для входа: имя admin и пароль admin
  4. Изучите запросы, посмотрите на URL, HTTP-заголовки, HTTP-метод, код ответа и отправленные данные — тело запроса

Точно таким же образом можно изучать любой сайт.


Самостоятельная работа

Зайдите на Code-Basics. Перейдите в любое упражнение и изучите, какой запрос отправляется к API при нажатии на кнопку «Проверить».

Если все сделано верно, то в DevTools вы увидите, какой запрос выполняется при проверке решения.


Дополнительные материалы

  1. 7 полезных функций DevTools для тестировщиков

Аватары экспертов Хекслета

Остались вопросы? Задайте их в разделе «Обсуждение»

Вам ответят команда поддержки Хекслета или другие студенты

Об обучении на Хекслете

Для полного доступа к курсу нужен базовый план

Базовый план откроет полный доступ ко всем курсам, упражнениям и урокам Хекслета, проектам и пожизненный доступ к теории пройденных уроков. Подписку можно отменить в любой момент.

Получить доступ
1000
упражнений
2000+
часов теории
3200
тестов

Открыть доступ

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

  • 130 курсов, 2000+ часов теории
  • 1000 практических заданий в браузере
  • 360 000 студентов
Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»

Наши выпускники работают в компаниях:

Логотип компании Альфа Банк
Логотип компании Aviasales
Логотип компании Yandex
Логотип компании Tinkoff
Рекомендуемые программы
профессия
от 6 300 ₽ в месяц
Разработка фронтенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Django
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 183 ₽ в месяц
Ручное тестирование веб-приложений
4 месяца
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка приложений на языке Java
10 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка веб-приложений на Laravel
10 месяцев
с нуля
Старт 4 апреля
профессия
от 9 900 ₽ в месяц
Разработка фронтенд- и бэкенд-компонентов для веб-приложений
16 месяцев
с нуля
Старт 4 апреля
профессия
от 6 300 ₽ в месяц
Разработка бэкенд-компонентов для веб-приложений
10 месяцев
с нуля
Старт 4 апреля
профессия
новый
Автоматизированное тестирование веб-приложений на JavaScript
8 месяцев
c опытом
в разработке
Старт 4 апреля

Используйте Хекслет по-максимуму!

  • Задавайте вопросы по уроку
  • Проверяйте знания в квизах
  • Проходите практику прямо в браузере
  • Отслеживайте свой прогресс

Зарегистрируйтесь или войдите в свой аккаунт

Отправляя форму, вы принимаете «Соглашение об обработке персональных данных» и условия «Оферты», а также соглашаетесь с «Условиями использования»