OPEN SOURCE · PLAIN JAVASCRIPT

Your network.
Your app.
One timeline.

See the request. Read the message. Find the moment that set it all in motion. A network inspector that lives right inside your application.

Open the live demo Start building

npm install github:inferal-oss/web-network-inspector

Install the current source from GitHub. No runtime dependencies.

SMALL SURFACE. OPEN POSSIBILITIES.v0.1.0

Framework independentOptional local historyYours to extend

The whole exchange, in view.

Try it yourself

web-network-inspector / interactive demoREAL INSPECTOR

Web Network Inspector showing a request, custom application events, environment selector, and expandable JSON event data

A capture from the included demo. Custom events, real requests, and your application’s own controls.

BUILT FOR THE SPACE BETWEEN

A request is only
part of the story.

Bring transport details and application context together, without building a debugging UI from scratch.

Inspect the full exchange

Fetch, XMLHttpRequest, WebSocket frames, and browser resource timings. Read retained headers and bodies as text, hex, or expandable JSON.

Put your own events on the map

A saved draft. A changed filter. A connection check. Record your own labels and payloads alongside the traffic they help explain.

Make room for your application

Add native controls, live status elements, and application-owned popups. The bar is an extension point, not a closed box.

A FEW LINES GO A LONG WAY

Small API.
Your vocabulary.

Keep the event types, controls, and content that make sense for your app. There’s no backend protocol to adopt.

Explore the API

inspector.recordEvent({
  type: 'document.saved',
  label: 'Saved a draft',
  correlationId: 'example-document',
  data: JSON.stringify({ revision: 3 }),
});

const status = document.createElement('span');
status.textContent = 'Ready';

inspector.addBarItem({
  id: 'connection-status',
  element: status,
});

inspector.openPopup({
  title: 'Connection details',
  anchor: connectionButton,
  content: ({ container }) => {
    container.textContent = 'Ready to go.';
  },
});

JavaScript · works with your frameworkGet started →

DELIBERATELY WELL BEHAVED

Useful detail.
Clear boundaries.

Browse without the jump

Select a row or browse the waterfall to hold your place while new traffic keeps arriving.

Keep capture bounded

Set limits for retained entries, messages, and preview bytes. Adjust them without restarting the inspector.

Match your application

Theme through CSS variables, add an override stylesheet, or replace the styles altogether.

Read the styling guide →

Know where data goes

Capture stays local, with optional bounded IndexedDB history. No telemetry. Enable it where inspecting sensitive traffic is appropriate.

TAKE A CLOSER LOOK

Make a request.
See what follows.

Explore the live demo ↗Browse the source on GitHub →

Your network.Your app.One timeline.