Инструменты отладки

Незавершённые запросы

Запросы в процессе выполнения появляются немедленно как живая строка с анимированным спиннером. Когда приходит ответ, запись обновляется на месте — без дублирующихся строк, точно как во вкладке Network браузера.

Незавершённые записи исключаются из экспорта HAR и waterfall-таймлайна.

Сравнение сессий

Вкладка Compare позволяет загрузить два HAR-файла и увидеть мгновенный дифф записанных сессий.

Session A (before.har)            Session B (after.har)
──────────────────────────────────────────────────────
= GET  /api/users      200 42ms   = GET  /api/users     200  87ms  +45ms
~ POST /api/orders     200 130ms  ~ POST /api/orders     500        ← changed
+ GET  /api/products                + GET  /api/products   200 55ms   added
- DELETE /api/cart     204 18ms                                      removed

Сопоставление выполняется по составному ключу METHOD URL. Для записей, присутствующих в обеих сессиях, инструмент сравнивает HTTP-статус, длительность и размер ответа — разница более 20% помечается как изменённая.

Чипы фильтров над списком позволяют показывать только Added, Removed, Changed или Unchanged записи. Каждая сторона показывает имя файла сессии и количество записей в заголовке столбца.

Поддерживаются как перетаскивание файлов, так и выбор кликом. HAR-файлы, экспортированные самим плагином, принимаются напрямую.

Просмотр диффа

Кликните кнопку Group в заголовке, чтобы войти в режим диффа. Каждая строка лога получает кнопку выбора для диффа. Выберите ровно две записи — панель диффа откроется автоматически над списком логов и покажет:

• Изменённые заголовки запроса и ответа
• Построчный дифф тела запроса
• Построчный дифф тела ответа

Waterfall-таймлайн

Переключитесь на вкладку Timeline, чтобы увидеть все завершённые запросы как горизонтальные полосы на общей временной оси. Полосы цветокодированы по результату (зелёный = 2xx, жёлтый = 4xx, красный = 5xx, фиолетовый = WebSocket, бирюзовый = SSE). Наведите на полосу, чтобы увидеть точную длительность.

Группировка

Переключите кнопку Group в заголовке, чтобы свернуть все запросы к одному URL+методу в одну строку, показывающую общее количество. Разверните группу, чтобы увидеть отдельные записи внутри неё.

Виртуальный скролл

Список логов рендерит не более 100 строк за раз. По мере прокрутки к низу следующие 50 строк подгружаются автоматически через sentinel-элемент IntersectionObserver. Переключение фильтров или очистка логов сбрасывает счётчик обратно к 100. Это удерживает размер DOM ограниченным даже при захвате тысяч запросов.

Подсветка URL

Пока активен фильтр URL, совпавшая подстрока (или захват regex) подсвечивается прямо в строке списка логов янтарным акцентом. Режим regex (regex:pattern) также поддерживается.

Копирование как cURL

Откройте детальный вид любого HTTP-запроса и кликните cURL, чтобы скопировать весь запрос как команду curl в буфер обмена. Команда включает метод, все неизбыточные заголовки и тело запроса. Распространённые внутренние заголовки (host, content-length, transfer-encoding, connection, keep-alive) исключаются автоматически.

Повтор с редактированием

Кликните Replay в детальном виде HTTP-запроса, чтобы открыть модальное окно Edit & Replay. Перед отправкой можно изменить URL, HTTP-метод, добавить или удалить отдельные заголовки и отредактировать JSON-тело. Невалидный JSON подсвечивается предупреждением. Ответ захватывается перехватчиком и появляется как новая запись лога, так что вы можете сравнить его с оригиналом через режим Diff.

Троттлинг сети

Симулируйте медленные или ненадёжные соединения через селектор троттлинга в панели инструментов Logs:

Пресет	Добавленная задержка
No throttle	0 мс
Fast 3G	400 мс
Slow 3G	2 000 мс
Offline-ish	5 000 мс

Задержка применяется на каждый запрос через геттер, который перехватчик считывает непосредственно перед каждым вызовом — переключение пресетов вступает в силу на следующем запросе без перезапуска или перерегистрации перехватчиков.

Определение GraphQL

Когда POST-запрос содержит JSON-тело с полем-строкой query, дашборд автоматически трактует его как GraphQL-операцию. Фиолетовый бейдж с именем операции появляется в строке списка логов:

[POST] /graphql  [query GetUser]  200  142ms

Развёрнутый детальный вид получает секцию GraphQL, показывающую:

• Тип операции (query, mutation или subscription)
• Имя операции (из строки запроса или поля operationName)
• Переменные (разобранные из body.variables)

Внешняя библиотека GraphQL не требуется.

Определение N+1

Если больше одного запроса с одинаковым HTTP-методом и URL появляется в 5-секундном окне, оранжевый бейдж ×N показывается на каждой совпадающей строке в списке логов. Счётчик обновляется реактивно по мере поступления или выхода запросов из окна — таймеры или поллинг не используются.

Это упрощает обнаружение паттернов N+1, таких как компонент списка, отправляющий один детальный запрос на каждый элемент.

Точки останова

Точки останова приостанавливают исходящие запросы перед отправкой, позволяя изучить и изменить каждое поле — а затем решить, отпустить или отменить.

┌─────────────────────────────────────────────────┐
│ ● POST  /api/checkout            14:32:07       │
│                                                   │
│ URL      [https://api.example/checkout]           │
│ Method   [POST                  ]                 │
│ Headers  Authorization: Bearer eyJ...             │
│          Content-Type: application/json           │
│ Body     { "items": [{ "id": 1 }] }               │
│                                                   │
│  [Cancel request]                   [▶ Release]   │
└─────────────────────────────────────────────────┘

Добавление правил программно:

const dashboard = useNetworkDashboard()

dashboard.addBreakpointRule({
  urlPattern: '/api/checkout', // подстрока или /regex/
  method: 'POST', // опустите для совпадения с любым методом
  name: 'Pause checkout',
  enabled: true,
})

Управление приостановленными запросами:

// Отпустить с опциональными правками (url, method, headers, body)
dashboard.releaseBreakpoint(id, { url, method, headers, body })

// Отменить — выбрасывает AbortError в вызывающем коде
dashboard.cancelBreakpoint(id)

Реактивное состояние:

const { breakpointRules, activeBreakpoints } = useNetworkDashboard()
// breakpointRules — Ref<BreakpointRule[]>
// activeBreakpoints — Ref<ActiveBreakpoint[]> (текущие приостановленные)

Число приостановленных запросов показывается как бейдж на вкладке Breakpoints. Правила можно добавлять, редактировать (инлайн, заменяя строку), переключать и удалять из UI.

Импорт HAR

Кликните Import в заголовке панели, чтобы загрузить файл .har. Импортированные записи отображаются с теми же фильтрами и детальным видом, что и живой трафик. Баннер вверху панели показывает имя файла и количество записей; кликните ×, чтобы закрыть и вернуться в живой режим.

┌─────────────────────────────────────────┐
│  ↑ Imported session  my-session.har     │
│    247 entries                      ×   │
└─────────────────────────────────────────┘

Сохранение фильтров

Активное состояние фильтров (URL, тело, метод, статус, тип, порог длительности и переключатели) автоматически сохраняется в sessionStorage под ключом vue-network-dashboard:filters. При следующей загрузке страницы фильтры восстанавливаются без какой-либо настройки. Клик по Reset очищает как состояние UI, так и сохранённое значение.

Фильтр сообщений WebSocket

Когда активна вкладка типа WS, в панели фильтров появляется переключатель Messages only. Его включение скрывает события connection, open, error и close и показывает только записи message — полезно для высокочастотных соединений, где шум жизненного цикла иначе заглушал бы реальные фреймы данных.

Спарклайн трафика

Вкладка Statistics отображает живой SVG-спарклайн вверху панели, показывающий объём запросов во времени. Запросы разбиваются на 5-секундные интервалы за последние ~3 минуты (40 бакетов). Диаграмма перерисовывается автоматически при изменении размера панели или переключении в полноэкранный режим. Пиковое значение (запросов на бакет) показывается в заголовке секции.