Debugging Tools

Pending Requests

In-flight requests appear immediately as a live row with an animated spinner. When the response arrives the entry updates in place — no duplicate rows, exactly like the browser Network tab.

Pending entries are excluded from HAR export and the waterfall timeline.

Session Compare

The Compare tab lets you load two HAR files and see an instant diff of the recorded sessions.

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

Matching is done on the composite key METHOD URL. For entries present in both sessions the tool compares HTTP status, duration, and response size — a difference greater than 20 % is flagged as changed.

Filter chips above the list let you show only Added, Removed, Changed, or Unchanged entries. Each side shows the session filename and entry count in the column header.

Both drag-and-drop and click-to-select file loading are supported. HAR files exported by the plugin itself are accepted directly.

Diff View

Click the Group button in the header to enter diff mode. Every log row gains a diff-select button. Select exactly two entries — the diff panel opens automatically above the log list and shows:

• Changed request and response headers
• Unified line diff of request body
• Unified line diff of response body

Waterfall Timeline

Switch to the Timeline tab to see all completed requests as horizontal bars on a shared time axis. Bars are colour-coded by result (green = 2xx, yellow = 4xx, red = 5xx, purple = WebSocket, teal = SSE). Hover a bar to see the exact duration.

Grouping

Toggle the Group button in the header to collapse all requests to the same URL+method into a single row showing the total count. Expand a group to see individual entries inside it.

Virtual Scroll

The log list renders at most 100 rows at a time. As you scroll toward the bottom, the next 50 rows load automatically via an IntersectionObserver sentinel element. Switching filters or clearing logs resets the counter back to 100. This keeps DOM size bounded even with thousands of requests captured.

URL Highlight

While a URL filter is active, the matched substring (or regex capture) is highlighted directly in the log list row using an amber accent. Regex mode (regex:pattern) is also supported.

Copy as cURL

Open any HTTP request's detail view and click cURL to copy the full request as a curl command to the clipboard. The command includes the method, all non-redundant headers, and the request body. Common internal headers (host, content-length, transfer-encoding, connection, keep-alive) are omitted automatically.

Replay with Editing

Click Replay in an HTTP request's detail view to open the Edit & Replay modal. Before sending you can change the URL, HTTP method, add or remove individual headers, and edit the JSON body. Invalid JSON is highlighted with a warning. The response is captured by the interceptor and appears as a new log entry, so you can compare it with the original using Diff view.

Network Throttling

Simulate slow or unreliable connections using the throttle selector in the Logs toolbar:

Preset	Added latency
No throttle	0 ms
Fast 3G	400 ms
Slow 3G	2 000 ms
Offline-ish	5 000 ms

The delay is applied per request via a getter that the interceptor reads immediately before each call — switching presets takes effect on the next request without restarting or re-registering interceptors.

GraphQL Detection

When a POST request contains a JSON body with a query string field, the dashboard automatically treats it as a GraphQL operation. A purple badge with the operation name appears in the log list row:

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

The expanded detail view gains a GraphQL section showing:

• Operation type (query, mutation, or subscription)
• Operation name (from the query string or operationName field)
• Variables (parsed from body.variables)

No external GraphQL library is required.

N+1 Detection

If more than one request with the same HTTP method and URL appears within a 5-second window, an orange ×N badge is shown on each matching row in the log list. The count updates reactively as requests arrive or leave the window — no timers or polling are used.

This makes it easy to spot N+1 patterns such as a list component that fires one detail request per item.

Breakpoints

Breakpoints pause outgoing requests before they are sent, letting you inspect and modify every field — then decide whether to release or cancel.

┌─────────────────────────────────────────────────┐
│ ● 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]   │
└─────────────────────────────────────────────────┘

Adding rules programmatically:

const dashboard = useNetworkDashboard()

dashboard.addBreakpointRule({
  urlPattern: '/api/checkout', // substring or /regex/
  method: 'POST', // omit to match any method
  name: 'Pause checkout',
  enabled: true,
})

Managing paused requests:

// Release with optional edits (url, method, headers, body)
dashboard.releaseBreakpoint(id, { url, method, headers, body })

// Cancel — throws AbortError in the calling code
dashboard.cancelBreakpoint(id)

Reactive state:

const { breakpointRules, activeBreakpoints } = useNetworkDashboard()
// breakpointRules — Ref<BreakpointRule[]>
// activeBreakpoints — Ref<ActiveBreakpoint[]> (currently paused)

The number of paused requests is shown as a badge on the Breakpoints tab. Rules can be added, edited (inline, replacing the row), toggled, and deleted from the UI.

HAR Import

Click Import in the panel header to load a .har file. The imported entries are displayed using the same filters and detail view as live traffic. A banner at the top of the panel shows the file name and entry count; click × to dismiss and return to live mode.

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

Filter Persistence

The active filter state (URL, body, method, status, type, duration threshold, and toggles) is automatically saved to sessionStorage under the key vue-network-dashboard:filters. On the next page load the filters are restored without any configuration required. Clicking Reset clears both the UI state and the stored value.

WebSocket Message Filter

When the WS type tab is active, a Messages only toggle appears in the filter bar. Enabling it hides connection, open, error, and close events and shows only message entries — useful for high-frequency connections where lifecycle noise would otherwise bury the actual data frames.

Traffic Sparkline

The Statistics tab displays a live SVG sparkline at the top of the panel showing request volume over time. Requests are bucketed into 5-second intervals across the last ~3 minutes (40 buckets). The chart redraws automatically when the panel is resized or switched to fullscreen mode. The peak value (requests per bucket) is shown in the section header.