@mt0926/node-network-devtools 0.3.0 → 0.3.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +62 -132
- package/README.zh-CN.md +62 -108
- package/dist/cjs/gui/server.js +20 -4
- package/dist/cjs/gui/server.js.map +1 -1
- package/dist/cjs/index.js +1 -1
- package/dist/esm/gui/server.js +20 -4
- package/dist/esm/gui/server.js.map +1 -1
- package/dist/esm/index.js +1 -1
- package/dist/gui/assets/index.css +1 -1
- package/dist/gui/assets/index.js +10 -10
- package/dist/types/gui/server.d.ts.map +1 -1
- package/dist/types/index.d.ts +1 -1
- package/package.json +24 -31
- package/dist/cjs/cli.js +0 -223
- package/dist/cjs/cli.js.map +0 -1
- package/dist/esm/cli.js +0 -221
- package/dist/esm/cli.js.map +0 -1
- package/dist/types/cli.d.ts +0 -8
- package/dist/types/cli.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
# 🔍 Node Network DevTools
|
|
4
4
|
|
|
5
|
-
**
|
|
5
|
+
**A powerful, zero-config network debugging companion for Node.js.**
|
|
6
|
+
*Monitor all outgoing HTTP, HTTPS, and Fetch/Undici requests in a sleek, real-time Web GUI that feels just like Chrome DevTools.*
|
|
6
7
|
|
|
7
|
-
[](https://www.npmjs.com/package/@mt0926/node-network-devtools)
|
|
8
|
+
[](https://www.npmjs.com/package/@mt0926/node-network-devtools)
|
|
8
9
|
[](https://opensource.org/licenses/MIT)
|
|
9
|
-
[](https://nodejs.org)
|
|
10
10
|
|
|
11
11
|
[English](#) | [中文文档](./README.zh-CN.md)
|
|
12
12
|
|
|
@@ -14,174 +14,104 @@
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
-
##
|
|
17
|
+
## 🚀 Why Node Network DevTools?
|
|
18
18
|
|
|
19
|
-
**
|
|
20
|
-
|
|
21
|
-
- Uses Puppeteer to launch a minimal browser window for the GUI
|
|
22
|
-
- Intercepts all network requests which may impact performance
|
|
23
|
-
- Stores request/response data in memory
|
|
24
|
-
- Not suitable for production workloads
|
|
25
|
-
|
|
26
|
-
### Disabling in Production
|
|
27
|
-
|
|
28
|
-
```javascript
|
|
29
|
-
// Conditional installation
|
|
30
|
-
if (process.env.NODE_ENV === 'development') {
|
|
31
|
-
await install();
|
|
32
|
-
}
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
Or use environment variables:
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
# Disable GUI and auto-open
|
|
39
|
-
NND_GUI_ENABLED=false NND_AUTO_OPEN=false node your-app.js
|
|
40
|
-
```
|
|
19
|
+
Tired of `console.log`ing 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.
|
|
41
20
|
|
|
42
21
|
## ✨ Features
|
|
43
22
|
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
-
|
|
48
|
-
- 🔗 **Request Tracing** -
|
|
49
|
-
- 🛡️ **
|
|
50
|
-
- ⚡ **
|
|
51
|
-
- 📦 **
|
|
23
|
+
- 💎 **DevTools-like Experience** - A familiar, responsive Web GUI for inspecting headers, payloads, and responses.
|
|
24
|
+
- 🔌 **Universal Interception** - Native support for `http/https` modules and modern `fetch/undici` (Node.js 18+).
|
|
25
|
+
- 🛠️ **Zero Code Intrusion** - Plug it into your project with a single line of code or a simple CLI flag.
|
|
26
|
+
- 🖥️ **Minimal Browser Window** - Automatically launches a compact, app-mode GUI window (using your system's Chrome, Edge, or Chromium).
|
|
27
|
+
- 🔗 **Smart Request Tracing** - Automatically correlate related requests in a single business flow using `AsyncLocalStorage`.
|
|
28
|
+
- 🛡️ **Built-in Redaction** - Keeps your secrets safe by auto-redacting sensitive headers like `Authorization` and `Cookie`.
|
|
29
|
+
- ⚡ **Framework Ready** - Seamless integration with Next.js, Express, Fastify, and more.
|
|
30
|
+
- 📦 **Dual Module Support** - Works out of the box with both **ESM** and **CommonJS**.
|
|
52
31
|
|
|
53
32
|
## 📸 Screenshots
|
|
54
33
|
|
|
55
34
|
### Web GUI Interface
|
|
56
35
|

|
|
57
36
|
|
|
58
|
-
### Chrome DevTools Integration
|
|
59
|
-

|
|
60
|
-
|
|
61
37
|
## 🚀 Quick Start
|
|
62
38
|
|
|
63
|
-
### Installation
|
|
39
|
+
### 1. Installation
|
|
64
40
|
|
|
65
41
|
```bash
|
|
66
|
-
npm install node-network-devtools
|
|
42
|
+
npm install @mt0926/node-network-devtools
|
|
67
43
|
# or
|
|
68
|
-
pnpm add node-network-devtools
|
|
69
|
-
# or
|
|
70
|
-
yarn add node-network-devtools puppeteer
|
|
44
|
+
pnpm add @mt0926/node-network-devtools
|
|
71
45
|
```
|
|
72
46
|
|
|
73
|
-
**Note**:
|
|
74
|
-
- Puppeteer is required for the GUI browser window. If not installed, you'll see a friendly error message with installation instructions.
|
|
75
|
-
- This package supports both **ESM** and **CommonJS** module systems. See [Module System Support](#module-system-support) for details.
|
|
47
|
+
> **Note**: No extra dependencies like Puppeteer are required! It uses your system's existing browser.
|
|
76
48
|
|
|
77
|
-
### Usage
|
|
49
|
+
### 2. Usage (Recommended)
|
|
78
50
|
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
```bash
|
|
82
|
-
npx node-network-devtools your-script.js
|
|
83
|
-
# or use the short alias
|
|
84
|
-
npx nnd your-script.js
|
|
85
|
-
```
|
|
86
|
-
|
|
87
|
-
The CLI automatically injects the interceptor and opens the GUI.
|
|
88
|
-
|
|
89
|
-
#### Method 2: Using `-r` flag
|
|
90
|
-
|
|
91
|
-
**ESM:**
|
|
92
|
-
```bash
|
|
93
|
-
node --import node-network-devtools/register your-script.js
|
|
94
|
-
```
|
|
95
|
-
|
|
96
|
-
**CommonJS:**
|
|
97
|
-
```bash
|
|
98
|
-
node -r node-network-devtools/register your-script.js
|
|
99
|
-
```
|
|
100
|
-
|
|
101
|
-
#### Method 3: Programmatic
|
|
51
|
+
Just call `install()` at the very beginning of your application entry point.
|
|
102
52
|
|
|
103
53
|
**ESM:**
|
|
104
54
|
```typescript
|
|
105
|
-
import { install } from 'node-network-devtools';
|
|
106
|
-
|
|
107
|
-
await install();
|
|
55
|
+
import { install } from '@mt0926/node-network-devtools';
|
|
108
56
|
|
|
109
|
-
//
|
|
110
|
-
import express from 'express';
|
|
111
|
-
const app = express();
|
|
112
|
-
// ...
|
|
57
|
+
await install(); // Call before any other imports that make network requests
|
|
113
58
|
```
|
|
114
59
|
|
|
115
60
|
**CommonJS:**
|
|
116
61
|
```javascript
|
|
117
|
-
const { install } = require('node-network-devtools');
|
|
62
|
+
const { install } = require('@mt0926/node-network-devtools');
|
|
118
63
|
|
|
119
64
|
(async () => {
|
|
120
65
|
await install();
|
|
121
|
-
|
|
122
|
-
// Your application code
|
|
123
|
-
const express = require('express');
|
|
124
|
-
const app = express();
|
|
125
|
-
// ...
|
|
126
66
|
})();
|
|
127
67
|
```
|
|
128
68
|
|
|
129
|
-
###
|
|
130
|
-
|
|
131
|
-
After starting your application:
|
|
69
|
+
### 3. Advanced: Zero-Code Injection
|
|
132
70
|
|
|
133
|
-
|
|
134
|
-
- Compact window size (800x600 by default)
|
|
135
|
-
- Customizable window size and title
|
|
136
|
-
- No browser chrome or toolbars (app mode)
|
|
71
|
+
If you don't want to modify your source code, you can use Node.js CLI arguments to inject the tool.
|
|
137
72
|
|
|
138
|
-
|
|
73
|
+
**ESM:**
|
|
74
|
+
```bash
|
|
75
|
+
node --import @mt0926/node-network-devtools/register your-script.js
|
|
139
76
|
```
|
|
140
|
-
|
|
77
|
+
|
|
78
|
+
**CommonJS:**
|
|
79
|
+
```bash
|
|
80
|
+
node -r @mt0926/node-network-devtools/register your-script.js
|
|
141
81
|
```
|
|
142
82
|
|
|
143
83
|
## 🖥️ Web GUI
|
|
144
84
|
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
### Minimal Browser Window
|
|
148
|
-
|
|
149
|
-
The GUI opens in a minimal Puppeteer-controlled browser window:
|
|
150
|
-
|
|
151
|
-
- **Compact Size**: Default 800x600, customizable via environment variables
|
|
152
|
-
- **App Mode**: No browser chrome, toolbars, or address bar
|
|
153
|
-
- **Custom Title**: Shows "Node Network DevTools" by default
|
|
154
|
-
- **Fast Launch**: Opens in under 3 seconds
|
|
85
|
+
Once started, a minimal browser window will automatically open showing the real-time request list.
|
|
155
86
|
|
|
156
|
-
|
|
87
|
+
- **Compact size** (800x600) for side-by-side debugging.
|
|
88
|
+
- **Search & Filter** by URL, method, or status.
|
|
89
|
+
- **Details Panel** for headers, payload, and response.
|
|
90
|
+
- **Dark/Light** theme support.
|
|
157
91
|
|
|
158
|
-
|
|
159
|
-
|
|
160
|
-
- 📝 **Details Panel** - View headers, payload, response, and timing
|
|
161
|
-
- 🎨 **Theme Toggle** - Dark/Light theme support
|
|
162
|
-
- ⏸️ **Pause/Resume** - Pause request capture for analysis
|
|
163
|
-
- 🔄 **Real-time Updates** - WebSocket-based live updates
|
|
92
|
+
If you need to access it manually, check the console output for the URL:
|
|
93
|
+
`🚀 Node Network DevTools GUI started at http://localhost:9229`
|
|
164
94
|
|
|
165
95
|
### GUI Configuration
|
|
166
96
|
|
|
167
97
|
```bash
|
|
168
98
|
# Customize window size
|
|
169
|
-
NND_BROWSER_WIDTH=1024 NND_BROWSER_HEIGHT=768
|
|
99
|
+
NND_BROWSER_WIDTH=1024 NND_BROWSER_HEIGHT=768 node --import @mt0926/node-network-devtools/register your-script.js
|
|
170
100
|
|
|
171
101
|
# Customize window title
|
|
172
|
-
NND_BROWSER_TITLE="My App Network Monitor"
|
|
102
|
+
NND_BROWSER_TITLE="My App Network Monitor" node --import @mt0926/node-network-devtools/register your-script.js
|
|
173
103
|
|
|
174
104
|
# Specify GUI port
|
|
175
|
-
NND_GUI_PORT=9230
|
|
105
|
+
NND_GUI_PORT=9230 node --import @mt0926/node-network-devtools/register your-script.js
|
|
176
106
|
|
|
177
107
|
# Specify WebSocket port
|
|
178
|
-
NND_WS_PORT=9231
|
|
108
|
+
NND_WS_PORT=9231 node --import @mt0926/node-network-devtools/register your-script.js
|
|
179
109
|
|
|
180
110
|
# Disable GUI
|
|
181
|
-
NND_GUI_ENABLED=false
|
|
111
|
+
NND_GUI_ENABLED=false node --import @mt0926/node-network-devtools/register your-script.js
|
|
182
112
|
|
|
183
113
|
# Disable auto-open browser
|
|
184
|
-
NND_AUTO_OPEN=false
|
|
114
|
+
NND_AUTO_OPEN=false node --import @mt0926/node-network-devtools/register your-script.js
|
|
185
115
|
```
|
|
186
116
|
|
|
187
117
|
## 🔧 Configuration
|
|
@@ -213,7 +143,7 @@ NND_AUTO_OPEN=false npx nnd your-script.js
|
|
|
213
143
|
### Programmatic Configuration
|
|
214
144
|
|
|
215
145
|
```typescript
|
|
216
|
-
import { setConfig } from 'node-network-devtools';
|
|
146
|
+
import { setConfig } from '@mt0926/node-network-devtools';
|
|
217
147
|
|
|
218
148
|
setConfig({
|
|
219
149
|
maxRequests: 500,
|
|
@@ -233,7 +163,7 @@ setConfig({
|
|
|
233
163
|
```typescript
|
|
234
164
|
// Conditional installation based on environment
|
|
235
165
|
if (process.env.NODE_ENV === 'development') {
|
|
236
|
-
const { install } = await import('node-network-devtools');
|
|
166
|
+
const { install } = await import('@mt0926/node-network-devtools');
|
|
237
167
|
await install();
|
|
238
168
|
}
|
|
239
169
|
```
|
|
@@ -283,7 +213,7 @@ Or configure in `package.json`:
|
|
|
283
213
|
**ESM:**
|
|
284
214
|
```typescript
|
|
285
215
|
import express from 'express';
|
|
286
|
-
import { install } from 'node-network-devtools';
|
|
216
|
+
import { install } from '@mt0926/node-network-devtools';
|
|
287
217
|
|
|
288
218
|
await install();
|
|
289
219
|
|
|
@@ -294,7 +224,7 @@ const app = express();
|
|
|
294
224
|
**CommonJS:**
|
|
295
225
|
```javascript
|
|
296
226
|
const express = require('express');
|
|
297
|
-
const { install } = require('node-network-devtools');
|
|
227
|
+
const { install } = require('@mt0926/node-network-devtools');
|
|
298
228
|
|
|
299
229
|
(async () => {
|
|
300
230
|
await install();
|
|
@@ -317,8 +247,8 @@ This package supports both **ESM (ECMAScript Modules)** and **CommonJS** module
|
|
|
317
247
|
Use `import` statements in projects with `"type": "module"` in package.json or `.mjs` files:
|
|
318
248
|
|
|
319
249
|
```typescript
|
|
320
|
-
import { install, getRequestStore } from 'node-network-devtools';
|
|
321
|
-
import 'node-network-devtools/register';
|
|
250
|
+
import { install, getRequestStore } from '@mt0926/node-network-devtools';
|
|
251
|
+
import '@mt0926/node-network-devtools/register';
|
|
322
252
|
|
|
323
253
|
await install();
|
|
324
254
|
const store = getRequestStore();
|
|
@@ -329,8 +259,8 @@ const store = getRequestStore();
|
|
|
329
259
|
Use `require()` statements in traditional Node.js projects or `.cjs` files:
|
|
330
260
|
|
|
331
261
|
```javascript
|
|
332
|
-
const { install, getRequestStore } = require('node-network-devtools');
|
|
333
|
-
require('node-network-devtools/register');
|
|
262
|
+
const { install, getRequestStore } = require('@mt0926/node-network-devtools');
|
|
263
|
+
require('@mt0926/node-network-devtools/register');
|
|
334
264
|
|
|
335
265
|
(async () => {
|
|
336
266
|
await install();
|
|
@@ -343,8 +273,8 @@ require('node-network-devtools/register');
|
|
|
343
273
|
Full TypeScript support with type definitions for both module systems:
|
|
344
274
|
|
|
345
275
|
```typescript
|
|
346
|
-
import type { Config, IRequestStore } from 'node-network-devtools';
|
|
347
|
-
import { install, getRequestStore } from 'node-network-devtools';
|
|
276
|
+
import type { Config, IRequestStore } from '@mt0926/node-network-devtools';
|
|
277
|
+
import { install, getRequestStore } from '@mt0926/node-network-devtools';
|
|
348
278
|
|
|
349
279
|
const config: Config = {
|
|
350
280
|
maxRequests: 500,
|
|
@@ -371,23 +301,23 @@ No configuration needed - it just works! 🎉
|
|
|
371
301
|
|
|
372
302
|
```typescript
|
|
373
303
|
// Quick install
|
|
374
|
-
import { install, startGUI, stopGUI } from 'node-network-devtools';
|
|
304
|
+
import { install, startGUI, stopGUI } from '@mt0926/node-network-devtools';
|
|
375
305
|
|
|
376
306
|
// Configuration
|
|
377
|
-
import { getConfig, setConfig, resetConfig } from 'node-network-devtools';
|
|
307
|
+
import { getConfig, setConfig, resetConfig } from '@mt0926/node-network-devtools';
|
|
378
308
|
|
|
379
309
|
// Request store
|
|
380
|
-
import { getRequestStore } from 'node-network-devtools';
|
|
310
|
+
import { getRequestStore } from '@mt0926/node-network-devtools';
|
|
381
311
|
|
|
382
312
|
// Context tracing
|
|
383
313
|
import {
|
|
384
314
|
runWithTrace,
|
|
385
315
|
getCurrentTraceId,
|
|
386
316
|
generateTraceId
|
|
387
|
-
} from 'node-network-devtools';
|
|
317
|
+
} from '@mt0926/node-network-devtools';
|
|
388
318
|
|
|
389
319
|
// Interceptors
|
|
390
|
-
import { HttpPatcher, UndiciPatcher } from 'node-network-devtools';
|
|
320
|
+
import { HttpPatcher, UndiciPatcher } from '@mt0926/node-network-devtools';
|
|
391
321
|
```
|
|
392
322
|
|
|
393
323
|
### Request Tracing
|
|
@@ -395,7 +325,7 @@ import { HttpPatcher, UndiciPatcher } from 'node-network-devtools';
|
|
|
395
325
|
Correlate multiple requests in the same business flow:
|
|
396
326
|
|
|
397
327
|
```typescript
|
|
398
|
-
import { runWithTrace, getRequestStore } from 'node-network-devtools';
|
|
328
|
+
import { runWithTrace, getRequestStore } from '@mt0926/node-network-devtools';
|
|
399
329
|
|
|
400
330
|
await runWithTrace('user-login', async () => {
|
|
401
331
|
// These requests will be correlated with the same traceId
|
|
@@ -426,7 +356,7 @@ Check the [examples](./examples) directory for more usage examples:
|
|
|
426
356
|
2. **Undici Interception**: Uses `Agent.compose()` to register interceptors for fetch requests
|
|
427
357
|
3. **Context Propagation**: Uses `AsyncLocalStorage` to pass TraceID through async call chains
|
|
428
358
|
4. **Event Bridge**: Forwards intercepted requests to WebSocket clients for real-time GUI updates
|
|
429
|
-
5. **
|
|
359
|
+
5. **Native Browser Launch**: Detects and launches your system's browser (Chrome/Edge/Chromium) in a dedicated app-mode window.
|
|
430
360
|
|
|
431
361
|
## 🤝 Contributing
|
|
432
362
|
|
|
@@ -464,7 +394,7 @@ MIT © [ddddd](https://github.com/dong0926)
|
|
|
464
394
|
|
|
465
395
|
- 🐛 [Report Issues](https://github.com/dong0926/node-network-devtools/issues)
|
|
466
396
|
- 💬 [Discussions](https://github.com/dong0926/node-network-devtools/discussions)
|
|
467
|
-
- 📧 Email:
|
|
397
|
+
- 📧 Email: xx630133368@gmail.com
|
|
468
398
|
|
|
469
399
|
---
|
|
470
400
|
|
package/README.zh-CN.md
CHANGED
|
@@ -2,11 +2,11 @@
|
|
|
2
2
|
|
|
3
3
|
# 🔍 Node Network DevTools
|
|
4
4
|
|
|
5
|
-
**Node.js
|
|
5
|
+
**Node.js 强大的零配置网络调试助手。**
|
|
6
|
+
*实时监控所有 HTTP、HTTPS 和 Fetch/Undici 请求,提供类似 Chrome DevTools 的极简 Web GUI 体验。*
|
|
6
7
|
|
|
7
|
-
[](https://www.npmjs.com/package/node-network-devtools)
|
|
8
|
+
[](https://www.npmjs.com/package/@mt0926/node-network-devtools)
|
|
8
9
|
[](https://opensource.org/licenses/MIT)
|
|
9
|
-
[](https://nodejs.org)
|
|
10
10
|
|
|
11
11
|
[English](./README.md) | [中文文档](#)
|
|
12
12
|
|
|
@@ -14,151 +14,105 @@
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
-
##
|
|
17
|
+
## 🚀 为什么选择 Node Network DevTools?
|
|
18
18
|
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
- 使用 Puppeteer 启动极简浏览器窗口显示 GUI
|
|
22
|
-
- 拦截所有网络请求可能影响性能
|
|
23
|
-
- 在内存中存储请求/响应数据
|
|
24
|
-
- 不适合生产环境工作负载
|
|
25
|
-
|
|
26
|
-
### 在生产环境中禁用
|
|
27
|
-
|
|
28
|
-
```javascript
|
|
29
|
-
// 条件安装
|
|
30
|
-
if (process.env.NODE_ENV === 'development') {
|
|
31
|
-
await install();
|
|
32
|
-
}
|
|
33
|
-
```
|
|
34
|
-
|
|
35
|
-
或使用环境变量:
|
|
36
|
-
|
|
37
|
-
```bash
|
|
38
|
-
# 禁用 GUI 和自动打开
|
|
39
|
-
NND_GUI_ENABLED=false NND_AUTO_OPEN=false node your-app.js
|
|
40
|
-
```
|
|
19
|
+
还在用 `console.log` 打印每一个请求和响应吗?**Node Network DevTools** 将浏览器“网络”面板的熟悉体验带到了 Node.js 后端。无论是在调试外部 API 调用、微服务还是 Next.js Server Actions,你都可以实时查看每一个细节。
|
|
41
20
|
|
|
42
21
|
## ✨ 特性
|
|
43
22
|
|
|
44
|
-
-
|
|
45
|
-
-
|
|
46
|
-
-
|
|
47
|
-
-
|
|
48
|
-
- 🔗
|
|
49
|
-
- 🛡️
|
|
50
|
-
- ⚡
|
|
51
|
-
- 📦
|
|
23
|
+
- 💎 **类似 DevTools 的体验** - 熟悉的响应式 Web GUI,用于检查 Header、Payload 和 Response。
|
|
24
|
+
- 🔌 **全能拦截** - 原生支持 `http/https` 模块以及现代的 `fetch/undici` (Node.js 18+)。
|
|
25
|
+
- 🛠️ **零侵入开发** - 只需一行代码或一个简单的 CLI 标志即可接入项目。
|
|
26
|
+
- 🖥️ **极简浏览器窗口** - 自动启动基于系统原生浏览器 (Chrome, Edge, 或 Chromium) 的紧凑 App 模式窗口。
|
|
27
|
+
- 🔗 **智能请求追踪** - 利用 `AsyncLocalStorage` 自动关联同一业务流中的多个异步请求。
|
|
28
|
+
- 🛡️ **内置脱敏** - 自动隐藏 `Authorization` 和 `Cookie` 等敏感信息,保障安全。
|
|
29
|
+
- ⚡ **框架友好** - 无缝集成 Next.js, Express, Fastify 等主流框架。
|
|
30
|
+
- 📦 **双模块支持** - 完美兼容 **ESM** 和 **CommonJS**。
|
|
52
31
|
|
|
53
32
|
## 📸 截图
|
|
54
33
|
|
|
55
34
|
### Web GUI 界面
|
|
56
35
|

|
|
57
36
|
|
|
58
|
-
### Chrome DevTools 集成
|
|
59
|
-

|
|
60
|
-
|
|
61
37
|
## 🚀 快速开始
|
|
62
38
|
|
|
63
|
-
### 安装
|
|
39
|
+
### 1. 安装
|
|
64
40
|
|
|
65
41
|
```bash
|
|
66
|
-
npm install node-network-devtools
|
|
67
|
-
# 或
|
|
68
|
-
pnpm add node-network-devtools puppeteer
|
|
42
|
+
npm install @mt0926/node-network-devtools
|
|
69
43
|
# 或
|
|
70
|
-
|
|
44
|
+
pnpm add @mt0926/node-network-devtools
|
|
71
45
|
```
|
|
72
46
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
### 使用
|
|
76
|
-
|
|
77
|
-
#### 方式一:CLI(推荐)
|
|
47
|
+
> **注意**: 无需安装 Puppeteer 等额外依赖!工具会自动检测并使用系统中已有的浏览器。
|
|
78
48
|
|
|
79
|
-
|
|
80
|
-
npx node-network-devtools your-script.js
|
|
81
|
-
# 或使用短别名
|
|
82
|
-
npx nnd your-script.js
|
|
83
|
-
```
|
|
49
|
+
### 2. 使用方式 (推荐)
|
|
84
50
|
|
|
85
|
-
|
|
51
|
+
在应用入口文件的最顶部调用 `install()`。
|
|
86
52
|
|
|
87
|
-
|
|
53
|
+
**ESM:**
|
|
54
|
+
```typescript
|
|
55
|
+
import { install } from '@mt0926/node-network-devtools';
|
|
88
56
|
|
|
89
|
-
|
|
90
|
-
node -r node-network-devtools/register your-script.js
|
|
57
|
+
await install(); // 确保在发送任何网络请求的 import 之前调用
|
|
91
58
|
```
|
|
92
59
|
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
import { install } from 'node-network-devtools';
|
|
97
|
-
|
|
98
|
-
await install();
|
|
60
|
+
**CommonJS:**
|
|
61
|
+
```javascript
|
|
62
|
+
const { install } = require('@mt0926/node-network-devtools');
|
|
99
63
|
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
// ...
|
|
64
|
+
(async () => {
|
|
65
|
+
await install();
|
|
66
|
+
})();
|
|
104
67
|
```
|
|
105
68
|
|
|
106
|
-
###
|
|
69
|
+
### 3. 高级方案:零代码注入
|
|
107
70
|
|
|
108
|
-
|
|
71
|
+
如果你不想修改源代码,可以使用 Node.js 的命令行参数来注入工具。
|
|
109
72
|
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
- 无浏览器工具栏或地址栏(app 模式)
|
|
114
|
-
|
|
115
|
-
要手动访问 GUI,请查看控制台输出中的 URL:
|
|
73
|
+
**ESM:**
|
|
74
|
+
```bash
|
|
75
|
+
node --import @mt0926/node-network-devtools/register your-script.js
|
|
116
76
|
```
|
|
117
|
-
|
|
77
|
+
|
|
78
|
+
**CommonJS:**
|
|
79
|
+
```bash
|
|
80
|
+
node -r @mt0926/node-network-devtools/register your-script.js
|
|
118
81
|
```
|
|
119
82
|
|
|
120
83
|
## 🖥️ Web GUI
|
|
121
84
|
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
### 极简浏览器窗口
|
|
125
|
-
|
|
126
|
-
GUI 在极简的 Puppeteer 控制的浏览器窗口中打开:
|
|
85
|
+
启动后,一个极简的浏览器窗口会自动打开并显示实时请求列表。
|
|
127
86
|
|
|
128
|
-
-
|
|
129
|
-
-
|
|
130
|
-
-
|
|
131
|
-
-
|
|
87
|
+
- **紧凑尺寸** (800x600),方便分屏调试。
|
|
88
|
+
- **搜索与过滤** - 按 URL、方法或状态码筛选。
|
|
89
|
+
- **详情面板** - 查看 Header、Payload 和 Response。
|
|
90
|
+
- **深色/浅色模式**支持。
|
|
132
91
|
|
|
133
|
-
|
|
92
|
+
如果需要手动访问,请在控制台输出中查找 URL:
|
|
93
|
+
`🚀 Node Network DevTools GUI started at http://localhost:9229`
|
|
134
94
|
|
|
135
|
-
- 📋 **请求列表** - 实时显示所有网络请求
|
|
136
|
-
- 🔍 **搜索过滤** - 按 URL、方法、状态码和类型过滤
|
|
137
|
-
- 📝 **详情面板** - 查看请求头、请求体、响应和时序信息
|
|
138
|
-
- 🎨 **主题切换** - 支持深色/浅色主题
|
|
139
|
-
- ⏸️ **暂停/恢复** - 暂停请求捕获以便分析
|
|
140
|
-
- 🔄 **实时更新** - 基于 WebSocket 的实时更新
|
|
141
95
|
|
|
142
96
|
### GUI 配置
|
|
143
97
|
|
|
144
98
|
```bash
|
|
145
99
|
# 自定义窗口大小
|
|
146
|
-
NND_BROWSER_WIDTH=1024 NND_BROWSER_HEIGHT=768
|
|
100
|
+
NND_BROWSER_WIDTH=1024 NND_BROWSER_HEIGHT=768 node --import @mt0926/node-network-devtools/register your-script.js
|
|
147
101
|
|
|
148
102
|
# 自定义窗口标题
|
|
149
|
-
NND_BROWSER_TITLE="我的应用网络监控"
|
|
103
|
+
NND_BROWSER_TITLE="我的应用网络监控" node --import @mt0926/node-network-devtools/register your-script.js
|
|
150
104
|
|
|
151
105
|
# 指定 GUI 端口
|
|
152
|
-
NND_GUI_PORT=9230
|
|
106
|
+
NND_GUI_PORT=9230 node --import @mt0926/node-network-devtools/register your-script.js
|
|
153
107
|
|
|
154
108
|
# 指定 WebSocket 端口
|
|
155
|
-
NND_WS_PORT=9231
|
|
109
|
+
NND_WS_PORT=9231 node --import @mt0926/node-network-devtools/register your-script.js
|
|
156
110
|
|
|
157
111
|
# 禁用 GUI
|
|
158
|
-
NND_GUI_ENABLED=false
|
|
112
|
+
NND_GUI_ENABLED=false node --import @mt0926/node-network-devtools/register your-script.js
|
|
159
113
|
|
|
160
114
|
# 禁用自动打开浏览器
|
|
161
|
-
NND_AUTO_OPEN=false
|
|
115
|
+
NND_AUTO_OPEN=false node --import @mt0926/node-network-devtools/register your-script.js
|
|
162
116
|
```
|
|
163
117
|
|
|
164
118
|
## 🔧 配置
|
|
@@ -190,7 +144,7 @@ NND_AUTO_OPEN=false npx nnd your-script.js
|
|
|
190
144
|
### 编程配置
|
|
191
145
|
|
|
192
146
|
```typescript
|
|
193
|
-
import { setConfig } from 'node-network-devtools';
|
|
147
|
+
import { setConfig } from '@mt0926/node-network-devtools';
|
|
194
148
|
|
|
195
149
|
setConfig({
|
|
196
150
|
maxRequests: 500,
|
|
@@ -210,7 +164,7 @@ setConfig({
|
|
|
210
164
|
```typescript
|
|
211
165
|
// 根据环境条件安装
|
|
212
166
|
if (process.env.NODE_ENV === 'development') {
|
|
213
|
-
const { install } = await import('node-network-devtools');
|
|
167
|
+
const { install } = await import('@mt0926/node-network-devtools');
|
|
214
168
|
await install();
|
|
215
169
|
}
|
|
216
170
|
```
|
|
@@ -259,7 +213,7 @@ npm run dev
|
|
|
259
213
|
|
|
260
214
|
```typescript
|
|
261
215
|
import express from 'express';
|
|
262
|
-
import { install } from 'node-network-devtools';
|
|
216
|
+
import { install } from '@mt0926/node-network-devtools';
|
|
263
217
|
|
|
264
218
|
await install();
|
|
265
219
|
|
|
@@ -277,23 +231,23 @@ const app = express();
|
|
|
277
231
|
|
|
278
232
|
```typescript
|
|
279
233
|
// 快速安装
|
|
280
|
-
import { install, startGUI, stopGUI } from 'node-network-devtools';
|
|
234
|
+
import { install, startGUI, stopGUI } from '@mt0926/node-network-devtools';
|
|
281
235
|
|
|
282
236
|
// 配置
|
|
283
|
-
import { getConfig, setConfig, resetConfig } from 'node-network-devtools';
|
|
237
|
+
import { getConfig, setConfig, resetConfig } from '@mt0926/node-network-devtools';
|
|
284
238
|
|
|
285
239
|
// 请求存储
|
|
286
|
-
import { getRequestStore } from 'node-network-devtools';
|
|
240
|
+
import { getRequestStore } from '@mt0926/node-network-devtools';
|
|
287
241
|
|
|
288
242
|
// 上下文追踪
|
|
289
243
|
import {
|
|
290
244
|
runWithTrace,
|
|
291
245
|
getCurrentTraceId,
|
|
292
246
|
generateTraceId
|
|
293
|
-
} from 'node-network-devtools';
|
|
247
|
+
} from '@mt0926/node-network-devtools';
|
|
294
248
|
|
|
295
249
|
// 拦截器
|
|
296
|
-
import { HttpPatcher, UndiciPatcher } from 'node-network-devtools';
|
|
250
|
+
import { HttpPatcher, UndiciPatcher } from '@mt0926/node-network-devtools';
|
|
297
251
|
```
|
|
298
252
|
|
|
299
253
|
### 请求追踪
|
|
@@ -301,7 +255,7 @@ import { HttpPatcher, UndiciPatcher } from 'node-network-devtools';
|
|
|
301
255
|
关联同一业务流程中的多个请求:
|
|
302
256
|
|
|
303
257
|
```typescript
|
|
304
|
-
import { runWithTrace, getRequestStore } from 'node-network-devtools';
|
|
258
|
+
import { runWithTrace, getRequestStore } from '@mt0926/node-network-devtools';
|
|
305
259
|
|
|
306
260
|
await runWithTrace('user-login', async () => {
|
|
307
261
|
// 这些请求会被关联到同一个 traceId
|
|
@@ -331,7 +285,7 @@ const requests = store.getByTraceId('user-login');
|
|
|
331
285
|
2. **Undici 拦截**:使用 `Agent.compose()` 注册拦截器捕获 fetch 请求
|
|
332
286
|
3. **上下文传递**:使用 `AsyncLocalStorage` 在异步调用链中传递 TraceID
|
|
333
287
|
4. **事件桥接**:将拦截的请求转发到 WebSocket 客户端以实现 GUI 实时更新
|
|
334
|
-
5.
|
|
288
|
+
5. **原生浏览器启动**:自动检测并启动系统中的浏览器 (Chrome/Edge/Chromium),并以专用的 App 模式窗口运行。
|
|
335
289
|
|
|
336
290
|
## 🤝 贡献
|
|
337
291
|
|
|
@@ -369,7 +323,7 @@ MIT © [ddddd](https://github.com/dong0926)
|
|
|
369
323
|
|
|
370
324
|
- 🐛 [报告问题](https://github.com/dong0926/node-network-devtools/issues)
|
|
371
325
|
- 💬 [讨论](https://github.com/dong0926/node-network-devtools/discussions)
|
|
372
|
-
- 📧 邮箱:
|
|
326
|
+
- 📧 邮箱:xx630133368@gmail.com
|
|
373
327
|
|
|
374
328
|
---
|
|
375
329
|
|