Quickstart

Get a live session list at /__idebug on an Express app in a few minutes.

0. Prefer the init CLI

From the IDebug monorepo (after pnpm install + pnpm build:packages):

# In your app directory (must have package.json)
pnpm --dir /path/to/idebug idebug init -p express --app-name my-api --yes
# or from the monorepo root with --cwd:
# pnpm idebug init -p express --app-name my-api --yes --cwd /path/to/your-app

This writes idebug.config.json, scaffolds idebug/setup.ts, and installs @idebug/node. Merge the setup snippet into your entry, start the server, open /__idebug.

The steps below are the manual equivalent.

1. Install packages

pnpm add @idebug/node express
# peer: @idebug/core and @idebug/ui come as dependencies of @idebug/node in the monorepo

From this monorepo, build packages first:

pnpm install
pnpm build:packages
# or: pnpm --filter @idebug/core --filter @idebug/ui --filter @idebug/node build

2. Wire Express

import express from 'express';
import IDebug from '@idebug/node';
 
IDebug.configure({
  enabled: process.env.NODE_ENV !== 'production',
  performance: true,
  appName: 'my-api',
});
 
const app = express();
 
// Body parsers first — so the initial `req` event includes bodies
app.use(express.json());
 
// Session + ALS + req/res tracing
app.use(IDebug.middleware());
 
// Optional: wrap helpers you care about
const calc = IDebug.logModule(
  {
    add: (a: number, b: number) => a + b,
  },
  'calc',
);
 
app.get('/add', (_req, res) => {
  res.json({ sum: calc.add(1, 2) });
});
 
// Swagger-like UI + JSON/SSE API under /__idebug
app.use(IDebug.ui());
 
app.listen(3000);

3. Open the inspector

Start the server.
Hit a route: curl http://localhost:3000/add
Open http://localhost:3000/\_\_idebug

You should see a session with a request path graph and a timeline of REQ, FN↓ / FN↑, and RES events.

NestJS (same idea)

import { Module } from '@nestjs/common';
import { IDebugModule } from '@idebug/nest';
 
@Module({
  imports: [
    IDebugModule.forRoot({
      enabled: true,
      appName: 'my-nest-api',
      performance: true,
    }),
  ],
})
export class AppModule {}

Then open http://localhost:<port>/__idebug.

React (browser overlay)

import { start } from '@idebug/react';
 
start({
  enabled: import.meta.env.DEV,
  overlay: true,
});

Click the floating ID button to inspect fetch/XHR/navigation events.

Sample apps (this repo)

pnpm build:packages
pnpm --filter sample-express-api start   # :3001 → /__idebug
pnpm --filter sample-nest-api start      # :3002 → /__idebug
pnpm --filter sample-db-api start        # :3003 → call-tree DB queries
pnpm --filter sample-react-app dev       # :5173 → overlay

Next: Configuration · Express package · Debug UI

Introduction Installation