Tired of console.loging every request and response? Node Network DevTools brings the familiarity of the browser's "Network" tab to your Node.js backend. Whether you're debugging external API calls, microservices, or Next.js server actions, you can now inspect every detail in real-time.

• 💎 DevTools-like Experience - A familiar, responsive Web GUI for inspecting headers, payloads, and responses.
• 🔌 Universal Interception - Native support for http/https modules and modern fetch/undici (Node.js 18+).
• 🛠️ Zero Code Intrusion - Plug it into your project with a single line of code or a simple CLI flag.
• 🖥️ Minimal Browser Window - Automatically launches a compact, app-mode GUI window (using your system's Chrome, Edge, or Chromium).
• 🔍 Server-side Tracing (New!) - Visualize the internal execution flow (Async call tree/Flame Graph) of your Node.js server.
• 🔗 Smart Request Tracing - Automatically correlate related requests in a single business flow using AsyncLocalStorage.
• 🛡️ Built-in Redaction - Keeps your secrets safe by auto-redacting sensitive headers like Authorization and Cookie.
• ⚡ Framework Ready - Seamless integration with Next.js, Express, Fastify, and more.
• 📦 Dual Module Support - Works out of the box with both ESM and CommonJS.

npm install @mt0926/node-network-devtools
# or
pnpm add @mt0926/node-network-devtools

Note: No extra dependencies like Puppeteer are required! It uses your system's existing browser.

Just call install() at the very beginning of your application entry point.

ESM:

import { install } from '@mt0926/node-network-devtools';

await install(); // Call before any other imports that make network requests

CommonJS:

const { install } = require('@mt0926/node-network-devtools');

(async () => {
  await install();
})();

If you don't want to modify your source code, you can use Node.js CLI arguments to inject the tool.

ESM:

node --import @mt0926/node-network-devtools/register your-script.js

CommonJS:

node -r @mt0926/node-network-devtools/register your-script.js

Once started, a minimal browser window will automatically open showing the real-time request list.

• Compact size (800x600) for side-by-side debugging.
• Search & Filter by URL, method, or status.
• Details Panel for headers, payload, and response.
• Dark/Light theme support.

If you need to access it manually, check the console output for the URL: 🚀 Node Network DevTools GUI started at http://localhost:9229

# Customize window size
NND_BROWSER_WIDTH=1024 NND_BROWSER_HEIGHT=768 node --import @mt0926/node-network-devtools/register your-script.js

# Customize window title
NND_BROWSER_TITLE="My App Network Monitor" node --import @mt0926/node-network-devtools/register your-script.js

# Specify GUI port
NND_GUI_PORT=9230 node --import @mt0926/node-network-devtools/register your-script.js

# Specify WebSocket port
NND_WS_PORT=9231 node --import @mt0926/node-network-devtools/register your-script.js

# Disable GUI
NND_GUI_ENABLED=false node --import @mt0926/node-network-devtools/register your-script.js

# Disable auto-open browser
NND_AUTO_OPEN=false node --import @mt0926/node-network-devtools/register your-script.js

import { setConfig } from '@mt0926/node-network-devtools';

setConfig({
  maxRequests: 500,
  maxBodySize: 512 * 1024,
  redactHeaders: ['authorization', 'cookie', 'x-api-key'],
  guiEnabled: true,
  autoOpen: false,
  browserWindowSize: { width: 1024, height: 768 },
  browserWindowTitle: 'My App Network Monitor',
});

Important: Always disable this tool in production environments!

// Conditional installation based on environment
if (process.env.NODE_ENV === 'development') {
  const { install } = await import('@mt0926/node-network-devtools');
  await install();
}

Or use environment variables:

# In production, disable GUI and auto-open
NODE_ENV=production NND_GUI_ENABLED=false NND_AUTO_OPEN=false node your-app.js

1. Copy templates/instrumentation.ts to your project root
2. Enable instrumentation in next.config.js:

module.exports = {
  experimental: {
    instrumentationHook: true,
  },
};

3. Start your development server:

npm run dev

Or configure in package.json:

{
  "scripts": {
    "dev": "next dev"
  }
}

Note: The tool will automatically start when Next.js loads the instrumentation hook.

ESM:

import express from 'express';
import { install } from '@mt0926/node-network-devtools';

await install();

const app = express();
// Your routes...

CommonJS:

const express = require('express');
const { install } = require('@mt0926/node-network-devtools');

(async () => {
  await install();
  
  const app = express();
  // Your routes...
})();

Works with any Node.js framework! Just install the interceptor before your application code.

This package supports both ESM (ECMAScript Modules) and CommonJS module systems, making it compatible with all Node.js projects.

Use import statements in projects with "type": "module" in package.json or .mjs files:

import { install, getRequestStore } from '@mt0926/node-network-devtools';
import '@mt0926/node-network-devtools/register';

await install();
const store = getRequestStore();

Use require() statements in traditional Node.js projects or .cjs files:

const { install, getRequestStore } = require('@mt0926/node-network-devtools');
require('@mt0926/node-network-devtools/register');

(async () => {
  await install();
  const store = getRequestStore();
})();

Full TypeScript support with type definitions for both module systems:

import type { Config, IRequestStore } from '@mt0926/node-network-devtools';
import { install, getRequestStore } from '@mt0926/node-network-devtools';

const config: Config = {
  maxRequests: 500,
  guiEnabled: true,
};

await install();
const store: IRequestStore = getRequestStore();

The package uses Node.js Conditional Exports to automatically provide the correct module format:

• ESM projects: Resolves to dist/esm/index.js
• CommonJS projects: Resolves to dist/cjs/index.js
• TypeScript: Uses dist/types/index.d.ts for both

No configuration needed - it just works! 🎉

// Quick install
import { install, startGUI, stopGUI } from '@mt0926/node-network-devtools';

// Configuration
import { getConfig, setConfig, resetConfig } from '@mt0926/node-network-devtools';

// Request store
import { getRequestStore } from '@mt0926/node-network-devtools';

// Context tracing
import { 
  runWithTrace, 
  getCurrentTraceId,
  generateTraceId 
} from '@mt0926/node-network-devtools';

// Interceptors
import { HttpPatcher, UndiciPatcher } from '@mt0926/node-network-devtools';

Correlate multiple requests in the same business flow:

import { runWithTrace, getRequestStore } from '@mt0926/node-network-devtools';

await runWithTrace('user-login', async () => {
  // These requests will be correlated with the same traceId
  await fetch('https://api.example.com/auth');
  await fetch('https://api.example.com/user');
});

// Query correlated requests
const store = getRequestStore();
const requests = store.getByTraceId('user-login');

Check the examples directory for more usage examples:

• basic-http - Basic HTTP request monitoring
• fetch-api - Fetch API monitoring
• commonjs-usage - CommonJS module usage
• request-tracing - Request tracing
• express-server - Express server example
• programmatic-api - Programmatic API usage
• nextjs-app - Next.js App Router integration

1. HTTP Interception: Uses @mswjs/interceptors to intercept http/https module requests
2. Undici Interception: Uses Agent.compose() to register interceptors for fetch requests
3. Context Propagation: Uses AsyncLocalStorage to pass TraceID through async call chains
4. Event Bridge: Forwards intercepted requests to WebSocket clients for real-time GUI updates
5. Native Browser Launch: Detects and launches your system's browser (Chrome/Edge/Chromium) in a dedicated app-mode window.

Contributions are welcome! Please read our Contributing Guide for details.

# Clone the repository
git clone https://github.com/dong0926/node-network-devtools.git
cd node-network-devtools

# Install dependencies
pnpm install

# Build the project
pnpm build

# Run tests
pnpm test:all

MIT © ddddd

• @mswjs/interceptors - HTTP request interception
• undici - HTTP/1.1 client
• ws - WebSocket implementation
• puppeteer - Browser automation

• 🐛 Report Issues
• 💬 Discussions
• 📧 Email: xx630133368@gmail.com