VueCraft NPM

Instance API ​

All methods below are available on the object returned by useNetworkDashboard(), on this.$networkDashboard in the Options API, or on the instance returned by createNetworkDashboard(). A small number of lower-level methods (getOptions(), updateOptions(), getSize(), updateLog()) are only available on the raw class — construct it directly with new NetworkDashboard(options) (imported from vue-network-dashboard) if you need them.

Reactive state ​

PropertyTypeDescription
logsRef<UnifiedLogEntry[]>All stored log entries
totalRequestsRef<number>Total number of entries
totalErrorsRef<number>Entries where error.occurred === true or http.status >= 400
averageDurationRef<number>Mean duration in milliseconds
totalDataSentRef<number>Sum of request.bodySize across all entries
totalDataReceivedRef<number>Sum of response.bodySize across all entries
mockGroupsRef<readonly MockRulesGroup[]>All mock groups with their rules
breakpointRulesRef<BreakpointRule[]>All configured breakpoint rules
activeBreakpointsRef<ActiveBreakpoint[]>Requests currently paused at a breakpoint

Control methods ​

typescript
enable() // Start capturing
disable() // Stop capturing (existing logs are preserved)
isEnabled() // Returns boolean
clear() // Remove all stored logs (triggers onFlush callback)

Query methods ​

typescript
// Filter by transport type
getLogsByType('http' | 'websocket' | 'sse'): UnifiedLogEntry[]

// Filter by URL string or regex
getLogsByUrl('/api/users'): UnifiedLogEntry[]
getLogsByUrl(/^https:\/\/api\./): UnifiedLogEntry[]

// Filter by HTTP status range
getLogsByStatus([400, 599]): UnifiedLogEntry[]  // all 4xx and 5xx

// Filter by HTTP method
getLogsByMethod('POST'): UnifiedLogEntry[]

// Only failed entries
getErrorLogs(): UnifiedLogEntry[]

// Composable query with multiple filters at once
queryLogs({
  type: 'http',
  method: 'GET',
  url: /\/api\//,
  minDuration: 500,
  hasError: false,
}): UnifiedLogEntry[]

useLogFilter and useHotkey are standalone composables exported from the package root for building your own custom debugger UI on top of the raw log/hotkey primitives — <NetworkDebugger> itself does not use either one internally; it filters its own live, debounced, sessionStorage-persisted log stream and handles its own toggle hotkey with separate, inline code.

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

// useLogFilter takes a plain snapshot array, not a live Ref — filteredLogs
// reacts to changes to `filters`, but not to new entries logged afterward;
// call it again with a fresh array to pick up newly captured logs
const { filters, filteredLogs, resetFilters } = useLogFilter(dashboard.logs.value)

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

// url, body, and route each also accept a "regex:"-prefixed pattern instead
// of a plain substring, e.g.:
filters.value.url = 'regex:/v1/users/\\d+/'

FilterOptions also has method, status, minDuration, and wsMessagesOnly (restricts results to WebSocket message events) fields — call resetFilters() to restore all of them to their defaults.

Export ​

typescript
export()           // JSON string (default)
export('json')     // JSON string
export('csv')      // CSV string with header row
export('har')      // HTTP Archive (HAR 1.2) JSON string

Example:

typescript
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()
}

Logs can also be exported directly from the panel UI via the Export button in the header.

Statistics ​

typescript
getStats(): NetworkStats          // Full statistics object (see Statistics section on Reference)
getStatsSummary(): string         // Multi-line human-readable text

Subscription ​

typescript
const unsubscribe = subscribe((entry: UnifiedLogEntry) => {
  // called synchronously after each log entry is stored
})

unsubscribe() // stop receiving events

Example — forward failed requests to external monitoring:

typescript
const { subscribe } = useNetworkDashboard()

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

onUnmounted(stop)

Mock methods ​

typescript
// Legacy flat API (proxied into the default group)
addMock(rule): MockRule
updateMock(id: string, patch: Partial<MockRule>): void
removeMock(id: string): void
clearMocks(): void
getMocks(): MockRule[]

// Group management
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

// Rules within a group
addMockToGroup(groupId: string, rule: Omit<MockRule, 'id'>): MockRule
updateMockInGroup(groupId: string, ruleId: string, patch: Partial<MockRule>): void
removeMockFromGroup(groupId: string, ruleId: string): void

// Bulk replace (used by import)
replaceMockGroups(groups: MockRulesGroup[]): void

addMockGroup() returns the full group object ({ id, name, enabled, isOpened, rules }), not just an id — see Mock Groups for a full example.

Throttle methods ​

typescript
setThrottle(delayMs: number): void  // 0 disables throttling
getThrottle(): number               // current delay in milliseconds

The panel's throttle presets (Fast 3G, Slow 3G, Offline-ish) are UI-level shortcuts that call setThrottle() with a fixed millisecond value — see Network Throttling.

Breakpoint methods ​

typescript
// Rule management
addBreakpointRule(rule: Omit<BreakpointRule, 'id'>): BreakpointRule
removeBreakpointRule(id: string): void
updateBreakpointRule(id: string, patch: Partial<BreakpointRule>): void
getBreakpointRules(): BreakpointRule[]

// Controlling paused requests
releaseBreakpoint(id: string, edits: BreakpointEdits): void
cancelBreakpoint(id: string): void   // throws AbortError in the caller
getActiveBreakpoints(): ActiveBreakpoint[]

// Subscribe to changes in the paused set
onActiveBreakpointsChange(cb: (list: ActiveBreakpoint[]) => void): () => void

Types:

typescript
interface BreakpointRule {
  id: string
  urlPattern: string | RegExp
  method?: string // e.g. 'POST'; omit to match any method
  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
}