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.
Custom summary + default headers and body previews
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 for warm violet surfaces, or Midnight for a complete dark theme, including content previews and Activity Insight badges. 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-effective="plum"] {
--brand: #7c3aed;
--brand-dark: #6024b5;
--brand-soft: #efe5ff;
--paper: #faf5ff;
--ink: #312044;
}
/* Add inside inspector.root for internal selectors. */
:host([data-demo-effective="plum"]) .network-popup {
border-radius: 18px;
}
/* Dark colors and token overrides also go into the details iframe. */
:host([data-demo-effective="dark"]) {
color-scheme: dark;
--panel: #141c2b;
--ink: #e7edf8;
}
:host([data-demo-effective="dark"]) .network-json-string {
color: #9be5c5;
}Some moments take time.
Start a span and watch its bar grow. Finish it yourself, or run the three-second example. The same row keeps its duration, payload, and correlation when it completes. Follow waterfall to see new rows; turn off Previous page loads to focus on this visit.
Ready to measure application work
See the span API
const span = inspector.startEvent({
type: "report.build", label: "Build report",
correlationId: "report-42",
});
try {
await buildReport();
span?.finish({ data: JSON.stringify({ rows: 42 }) });
} catch (error) {
span?.finish({ status: "Error", data: error.message });
}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. Checkbox changes are captured as labeled application events with their checked state.
BOUNDED LOCAL HISTORY · SYNTHETIC DATA