Вкладка Network. Фронт обменивается данными с бэком. Логично, что эти самые данные должны где-то отображаться. Напомню, что при первом переходе на страницу и по мере её обработки происходит отправка запросов на получение конкретных данных (картинок, стилей и т.п.). Так вот, все эти данные отображаются в хронологическом (по умолчанию) порядке именно здесь. Здесь же отображаются и запросы к конкретным ручкам, которые выполняет фронт, когда с ним взаимодействует пользователь. Вот на этом мы и остановимся подробнее!
Исследовать мы будем какой-нибудь рандомный сайт. Например, интернет-магазин металлопроката. Заходи на главную страницу https://market.severstal.com/ru/ru (не забудь открыть devtools до перехода, а то магии не произойдёт!), нажимай кнопку Каталог, затем ссылку Сортовой прокат и смотри результат. Обрати внимание, что запросов может быть ОЧЕНЬ много. Более того, некоторые необязательно могут обращаться к приложению. Например, всякие гугл-яндекс-мэйл -метрики и другая шелупонь, которая собирает о тебе данные. Или какой-нибудь пиксель (картинка размером 1x1 пиксель, полностью прозрачная) от запрещённой в РФ соц. сети. А может какие-то мерзкие эксперименты из служб аналитики. В общем, всё это необходимо отсеять по домену, чтобы сразу было понятно что относится к нашему приложению. Для этого есть поле Filter, в него можно смело вставлять endpoint до нужных ручек, хотя бы просто протокол + домен или даже часть URL, тогда читать всё это будет уже легче.
Обрати внимание, что первый запрос в списке - тот самый GET-запрос на получение страницы, с него всё начинается. Напомню: браузер получает исходный код страницы и начинает его последовательно обрабатывать. Каждая найденная ссылка на другой ресурс (скрипт, стиль, картинка) порождает следующий запрос за указанными данными и так, пока браузер не закончит загрузку. Далее начинается выполнение скриптов и последующие запросы, которые уже осуществляются этими скриптами. Всё это чаще всего происходит за доли секунды.
Можно ещё более упростить задачу чтения данных: выбрать фильтр по Fetch/XHR (API, с помощью которого выполняются сетевые запросы JavaScript'ом). По умолчанию он стоит на All, поэтому в списке есть и картинки, и стили, и скрипты, и запросы к ручкам. А нам интересны те запросы, которые делает фронт. Так, уже лучше. Количество сильно сократилось, значит уже можно что-то рассмотреть детальнее.
При переходе к каталогу с сортовым прокатом было выполнено несколько запросов: на получение списка продуктов (ручка /node/api/v1/products) и на получение баннеров (ручка /node/api/v1/banner-area).
Запрос на получение продуктов является POST-запросом несмотря на то, что это "ПОЛУЧЕНИЕ" и вместо POST- в идеале нужно было бы использовать GET. По всей видимости, эта ручка принимает довольно большое тело с данными, которые было бы проблематично отправить GET-запросом. Попробуем отфильтровать выдачу: уходит новый запрос на получение списка продуктов.
Посмотрим на вкладки, которые появляются, когда ты выбираешь запрос в списке. Первой идёт вкладка Headers (заголовки) - это техническая информация, которой обмениваются браузер с сервером (подробнее смотри в предыдущих уроках). Напомню, тут можно увидеть URL запроса, HTTP-метод, код ответа, cookies, тип содержимого и многое-многое другое. Кстати, важно: cookies отсюда можно в удобочитаемом виде найти на вкладке Application DevTools, но об этом в следующем уроке.
Далее вкладка Payload (нагрузка, тело) - те данные, которые передаются в теле запроса или в качестве URL-параметров (query-параметры). Чаще всего фронт обменивается с бэком данными в формате JSON. Соответственно, здесь мы его и видим.
Следующие две вкладки Preview и Response (ответ) - фактически одно и то же - те данные, которые возвращает бэк (отправляются сервером). Разница в том, что на Preview отображаются данные в человекочитаемом виде, а Response содержит исходные данные.
JSON можно форматировать и на вкладке Response, нажав на соответствующую кнопку.
Остановимся подробнее на данных, которыми обменивается фронт с бэком. Как я уже упоминал, взаимодействие происходит в формате JSON. Напомню, что он состоит из объектов, массивов и примитивных значений. Объекты обозначаются фигурными скобками {}, массивы - квадратными [], ну а примитивы - это строки, числа (целые, с плавающей точкой) и логические значения (true/false). Объект может содержать в себе другой объект или массив, массив может быть набором объектов и так далее. Типичный пример JSON можешь как раз увидеть при фильтрации продуктов: всё тело запроса - JSON-объект. Внутри него есть ключи (country, lang, pagination, sort, filter, category). Ключи country, lang, category содержат простые значения (примитивы - строки). Ключи pagination, filter содержат объекты, в которых у pagination в качестве значений - примитивы, а у filter значение содержит массив. Ключ sort - массив, который содержит один единственный элемент - объект.
Сравни тело запроса на получения продуктов при первом запросе и после фильтрации: во втором случае поле filter заполнено данными по выбранному филиалу.
В качестве домашнего задания можешь описать содержимое ответа при запросе баннеров на странице (ручка /node/api/v1/banner-area).
