Your app. Your events. One timeline.
See what happens
when you click.
Make a request, record a moment, or change a custom bar control. Every interaction appears in the inspector below.
Send a real request
Send synthetic JSON to httpbin.org and inspect its timing, headers, and echoed body.
Ready to send · httpbin.org · bundled fallback
Record your own moment
Your label and payload, captured together.
Send it. See it come back.
Connect to Postman’s public echo service. Messages you send are echoed back and captured as individual frames.
Disconnected · wss://ws.postman-echo.com/raw
Your data. Your columns.
Show or hide any column. Add Activity Insight for colorful latency badges, frame directions, payload sizes, and event correlations from real capture data.
5 columns visible · drag any header divider to resize
See the column API
const duration = entry => entry.end == null ? 0 : entry.end - entry.start;
inspector.setColumns([
...defaultColumns.filter(c => c.id !== "status"),
{ id: "latency", label: "Latency", width: 180,
render: entry => entry.end == null ? "In flight"
: (entry.end - entry.start).toFixed(0) + " ms",
sort: (a, b) => duration(a) - duration(b) },
]);
// Set sort: false to disable a column's sorter.A custom view, right where you need it.
Select any row to see the demo's custom summary on the right. Application events show their level and environment; requests show timing and payload size. The standard headers and body previews follow below.
See the details renderer API
renderDetails(context) {
const summary = context.document.createElement("section");
summary.textContent = context.entry?.correlationId ?? "App summary";
context.container.append(summary);
context.renderDefault();
return () => summary.remove();
}View settings use localStorage. Retained capture history uses IndexedDB.
A different look. The same inspector.
Try Plum: warm surfaces, violet accents, and softer controls. CSS variables cross the Shadow DOM boundary; a small override stylesheet adds the finishing touches. Your display preferences still apply, including in the details preview.
Default inspector styling
See the theme CSS
[data-web-network-inspector][data-demo-theme="plum"] {
--brand: #7c3aed;
--brand-dark: #6024b5;
--brand-soft: #efe5ff;
--paper: #faf5ff;
--ink: #312044;
}
/* Add inside inspector.root for internal selectors. */
:host([data-demo-theme="plum"]) .network-popup {
border-radius: 18px;
}The bar is yours, too. Change the environment, watch the event counter, or open the connection popup. These are custom elements added through the public API.
BOUNDED LOCAL HISTORY · SYNTHETIC DATA