Dev Inspector
FeaturesPlaygroundGitHub
dev-inspector • in-page devtools

In-page DevTools for your web apps

Capture console logs and network requests in real-time with a lightweight, resizable panel that lives inside your app.

Try the demoGitHubnpm
INSTALL
npm i dev-inspector
INIT
import { initDevInspector } from "dev-inspector";

initDevInspector({
  maxSize: 500,
  networkOptions: { includeBodies: false },
  panelOptions: { initiallyOpen: true, title: "Dev Inspector" },
});

Browser-only: the UI needs document. For SSR frameworks, initialize client-side.

Features

A tiny, framework-agnostic DevTools panel that lives inside your app — perfect for QA, staging environments, and debugging on devices where browser DevTools are limited.

Console Logging

Intercepts log/info/warn/error/debug with structured output and rich JSON viewing.

Network Tracing

Captures fetch + XHR, status codes, timings, and request metadata in real-time.

In-memory Storage

Ring-buffer storage with events so the UI stays fast and predictable.

Resizable Panel

Drag to resize without leaving the viewport; tabs wrap nicely on small screens.

Framework Agnostic

Works with any web app. Just install and call initDevInspector().

Dev Inspector Playground

Use the buttons below to generate real console logs and network requests.

Then open the “Dev Inspector” panel in the bottom-right to inspect events in real-time.

Playground

Console

Click a button to trigger a real console call. Then inspect it in the panel.

Levels
Simple string logs by severity.
Structured payloads
Objects and big JSON are expandable in the panel.
Custom message
Type a message and log it.
Bulk logs
Generate many logs to test scrolling and maxSize.

Network

Click a button to make a real request. Inspect method, URL, status and bodies in the panel.

Transport & method
Transport affects presets. Method affects Custom URL. POST JSON is fixed to POST.
Preset requests
Realistic JSONPlaceholder endpoints (plus an abort scenario).
Custom URL
Run the selected method against any URL.
Ready.
Use the playground below to generate console logs and network requests.
The Dev Inspector panel is open in the bottom-right.