API инстанса

Все методы ниже доступны на объекте, возвращаемом useNetworkDashboard(), на this.$networkDashboard в Options API, или на инстансе, возвращаемом createNetworkDashboard(). Небольшое число низкоуровневых методов (getOptions(), updateOptions(), getSize(), updateLog()) доступны только на самом классе — создайте его напрямую через new NetworkDashboard(options) (импорт из vue-network-dashboard), если они вам нужны.

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

Свойство	Тип	Описание
logs	Ref<UnifiedLogEntry[]>	Все сохранённые записи лога
totalRequests	Ref<number>	Общее число записей
totalErrors	Ref<number>	Записи, где error.occurred === true или http.status >= 400
averageDuration	Ref<number>	Средняя длительность в миллисекундах
totalDataSent	Ref<number>	Сумма request.bodySize по всем записям
totalDataReceived	Ref<number>	Сумма response.bodySize по всем записям
mockGroups	Ref<readonly MockRulesGroup[]>	Все группы моков с их правилами
breakpointRules	Ref<BreakpointRule[]>	Все настроенные правила точек останова
activeBreakpoints	Ref<ActiveBreakpoint[]>	Запросы, в данный момент приостановленные на точке останова

Методы управления

enable() // Начать захват
disable() // Остановить захват (существующие логи сохраняются)
isEnabled() // Возвращает boolean
clear() // Удалить все сохранённые логи (вызывает коллбэк onFlush)

Методы запроса

// Фильтр по типу транспорта
getLogsByType('http' | 'websocket' | 'sse'): UnifiedLogEntry[]

// Фильтр по строке URL или regex
getLogsByUrl('/api/users'): UnifiedLogEntry[]
getLogsByUrl(/^https:\/\/api\./): UnifiedLogEntry[]

// Фильтр по диапазону HTTP-статуса
getLogsByStatus([400, 599]): UnifiedLogEntry[]  // все 4xx и 5xx

// Фильтр по HTTP-методу
getLogsByMethod('POST'): UnifiedLogEntry[]

// Только неудачные записи
getErrorLogs(): UnifiedLogEntry[]

// Составной запрос с несколькими фильтрами одновременно
queryLogs({
  type: 'http',
  method: 'GET',
  url: /\/api\//,
  minDuration: 500,
  hasError: false,
}): UnifiedLogEntry[]

useLogFilter и useHotkey — автономные composable-функции, экспортируемые из корня пакета для построения собственного кастомного UI отладчика поверх сырых примитивов логов/хоткеев. Сам <NetworkDebugger> не использует ни один из них: он фильтрует свой собственный живой, дебаунсированный, сохраняемый в sessionStorage поток логов и обрабатывает свой хоткей переключения отдельным, встроенным кодом.

import { useLogFilter } from 'vue-network-dashboard'

// useLogFilter принимает обычный снимок-массив, а не живой Ref — filteredLogs
// реагирует на изменения `filters`, но не на новые записи, появившиеся позже;
// вызовите его снова со свежим массивом, чтобы подхватить новые логи
const { filters, filteredLogs, resetFilters } = useLogFilter(dashboard.logs.value)

filters.value.url = 'api/users'
filters.value.type = 'http'
filters.value.hasError = true

// url, body и route также принимают паттерн с префиксом "regex:" вместо
// обычной подстроки, например:
filters.value.url = 'regex:/v1/users/\\d+/'

У FilterOptions также есть поля method, status, minDuration и wsMessagesOnly (ограничивает результат событиями message у WebSocket) — вызовите resetFilters(), чтобы сбросить все поля к значениям по умолчанию.

Экспорт

export()           // строка JSON (по умолчанию)
export('json')     // строка JSON
export('csv')      // строка CSV со строкой заголовка
export('har')      // строка JSON в формате HTTP Archive (HAR 1.2)

Пример:

const dashboard = useNetworkDashboard()

function downloadJson() {
  const json = dashboard.export('json')
  const blob = new Blob([json], { type: 'application/json' })
  const url = URL.createObjectURL(blob)
  Object.assign(document.createElement('a'), { href: url, download: 'network-logs.json' }).click()
}

Логи также можно экспортировать прямо из UI панели кнопкой Export в заголовке.

Статистика

getStats(): NetworkStats          // Полный объект статистики (см. раздел Statistics на странице Справочник)
getStatsSummary(): string         // Многострочный человекочитаемый текст

Подписка

const unsubscribe = subscribe((entry: UnifiedLogEntry) => {
  // вызывается синхронно после сохранения каждой записи лога
})

unsubscribe() // прекратить получение событий

Пример — пересылка неудачных запросов во внешний мониторинг:

const { subscribe } = useNetworkDashboard()

const stop = subscribe((entry) => {
  if (entry.error.occurred || (entry.http?.status ?? 0) >= 500) {
    myMonitoring.capture(entry)
  }
})

onUnmounted(stop)

Методы моков

// Устаревший плоский API (проксируется в группу по умолчанию)
addMock(rule): MockRule
updateMock(id: string, patch: Partial<MockRule>): void
removeMock(id: string): void
clearMocks(): void
getMocks(): MockRule[]

// Управление группами
addMockGroup(name: string): MockRulesGroup
renameMockGroup(groupId: string, name: string): void
toggleMockGroup(groupId: string, enabled: boolean): void
expandMockGroup(groupId: string, isOpened: boolean): void
removeMockGroup(groupId: string): void

// Правила внутри группы
addMockToGroup(groupId: string, rule: Omit<MockRule, 'id'>): MockRule
updateMockInGroup(groupId: string, ruleId: string, patch: Partial<MockRule>): void
removeMockFromGroup(groupId: string, ruleId: string): void

// Массовая замена (используется импортом)
replaceMockGroups(groups: MockRulesGroup[]): void

addMockGroup() возвращает целиком объект группы ({ id, name, enabled, isOpened, rules }), а не просто id — полный пример см. в разделе Группы моков.

Методы троттлинга

setThrottle(delayMs: number): void  // 0 отключает троттлинг
getThrottle(): number               // текущая задержка в миллисекундах

Пресеты троттлинга в панели (Fast 3G, Slow 3G, Offline-ish) — это UI-уровневые ярлыки, которые вызывают setThrottle() с фиксированным значением в миллисекундах — см. Троттлинг сети.

Методы точек останова

// Управление правилами
addBreakpointRule(rule: Omit<BreakpointRule, 'id'>): BreakpointRule
removeBreakpointRule(id: string): void
updateBreakpointRule(id: string, patch: Partial<BreakpointRule>): void
getBreakpointRules(): BreakpointRule[]

// Управление приостановленными запросами
releaseBreakpoint(id: string, edits: BreakpointEdits): void
cancelBreakpoint(id: string): void   // выбрасывает AbortError у вызывающей стороны
getActiveBreakpoints(): ActiveBreakpoint[]

// Подписка на изменения набора приостановленных
onActiveBreakpointsChange(cb: (list: ActiveBreakpoint[]) => void): () => void

Типы:

interface BreakpointRule {
  id: string
  urlPattern: string | RegExp
  method?: string // например 'POST'; опустите для совпадения с любым методом
  name?: string
  enabled: boolean
}

interface ActiveBreakpoint {
  id: string
  url: string
  method: string
  requestHeaders: Record<string, string>
  requestBody: unknown
  timestamp: number
}

interface BreakpointEdits {
  url: string
  method: string
  headers: Record<string, string>
  body: string | null
}