Встроенный UI-компонент

Плагин поставляется с готовой к продакшену панелью отладчика. Добавьте её один раз в корневой layout, и она появится как плавающий оверлей:

<!-- App.vue -->
<script setup>
import { NetworkDebugger } from 'vue-network-dashboard'
</script>

<template>
  <RouterView />
  <NetworkDebugger />
</template>

Панель включает:

• Панель фильтров — фильтрация по типу (HTTP / WS / SSE), URL, телу (оба поддерживают regex:pattern), HTTP-методу, коду статуса, маршруту, минимальной длительности, переключателю «только ошибки» и (когда активен тип WS) переключателю «только сообщения»
• Подсветка URL — активный фильтр URL подсвечивает совпавший фрагмент прямо в списке логов
• Сохранение фильтров — фильтры сохраняются в sessionStorage и восстанавливаются при следующей загрузке
• Список логов — виртуальный скролл (по 100 строк за раз); цветокодированные записи с раскрываемым детальным видом (вкладки Request / Response / Meta); вкладка Meta показывает маршрут Vue Router, если он доступен
• Копирование как cURL — копирование одним кликом любого HTTP-запроса как команды curl из панели деталей
• Повтор — повторная отправка любого HTTP-запроса из панели деталей; ответ появляется как новая запись лога
• Панель статистики — живой спарклайн трафика, счётчики запросов, доля ошибок, средняя длительность, объём передачи данных, распределение по методам/статусам, самые медленные и самые крупные запросы
• Импорт HAR — загрузка файла .har для просмотра записанной сессии; баннер указывает режим импорта с кнопкой закрытия для возврата к живому трафику
• Модальное окно экспорта — выбор формата (JSON / CSV / HAR), фильтр по протоколу и кодам статуса, двойной слайдер временного диапазона, показывающий счётчик N / M logs перед подтверждением
• Полноэкранный режим — развернуть на весь вьюпорт; прокрутка страницы блокируется, пока режим активен; выход по кнопке или Escape
• Закрепление — закрепить панель, чтобы она оставалась открытой при клике снаружи
• Перетаскивание и изменение размера — перетаскивание панели за заголовок; изменение размера с любого из 8 краёв и углов
• Кнопка-переключатель (FAB) — компактная плавающая кнопка со счётчиком запросов и индикатором ошибок, когда панель скрыта
• Клавиатурный шорткат — Ctrl+Shift+D по умолчанию (настраивается)

Пропы компонента

Проп	Тип	По умолчанию	Описание
defaultVisible	boolean	false	Открыта ли панель при монтировании
defaultPinned	boolean	false	Закреплена ли панель при монтировании
hotkey	string	'd'	Символ клавиши для шортката переключения
hotkeyModifiers	object	{ ctrl: true, shift: true }	Клавиши-модификаторы: ctrl, alt, shift, meta

Пропы действуют как значения по умолчанию на уровне компонента. Если вы настраиваете хоткеи через опцию ui плагина (см. ниже), задавать эти пропы не нужно.

Настройка хоткея

Хоткей переключения можно настроить на двух уровнях. Уровень плагина (рекомендуется) — задаётся один раз при регистрации, применяется автоматически ко всем инстансам <NetworkDebugger>:

app.use(NetworkDashboard, {
  ui: {
    hotkey: 'd',
    hotkeyModifiers: { ctrl: true, shift: true }, // Ctrl+Shift+D
  },
})

Уровень компонента — передайте пропы напрямую в компонент (переопределяет конфигурацию уровня плагина):

<NetworkDebugger hotkey="d" :hotkeyModifiers="{ ctrl: true, shift: true }" />

Панель игнорирует хоткеи, когда фокус находится внутри <input>, <textarea> или элемента с contenteditable. Когда панель закреплена, хоткей также отключён, чтобы предотвратить случайное закрытие.

Программное управление

Компонент предоставляет методы через ref:

<script setup>
import { ref } from 'vue'
import { NetworkDebugger } from 'vue-network-dashboard'

const debugger = ref()
</script>

<template>
  <NetworkDebugger ref="debugger" />
  <button @click="debugger.show()">Open</button>
  <button @click="debugger.hide()">Close</button>
  <button @click="debugger.toggle()">Toggle</button>
  <button @click="debugger.clear()">Clear logs</button>
  <button @click="debugger.export('json')">Export JSON</button>
</template>