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.

INSTALL

npm i dev-inspector

INIT

import { initDevInspector } from "dev-inspector";

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

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().

Live Search

Filter console messages and network requests by URL, method, status, or body — instantly.

Auto-scroll Lock

Pin the panel to the latest entry, or jump back instantly with the Latest button when you scroll up.

Light & Dark

Two-tone theme that follows your preference and persists in localStorage across sessions.

Playground

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.

Levels

Structured payloads

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

GitHub•npm•License•Contributions