← Все статьи

Окна во фронтенде

Сетевая панель без DevTools — вкладка Network в JustZix

16 мая 2026 · автор JustZix Team

У панели Network в DevTools есть один упрямый изъян: она записывает только пока открыта. Обнови страницу, забудь открыть её заранее — и нужный тебе запрос пропал. У Output Console в JustZix есть вкладка Network, которая живёт внутри страницы, перехватывает трафик через chrome.webRequest и держит фоновый буфер — так что она видит запросы, которые сработали до того, как ты открыл окно. Вот как она работает и где её место.

Как работает перехват: chrome.webRequest

Вкладка Network не подцепляет fetch или XMLHttpRequest в коде страницы. Она использует chrome.webRequest — API уровня браузера, к которому расширение подключается через разрешение webRequest в манифесте. Это значит, что она наблюдает запросы на уровне браузера, в том же месте, где это делает сетевой стек.

Практическое следствие — главная фишка: фоновый буфер. Расширение ведёт текущую запись запросов для вкладки. Когда ты открываешь Output Console, вкладка Network уже заполнена тем, что произошло до того, как ты туда попал. Никаких танцев «обнови, чтобы перехватить».

Открытие вкладки Network

Открой Output Console из меню плавающей кнопки JustZix или как TEMP-окно сочетанием Ctrl+Alt+K, затем переключись на вкладку Network. Её бейдж показывает живой счётчик запросов. Благодаря буферу список не пуст даже на странице, которую ты загрузил несколько минут назад.

Что означает каждая колонка

Каждый перехваченный запрос — это одна строка. Колонки:

Method, status и URL говорят тебе, что произошло. Size и duration говорят, насколько это было дорого. Remote address и Initiator говорят, куда это ушло и кто это начал — две колонки, которые важнее всего, когда ты охотишься за запросом, который написал не сам.

Контекстная панель фильтров — три ряда

Панель фильтров в Output Console контекстная; на вкладке Network она разворачивается в три ряда элементов управления:

1. Тип ресурса — ряд чекбоксов: document, script, stylesheet, image, xhr/fetch, font и другие. Сними галочки с типов, которые тебе не интересны. Отлаживаешь API? Оставь только xhr/fetch — и шум картинок и шрифтов исчезнет.
2. Класс HTTP-статуса — ряд чекбоксов по классам: 2xx, 3xx, 4xx, 5xx. Сними галочки с 2xx и 3xx, чтобы видеть только сбои.
3. Размер + длительность + домен — два ползунка диапазона (0–100000, длительность в миллисекундах) плюс поле фильтра по домену.

У рядов чекбоксов есть ярлыки выбрать всё / снять всё, так что ты можешь снять всё и отметить один нужный тип — или наоборот — не прокликивая десяток чекбоксов вручную.

Ползунки и фильтр по домену

Ползунки диапазона превращают расплывчатое подозрение в точный запрос:

• Ползунок длительности — задай минимум, и выживут только медленные запросы. Подтяни его до 2000 мс — и у тебя список всего, что заняло дольше двух секунд.
• Ползунок размера — та же идея для байтов. Задай нижний порог, и негабаритные полезные нагрузки — неоптимизированная hero-картинка, JSON-блоб на 400 КБ — всплывают наверх.
• Фильтр по домену — набери фрагмент домена, чтобы оставить только запросы к этому хосту. Набери google-analytics или doubleclick — и ты смотришь ровно на тот сторонний трафик, который хотел проверить.

Всё это складывается с всегда видимым полем поиска под панелью фильтров — живым фильтром по подстроке без учёта регистра по строкам. Esc очищает поиск.

Сценарий 1 — отладка вызовов API

Сними галочки в ряду типов ресурсов, отметь только xhr/fetch. Теперь вкладка Network — это лишь API-трафик твоего приложения: ни скриптов, ни картинок. Запусти действие, которое отлаживаешь, и наблюдай, как появляется запрос: метод, URL, статус, сколько он занял. Если статус неверный, ты сразу знаешь, в чём проблема — в запросе или в коде, который обрабатывает ответ.

Сценарий 2 — поиск медленных или негабаритных запросов

Подтяни ползунок длительности до порога — скажем, 1500 мс — и список схлопнется до твоих самых медленных запросов. Сделай то же с ползунком размера, чтобы вытащить тяжёлые полезные нагрузки. Два движения — и у тебя короткий список по производительности: запросы, которые реально стоит оптимизировать, отсортированные от десятков тех, что в порядке.

Сценарий 3 — обнаружение сбоев 4xx и 5xx

Это то, чего вкладка Errors сделать за тебя не может. Упавший fetch или XHR — это не JavaScript-исключение, он никогда не доходит до вкладки Errors. Чтобы найти сломанные запросы, приди на вкладку Network и сними галочки с 2xx и 3xx в ряду статусов. Останется каждый 4xx и 5xx: пропавший эндпоинт, провал авторизации, ошибка сервера. Добавь поисковый запрос, чтобы прижать один путь.

Сценарий 4 — аудит сторонних трекеров и маяков

Каждый сайт грузит вещи, о которых необязательно заявлял — аналитику, рекламные пиксели, маяки. Набери домен трекера в фильтр по домену или следи за колонкой Initiator, чтобы увидеть, какой скрипт запустил какой маяк. В сочетании с колонкой Remote address ты можешь точно сказать, куда уходят данные. Это быстрый, честный аудит приватности без какого-либо специализированного инструментария.

Честное сравнение с панелью Network в DevTools

Панель Network в DevTools мощнее — эта вкладка не притворяется иначе. Но компромиссы реальны, и они режут в обе стороны:

Решающее ограничение: chrome.webRequest даёт метаданные запроса, а не тела ответов. Если тебе нужно прочитать JSON, который вернул запрос, DevTools всё ещё твой инструмент. Если тебе нужно знать, какие запросы сработали, успешны ли они были, насколько медленными и куда ушли — включая запросы, случившиеся до того, как ты начал смотреть — вкладка Network делает это во вкладке, вообще без DevTools.

Когда что брать

• Вкладка Network — быстрая сортировка, заблокированные машины, перехват запросов, сработавших при загрузке страницы, аудит стороннего трафика, передача отладочной настройки в составе правила.
• Network в DevTools — инспектирование тел ответов, чтение заголовков, водопад тайминга, троттлинг, повтор запросов.

Они не соперники. Вкладка Network решает повседневный вопрос «что эта страница делает в сети»; DevTools решает задачу глубокого погружения.

Смотри также

• Пересобранная Output Console — разбор всех шести вкладок
• Примеры JustZix — готовые к использованию правила CSS и JS

Сетевая панель, которая перехватывает то, что было до её открытия, прямо внутри вкладки — без F12. Установи JustZix — это бесплатно, работает на Chrome 100+ и устанавливается примерно за две минуты.