Network Monitor перехватывает и отображает каждый сетевой запрос текущей страницы — вызовы XHR/Fetch API, загрузку скриптов, получение стилей, загрузку изображений, файлов шрифтов и многое другое. Смотрите URL, HTTP-методы, коды статусов, размеры ответов и временны́е показатели — всё в обновляемой в реальном времени плавающей панели, не открывая DevTools браузера.
Вкладка Network в Chrome DevTools мощная, но громоздкая — она занимает много места на экране, сбрасывается при навигации и вынуждает переключаться от содержимого страницы. Network Monitor предоставляет основные функции мониторинга сети в лёгкой плавающей панели поверх страницы. Инструмент перехватывает XHR и Fetch-запросы и отслеживает загрузку ресурсов через Performance API, отображая каждый сетевой запрос по мере его поступления. Для каждого запроса показываются: URL, HTTP-метод (GET, POST, PUT, DELETE), код статуса (цветовая маркировка: зелёный для 2xx, жёлтый для 3xx, красный для 4xx/5xx), размер ответа в байтах и продолжительность в миллисекундах. Нажмите на любой запрос, чтобы раскрыть подробности: заголовки запроса, заголовки ответа, тело запроса (для POST/PUT), предпросмотр тела ответа и разбивку по времени. Фильтруйте по типу (XHR/Fetch, JS, CSS, изображения, шрифты) для фокусировки на конкретном трафике.
Каждый сетевой запрос появляется в панели по мере поступления — загрузка страницы, вызовы API, ресурсы с отложенной загрузкой и фоновые запросы fetch. Лента обновляется в реальном времени без ручного обновления.
Нажмите на любой запрос, чтобы увидеть полные сведения: URL, метод, заголовки, тело запроса (для POST/PUT), заголовки ответа, предпросмотр тела ответа (JSON автоматически форматируется), код статуса, размер и разбивку по времени.
Фильтруйте запросы по типу: XHR/Fetch (вызовы API), JS (скрипты), CSS (стили), IMG (изображения), Font (веб-шрифты) или Все. Изолируйте API-трафик от загрузки ресурсов, чтобы сосредоточиться на важном.
Коды статусов выделены цветом для мгновенного распознавания: зелёный для 2xx (успех), жёлтый для 3xx (перенаправления), красный для 4xx (ошибки клиента) и 5xx (ошибки сервера). Неудачные запросы сразу бросаются в глаза.
Для каждого запроса отображаются размер ответа (в KB) и общая продолжительность (в миллисекундах). Выявляйте медленные вызовы API, слишком большие ресурсы и лишние запросы, влияющие на производительность страницы.
Сводная строка показывает общее количество запросов и суммарный размер всех перехваченных запросов. Фильтруйте сводку, чтобы видеть итоги по типу — какой объём трафика приходится на скрипты, изображения или вызовы API.
Наблюдайте за XHR/Fetch-запросами, чтобы убедиться, что фронтенд обращается к правильным API-эндпоинтам с нужными параметрами. Нажмите, чтобы проверить тела запросов и ответов — мгновенно выявляйте несоответствия форматов данных.
Красные записи 404 и 500 сразу указывают на сломанные ресурсы или неработающие вызовы API. Видно, какие URL завершаются ошибкой, когда именно и какой ответ возвращает сервер.
Сортируйте по продолжительности, чтобы найти самые медленные запросы. Сортируйте по размеру, чтобы найти самые тяжёлые ресурсы. Сводные итоги показывают полную картину трафика — делает ли страница слишком много запросов или загружает слишком много данных?
Видно, какие сетевые запросы страница делает в фоновом режиме — пинги аналитики, heartbeat-вызовы, polling-запросы, ресурсы с отложенной загрузкой. Полная картина сетевой активности за пределами того, что видит пользователь.
Фильтруйте запросы и проверяйте, с какими доменами происходит обращение. Выявляйте сторонние скрипты, делающие неожиданные сетевые запросы — пиксели отслеживания, сбор данных или внешние вызовы API, о которых вы не знали.
Откройте плавающую панель DevSuite Pro и нажмите иконку Network Monitor. Откроется панель, которая немедленно начнёт перехватывать сетевые запросы.
Пользуйтесь страницей в обычном режиме. Каждый сетевой запрос появляется в ленте по мере его выполнения — вызовы API, загрузка ресурсов и фоновые запросы fetch — всё фиксируется.
Нажимайте фильтры по типу (XHR, JS, CSS, IMG, Font), чтобы сузить область просмотра. Показывайте только вызовы API для отладки получения данных или только изображения для проверки загрузки ресурсов.
Нажмите на любую строку запроса, чтобы раскрыть подробности: URL, заголовки, тело запроса, тело ответа, код статуса, размер и временны́е показатели.
Красные коды статусов (404, 500) указывают на неудачные запросы. Большая продолжительность сигнализирует об узких местах производительности. Большой размер говорит о ресурсах, требующих оптимизации.
Установите DevSuite Pro бесплатно и разблокируйте более 39 инструментов разработчика для вашего браузера.
