Ответ
Анализ выполняется во вкладке Network инструментов разработчика (DevTools).
Порядок действий:
- Откройте DevTools (
F12илиCtrl+Shift+I/Cmd+Opt+I). - Перейдите на вкладку Network.
- Обновите страницу (
F5) или выполните целевое действие в приложении. - Все HTTP-запросы (XHR/Fetch, документы, стили, скрипты, изображения) отобразятся в виде списка.
- Используйте фильтры (XHR, JS, Img) или поле поиска для навигации.
- Кликните на любой запрос для детального просмотра:
- Headers: Метод, URL, статус-код, request/response headers.
- Preview/Response: Тело ответа в удобном формате (JSON, HTML).
- Timing: Детальная временная диаграмма выполнения запроса.
Пример для мониторинга API-вызова:
// Выполните этот fetch в консоли DevTools
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));После выполнения запрос появится в списке. Вы можете проверить, правильно ли передались заголовки (например, Authorization), payload и корректность ответа сервера.
Совет: Используйте опцию Preserve log для сохранения запросов между переходами по страницам и Throttling для эмуляции медленных сетей.
Ответ 18+ 🔞
А, ну это же классика, блядь! Слушай, как будто вчера сам впервые в девтулзах ковырялся, ебать мои старые костыли. Ну что, поехали разбираться, как за этими сетевыми запросами подглядывать, а то они, сука, как тараканы — шныряют туда-сюда, а ты нихуя не видишь.
Вот смотри, алгоритм простой, как три копейки, но без него — пиздец.
Как это делается, по шагам:
- Открываешь инструменты. Жмешь
F12или эту комбинацию для маководов (Cmd+Opt+I). Главное — не промахнуться мимо клавиатуры. - Перескакиваешь на вкладку «Network». Там, где все запросы будут как на ладони.
- Обновляешь страницу (
F5) или начинаешь тыкать в свое приложение, чтобы оно что-то запросило. Сразу весь этот цирк — XHR'ы, фетчи, скрипты, картинки — начнет вываливаться в список. Прямо живой поток, блядь. - Чтобы не охуеть с количества, пользуйся фильтрами сверху (XHR/JS/Img). Ищешь конкретный запрос — вбиваешь кусок URL в поиск.
- Кликаешь на любой запрос — и тебе, сука, вываливается целая куча вкладок с подробностями:
- Headers: Тут всё: какой метод (GET, POST), куда ползет, статус-код (200 — красава, 404 — нихуя не нашел, 500 — сервер обосрался), и все заголовки, какие туда-обратно летят.
- Preview/Response: А вот это самое сочное. Тело ответа. Если JSON — он его красиво разложит, можно ковыряться. Если HTML — покажет разметку. Короче, что сервер тебе в итоге подсунул.
- Timing: Тайминг, блядь! Тут на диаграмме видно, сколько времени на что ушло: DNS, установка соединения, ожидание ответа... Идеально, чтобы найти, где тормозит, этот, блядь, запрос.
Вот тебе конкретный пример, как за API-вызовом подсмотреть: Допустим, ты в консоли (в той же DevTools, на вкладке Console) выполняешь такой код:
fetch('https://api.example.com/data')
.then(response => response.json())
.then(data => console.log(data));И всё! После этого беги смотреть на вкладку Network. Там появится новый запрос на api.example.com/data. Кликаешь на него — и вуаля. Можешь проверить, улетели ли нужные заголовки (ну там, Authorization, если доступ нужен), что в теле запроса было, и что в ответ пришло. Всё прозрачно, как слеза младенца, ёпта.
И ещё пара лайфхаков, чтобы вообще богом сетевого анализа стать:
- Preserve log — эта галочка сверху. Включаешь её, и логи запросов не сбрасываются, когда ты переходишь на другую страницу. Овердохуище полезно, когда надо отследить цепочку редиректов.
- Throttling — выпадашка, тоже сверху (часто иконка как сотовый сигнал). Там можно выбрать «Slow 3G». Включаешь — и эмулируется медленное соединение. Сразу видно, какой запрос первым сдохнет или как твой интерфейс будет ебаться при плохом интернете. Тестирование, блядь, на уровне.
Вот и вся магия. Ничего сложного, но без этого — как без рук. Полезная штука, хули.