@mt0926/node-network-devtools 0.1.1 → 0.1.3
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 +91 -19
- package/README.zh-CN.md +95 -23
- package/dist/esm/adapters/axios.js +2 -0
- package/dist/esm/adapters/axios.js.map +1 -0
- package/dist/esm/config.js +14 -6
- package/dist/esm/config.js.map +1 -1
- package/dist/esm/gui/browser-detector.js +256 -0
- package/dist/esm/gui/browser-detector.js.map +1 -0
- package/dist/esm/gui/browser-launcher.js +265 -78
- package/dist/esm/gui/browser-launcher.js.map +1 -1
- package/dist/esm/gui/server.js.map +1 -1
- package/dist/esm/index.js +6 -10
- package/dist/esm/index.js.map +1 -1
- package/dist/esm/interceptors/http-patcher.js +68 -3
- package/dist/esm/interceptors/http-patcher.js.map +1 -1
- package/dist/esm/interceptors/undici-patcher.js +20 -0
- package/dist/esm/interceptors/undici-patcher.js.map +1 -1
- package/dist/esm/register.js +5 -47
- package/dist/esm/register.js.map +1 -1
- package/dist/types/adapters/axios.d.ts +2 -0
- package/dist/types/adapters/axios.d.ts.map +1 -0
- package/dist/types/config.d.ts +15 -6
- package/dist/types/config.d.ts.map +1 -1
- package/dist/types/gui/browser-detector.d.ts +68 -0
- package/dist/types/gui/browser-detector.d.ts.map +1 -0
- package/dist/types/gui/browser-launcher.d.ts +58 -13
- package/dist/types/gui/browser-launcher.d.ts.map +1 -1
- package/dist/types/gui/server.d.ts +0 -1
- package/dist/types/gui/server.d.ts.map +1 -1
- package/dist/types/index.d.ts +2 -3
- package/dist/types/index.d.ts.map +1 -1
- package/dist/types/interceptors/http-patcher.d.ts.map +1 -1
- package/dist/types/interceptors/undici-patcher.d.ts.map +1 -1
- package/dist/types/register.d.ts +2 -6
- package/dist/types/register.d.ts.map +1 -1
- package/package.json +1 -5
- package/BUILD.md +0 -204
- package/dist/esm/cdp/cdp-bridge.js +0 -312
- package/dist/esm/cdp/cdp-bridge.js.map +0 -1
- package/dist/types/cdp/cdp-bridge.d.ts +0 -86
- package/dist/types/cdp/cdp-bridge.d.ts.map +0 -1
package/README.md
CHANGED
|
@@ -14,12 +14,37 @@
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
+
## ⚠️ Development Tool Only
|
|
18
|
+
|
|
19
|
+
**This tool is designed for development environments only. Do NOT use in production!**
|
|
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
|
+
```
|
|
41
|
+
|
|
17
42
|
## ✨ Features
|
|
18
43
|
|
|
19
44
|
- 🔍 **Dual Interception** - Supports both `http/https` modules and `undici/fetch` API
|
|
20
45
|
- 🎯 **Zero Intrusion** - Auto-inject via `-r` or `--import`, no code changes needed
|
|
21
|
-
-
|
|
22
|
-
-
|
|
46
|
+
- 🖥️ **Minimal Browser Window** - Puppeteer-powered compact GUI window (800x600)
|
|
47
|
+
- 📊 **Built-in Web GUI** - Chrome DevTools-like interface with real-time updates
|
|
23
48
|
- 🔗 **Request Tracing** - AsyncLocalStorage-based request correlation
|
|
24
49
|
- 🛡️ **Security** - Auto-redact sensitive headers (Authorization, Cookie, etc.)
|
|
25
50
|
- ⚡ **Next.js Compatible** - Preserves `next.revalidate`, `next.tags` options
|
|
@@ -38,13 +63,15 @@
|
|
|
38
63
|
### Installation
|
|
39
64
|
|
|
40
65
|
```bash
|
|
41
|
-
npm install node-network-devtools
|
|
66
|
+
npm install node-network-devtools puppeteer
|
|
42
67
|
# or
|
|
43
|
-
pnpm add node-network-devtools
|
|
68
|
+
pnpm add node-network-devtools puppeteer
|
|
44
69
|
# or
|
|
45
|
-
yarn add node-network-devtools
|
|
70
|
+
yarn add node-network-devtools puppeteer
|
|
46
71
|
```
|
|
47
72
|
|
|
73
|
+
**Note**: Puppeteer is required for the GUI browser window. If not installed, you'll see a friendly error message with installation instructions.
|
|
74
|
+
|
|
48
75
|
### Usage
|
|
49
76
|
|
|
50
77
|
#### Method 1: CLI (Recommended)
|
|
@@ -55,12 +82,12 @@ npx node-network-devtools your-script.js
|
|
|
55
82
|
npx nnd your-script.js
|
|
56
83
|
```
|
|
57
84
|
|
|
58
|
-
The CLI automatically
|
|
85
|
+
The CLI automatically injects the interceptor and opens the GUI.
|
|
59
86
|
|
|
60
87
|
#### Method 2: Using `-r` flag
|
|
61
88
|
|
|
62
89
|
```bash
|
|
63
|
-
node
|
|
90
|
+
node -r node-network-devtools/register your-script.js
|
|
64
91
|
```
|
|
65
92
|
|
|
66
93
|
#### Method 3: Programmatic
|
|
@@ -80,13 +107,29 @@ const app = express();
|
|
|
80
107
|
|
|
81
108
|
After starting your application:
|
|
82
109
|
|
|
83
|
-
|
|
84
|
-
|
|
110
|
+
- **Web GUI** (Default): A minimal browser window will automatically open showing the GUI
|
|
111
|
+
- Compact window size (800x600 by default)
|
|
112
|
+
- Customizable window size and title
|
|
113
|
+
- No browser chrome or toolbars (app mode)
|
|
114
|
+
|
|
115
|
+
To manually access the GUI, look for the URL in the console output:
|
|
116
|
+
```
|
|
117
|
+
🚀 Node Network DevTools GUI started at http://localhost:9229
|
|
118
|
+
```
|
|
85
119
|
|
|
86
120
|
## 🖥️ Web GUI
|
|
87
121
|
|
|
88
122
|
The built-in Web GUI provides a Chrome DevTools-like experience for monitoring network requests.
|
|
89
123
|
|
|
124
|
+
### Minimal Browser Window
|
|
125
|
+
|
|
126
|
+
The GUI opens in a minimal Puppeteer-controlled browser window:
|
|
127
|
+
|
|
128
|
+
- **Compact Size**: Default 800x600, customizable via environment variables
|
|
129
|
+
- **App Mode**: No browser chrome, toolbars, or address bar
|
|
130
|
+
- **Custom Title**: Shows "Node Network DevTools" by default
|
|
131
|
+
- **Fast Launch**: Opens in under 3 seconds
|
|
132
|
+
|
|
90
133
|
### Features
|
|
91
134
|
|
|
92
135
|
- 📋 **Request List** - Real-time display of all network requests
|
|
@@ -99,6 +142,12 @@ The built-in Web GUI provides a Chrome DevTools-like experience for monitoring n
|
|
|
99
142
|
### GUI Configuration
|
|
100
143
|
|
|
101
144
|
```bash
|
|
145
|
+
# Customize window size
|
|
146
|
+
NND_BROWSER_WIDTH=1024 NND_BROWSER_HEIGHT=768 npx nnd your-script.js
|
|
147
|
+
|
|
148
|
+
# Customize window title
|
|
149
|
+
NND_BROWSER_TITLE="My App Network Monitor" npx nnd your-script.js
|
|
150
|
+
|
|
102
151
|
# Specify GUI port
|
|
103
152
|
NND_GUI_PORT=9230 npx nnd your-script.js
|
|
104
153
|
|
|
@@ -125,7 +174,6 @@ NND_AUTO_OPEN=false npx nnd your-script.js
|
|
|
125
174
|
| `NND_INTERCEPT_HTTP` | Intercept http/https | true |
|
|
126
175
|
| `NND_INTERCEPT_UNDICI` | Intercept undici/fetch | true |
|
|
127
176
|
| `NND_REDACT_HEADERS` | Headers to redact (comma-separated) | authorization,cookie |
|
|
128
|
-
| `NND_AUTO_CONNECT` | Auto-connect to CDP | true |
|
|
129
177
|
|
|
130
178
|
#### GUI Settings
|
|
131
179
|
|
|
@@ -135,6 +183,9 @@ NND_AUTO_OPEN=false npx nnd your-script.js
|
|
|
135
183
|
| `NND_GUI_PORT` | GUI server port | auto |
|
|
136
184
|
| `NND_WS_PORT` | WebSocket port | auto |
|
|
137
185
|
| `NND_AUTO_OPEN` | Auto-open browser | true |
|
|
186
|
+
| `NND_BROWSER_WIDTH` | Browser window width | 800 |
|
|
187
|
+
| `NND_BROWSER_HEIGHT` | Browser window height | 600 |
|
|
188
|
+
| `NND_BROWSER_TITLE` | Browser window title | Node Network DevTools |
|
|
138
189
|
|
|
139
190
|
### Programmatic Configuration
|
|
140
191
|
|
|
@@ -147,9 +198,30 @@ setConfig({
|
|
|
147
198
|
redactHeaders: ['authorization', 'cookie', 'x-api-key'],
|
|
148
199
|
guiEnabled: true,
|
|
149
200
|
autoOpen: false,
|
|
201
|
+
browserWindowSize: { width: 1024, height: 768 },
|
|
202
|
+
browserWindowTitle: 'My App Network Monitor',
|
|
150
203
|
});
|
|
151
204
|
```
|
|
152
205
|
|
|
206
|
+
### Disabling in Production
|
|
207
|
+
|
|
208
|
+
**Important**: Always disable this tool in production environments!
|
|
209
|
+
|
|
210
|
+
```typescript
|
|
211
|
+
// Conditional installation based on environment
|
|
212
|
+
if (process.env.NODE_ENV === 'development') {
|
|
213
|
+
const { install } = await import('node-network-devtools');
|
|
214
|
+
await install();
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
Or use environment variables:
|
|
219
|
+
|
|
220
|
+
```bash
|
|
221
|
+
# In production, disable GUI and auto-open
|
|
222
|
+
NODE_ENV=production NND_GUI_ENABLED=false NND_AUTO_OPEN=false node your-app.js
|
|
223
|
+
```
|
|
224
|
+
|
|
153
225
|
## 🎯 Framework Integration
|
|
154
226
|
|
|
155
227
|
### Next.js
|
|
@@ -165,10 +237,10 @@ module.exports = {
|
|
|
165
237
|
};
|
|
166
238
|
```
|
|
167
239
|
|
|
168
|
-
3. Start
|
|
240
|
+
3. Start your development server:
|
|
169
241
|
|
|
170
242
|
```bash
|
|
171
|
-
|
|
243
|
+
npm run dev
|
|
172
244
|
```
|
|
173
245
|
|
|
174
246
|
Or configure in `package.json`:
|
|
@@ -176,11 +248,13 @@ Or configure in `package.json`:
|
|
|
176
248
|
```json
|
|
177
249
|
{
|
|
178
250
|
"scripts": {
|
|
179
|
-
"dev
|
|
251
|
+
"dev": "next dev"
|
|
180
252
|
}
|
|
181
253
|
}
|
|
182
254
|
```
|
|
183
255
|
|
|
256
|
+
**Note**: The tool will automatically start when Next.js loads the instrumentation hook.
|
|
257
|
+
|
|
184
258
|
### Express
|
|
185
259
|
|
|
186
260
|
```typescript
|
|
@@ -220,9 +294,6 @@ import {
|
|
|
220
294
|
|
|
221
295
|
// Interceptors
|
|
222
296
|
import { HttpPatcher, UndiciPatcher } from 'node-network-devtools';
|
|
223
|
-
|
|
224
|
-
// CDP Bridge
|
|
225
|
-
import { getCDPBridge, isInspectorEnabled } from 'node-network-devtools';
|
|
226
297
|
```
|
|
227
298
|
|
|
228
299
|
### Request Tracing
|
|
@@ -258,9 +329,9 @@ Check the [examples](./examples) directory for more usage examples:
|
|
|
258
329
|
|
|
259
330
|
1. **HTTP Interception**: Uses `@mswjs/interceptors` to intercept http/https module requests
|
|
260
331
|
2. **Undici Interception**: Uses `Agent.compose()` to register interceptors for fetch requests
|
|
261
|
-
3. **
|
|
262
|
-
4. **
|
|
263
|
-
5. **
|
|
332
|
+
3. **Context Propagation**: Uses `AsyncLocalStorage` to pass TraceID through async call chains
|
|
333
|
+
4. **Event Bridge**: Forwards intercepted requests to WebSocket clients for real-time GUI updates
|
|
334
|
+
5. **Minimal Browser**: Uses Puppeteer to launch a compact browser window in app mode
|
|
264
335
|
|
|
265
336
|
## 🤝 Contributing
|
|
266
337
|
|
|
@@ -292,6 +363,7 @@ MIT © [ddddd](https://github.com/dong0926)
|
|
|
292
363
|
- [@mswjs/interceptors](https://github.com/mswjs/interceptors) - HTTP request interception
|
|
293
364
|
- [undici](https://github.com/nodejs/undici) - HTTP/1.1 client
|
|
294
365
|
- [ws](https://github.com/websockets/ws) - WebSocket implementation
|
|
366
|
+
- [puppeteer](https://github.com/puppeteer/puppeteer) - Browser automation
|
|
295
367
|
|
|
296
368
|
## 📮 Support
|
|
297
369
|
|
package/README.zh-CN.md
CHANGED
|
@@ -14,14 +14,39 @@
|
|
|
14
14
|
|
|
15
15
|
---
|
|
16
16
|
|
|
17
|
+
## ⚠️ 仅限开发环境使用
|
|
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
|
+
```
|
|
41
|
+
|
|
17
42
|
## ✨ 特性
|
|
18
43
|
|
|
19
|
-
- 🔍
|
|
20
|
-
- 🎯 **零侵入** - 通过 `-r` 或 `--import`
|
|
21
|
-
-
|
|
22
|
-
-
|
|
44
|
+
- 🔍 **双重拦截** - 同时支持 `http/https` 模块和 `undici/fetch` API
|
|
45
|
+
- 🎯 **零侵入** - 通过 `-r` 或 `--import` 自动注入,无需修改代码
|
|
46
|
+
- 🖥️ **极简浏览器窗口** - Puppeteer 驱动的紧凑 GUI 窗口(800x600)
|
|
47
|
+
- 📊 **内置 Web GUI** - 类似 Chrome DevTools 的界面,实时更新
|
|
23
48
|
- 🔗 **请求追踪** - 基于 AsyncLocalStorage 的请求关联
|
|
24
|
-
- 🛡️
|
|
49
|
+
- 🛡️ **安全性** - 自动脱敏敏感请求头(Authorization、Cookie 等)
|
|
25
50
|
- ⚡ **Next.js 兼容** - 保留 `next.revalidate`、`next.tags` 等选项
|
|
26
51
|
- 📦 **TypeScript** - 完整的 TypeScript 支持和类型定义
|
|
27
52
|
|
|
@@ -38,13 +63,15 @@
|
|
|
38
63
|
### 安装
|
|
39
64
|
|
|
40
65
|
```bash
|
|
41
|
-
npm install node-network-devtools
|
|
66
|
+
npm install node-network-devtools puppeteer
|
|
42
67
|
# 或
|
|
43
|
-
pnpm add node-network-devtools
|
|
68
|
+
pnpm add node-network-devtools puppeteer
|
|
44
69
|
# 或
|
|
45
|
-
yarn add node-network-devtools
|
|
70
|
+
yarn add node-network-devtools puppeteer
|
|
46
71
|
```
|
|
47
72
|
|
|
73
|
+
**注意**:Puppeteer 是 GUI 浏览器窗口所必需的。如果未安装,您会看到友好的错误消息和安装指引。
|
|
74
|
+
|
|
48
75
|
### 使用
|
|
49
76
|
|
|
50
77
|
#### 方式一:CLI(推荐)
|
|
@@ -55,12 +82,12 @@ npx node-network-devtools your-script.js
|
|
|
55
82
|
npx nnd your-script.js
|
|
56
83
|
```
|
|
57
84
|
|
|
58
|
-
CLI
|
|
85
|
+
CLI 会自动注入拦截器并打开 GUI。
|
|
59
86
|
|
|
60
87
|
#### 方式二:使用 `-r` 标志
|
|
61
88
|
|
|
62
89
|
```bash
|
|
63
|
-
node
|
|
90
|
+
node -r node-network-devtools/register your-script.js
|
|
64
91
|
```
|
|
65
92
|
|
|
66
93
|
#### 方式三:编程方式
|
|
@@ -80,18 +107,34 @@ const app = express();
|
|
|
80
107
|
|
|
81
108
|
启动应用后:
|
|
82
109
|
|
|
83
|
-
|
|
84
|
-
|
|
110
|
+
- **Web GUI**(默认):极简浏览器窗口会自动打开显示 GUI
|
|
111
|
+
- 紧凑的窗口大小(默认 800x600)
|
|
112
|
+
- 可自定义窗口大小和标题
|
|
113
|
+
- 无浏览器工具栏或地址栏(app 模式)
|
|
114
|
+
|
|
115
|
+
要手动访问 GUI,请查看控制台输出中的 URL:
|
|
116
|
+
```
|
|
117
|
+
🚀 Node Network DevTools GUI started at http://localhost:9229
|
|
118
|
+
```
|
|
85
119
|
|
|
86
120
|
## 🖥️ Web GUI
|
|
87
121
|
|
|
88
122
|
内置的 Web GUI 提供类似 Chrome DevTools 的网络请求监控体验。
|
|
89
123
|
|
|
124
|
+
### 极简浏览器窗口
|
|
125
|
+
|
|
126
|
+
GUI 在极简的 Puppeteer 控制的浏览器窗口中打开:
|
|
127
|
+
|
|
128
|
+
- **紧凑尺寸**:默认 800x600,可通过环境变量自定义
|
|
129
|
+
- **App 模式**:无浏览器工具栏、地址栏或其他界面元素
|
|
130
|
+
- **自定义标题**:默认显示 "Node Network DevTools"
|
|
131
|
+
- **快速启动**:3 秒内打开
|
|
132
|
+
|
|
90
133
|
### 功能特性
|
|
91
134
|
|
|
92
135
|
- 📋 **请求列表** - 实时显示所有网络请求
|
|
93
136
|
- 🔍 **搜索过滤** - 按 URL、方法、状态码和类型过滤
|
|
94
|
-
- 📝 **详情面板** -
|
|
137
|
+
- 📝 **详情面板** - 查看请求头、请求体、响应和时序信息
|
|
95
138
|
- 🎨 **主题切换** - 支持深色/浅色主题
|
|
96
139
|
- ⏸️ **暂停/恢复** - 暂停请求捕获以便分析
|
|
97
140
|
- 🔄 **实时更新** - 基于 WebSocket 的实时更新
|
|
@@ -99,6 +142,12 @@ const app = express();
|
|
|
99
142
|
### GUI 配置
|
|
100
143
|
|
|
101
144
|
```bash
|
|
145
|
+
# 自定义窗口大小
|
|
146
|
+
NND_BROWSER_WIDTH=1024 NND_BROWSER_HEIGHT=768 npx nnd your-script.js
|
|
147
|
+
|
|
148
|
+
# 自定义窗口标题
|
|
149
|
+
NND_BROWSER_TITLE="我的应用网络监控" npx nnd your-script.js
|
|
150
|
+
|
|
102
151
|
# 指定 GUI 端口
|
|
103
152
|
NND_GUI_PORT=9230 npx nnd your-script.js
|
|
104
153
|
|
|
@@ -125,7 +174,6 @@ NND_AUTO_OPEN=false npx nnd your-script.js
|
|
|
125
174
|
| `NND_INTERCEPT_HTTP` | 拦截 http/https | true |
|
|
126
175
|
| `NND_INTERCEPT_UNDICI` | 拦截 undici/fetch | true |
|
|
127
176
|
| `NND_REDACT_HEADERS` | 要脱敏的头(逗号分隔) | authorization,cookie |
|
|
128
|
-
| `NND_AUTO_CONNECT` | 自动连接 CDP | true |
|
|
129
177
|
|
|
130
178
|
#### GUI 设置
|
|
131
179
|
|
|
@@ -135,6 +183,9 @@ NND_AUTO_OPEN=false npx nnd your-script.js
|
|
|
135
183
|
| `NND_GUI_PORT` | GUI 服务器端口 | 自动 |
|
|
136
184
|
| `NND_WS_PORT` | WebSocket 端口 | 自动 |
|
|
137
185
|
| `NND_AUTO_OPEN` | 自动打开浏览器 | true |
|
|
186
|
+
| `NND_BROWSER_WIDTH` | 浏览器窗口宽度 | 800 |
|
|
187
|
+
| `NND_BROWSER_HEIGHT` | 浏览器窗口高度 | 600 |
|
|
188
|
+
| `NND_BROWSER_TITLE` | 浏览器窗口标题 | Node Network DevTools |
|
|
138
189
|
|
|
139
190
|
### 编程配置
|
|
140
191
|
|
|
@@ -147,9 +198,30 @@ setConfig({
|
|
|
147
198
|
redactHeaders: ['authorization', 'cookie', 'x-api-key'],
|
|
148
199
|
guiEnabled: true,
|
|
149
200
|
autoOpen: false,
|
|
201
|
+
browserWindowSize: { width: 1024, height: 768 },
|
|
202
|
+
browserWindowTitle: '我的应用网络监控',
|
|
150
203
|
});
|
|
151
204
|
```
|
|
152
205
|
|
|
206
|
+
### 在生产环境中禁用
|
|
207
|
+
|
|
208
|
+
**重要**:始终在生产环境中禁用此工具!
|
|
209
|
+
|
|
210
|
+
```typescript
|
|
211
|
+
// 根据环境条件安装
|
|
212
|
+
if (process.env.NODE_ENV === 'development') {
|
|
213
|
+
const { install } = await import('node-network-devtools');
|
|
214
|
+
await install();
|
|
215
|
+
}
|
|
216
|
+
```
|
|
217
|
+
|
|
218
|
+
或使用环境变量:
|
|
219
|
+
|
|
220
|
+
```bash
|
|
221
|
+
# 在生产环境中,禁用 GUI 和自动打开
|
|
222
|
+
NODE_ENV=production NND_GUI_ENABLED=false NND_AUTO_OPEN=false node your-app.js
|
|
223
|
+
```
|
|
224
|
+
|
|
153
225
|
## 🎯 框架集成
|
|
154
226
|
|
|
155
227
|
### Next.js
|
|
@@ -165,10 +237,10 @@ module.exports = {
|
|
|
165
237
|
};
|
|
166
238
|
```
|
|
167
239
|
|
|
168
|
-
3.
|
|
240
|
+
3. 启动开发服务器:
|
|
169
241
|
|
|
170
242
|
```bash
|
|
171
|
-
|
|
243
|
+
npm run dev
|
|
172
244
|
```
|
|
173
245
|
|
|
174
246
|
或在 `package.json` 中配置:
|
|
@@ -176,11 +248,13 @@ NODE_OPTIONS='--inspect' npm run dev
|
|
|
176
248
|
```json
|
|
177
249
|
{
|
|
178
250
|
"scripts": {
|
|
179
|
-
"dev
|
|
251
|
+
"dev": "next dev"
|
|
180
252
|
}
|
|
181
253
|
}
|
|
182
254
|
```
|
|
183
255
|
|
|
256
|
+
**注意**:当 Next.js 加载 instrumentation hook 时,工具会自动启动。
|
|
257
|
+
|
|
184
258
|
### Express
|
|
185
259
|
|
|
186
260
|
```typescript
|
|
@@ -220,9 +294,6 @@ import {
|
|
|
220
294
|
|
|
221
295
|
// 拦截器
|
|
222
296
|
import { HttpPatcher, UndiciPatcher } from 'node-network-devtools';
|
|
223
|
-
|
|
224
|
-
// CDP 桥接
|
|
225
|
-
import { getCDPBridge, isInspectorEnabled } from 'node-network-devtools';
|
|
226
297
|
```
|
|
227
298
|
|
|
228
299
|
### 请求追踪
|
|
@@ -258,9 +329,9 @@ const requests = store.getByTraceId('user-login');
|
|
|
258
329
|
|
|
259
330
|
1. **HTTP 拦截**:使用 `@mswjs/interceptors` 拦截 http/https 模块请求
|
|
260
331
|
2. **Undici 拦截**:使用 `Agent.compose()` 注册拦截器捕获 fetch 请求
|
|
261
|
-
3.
|
|
262
|
-
4.
|
|
263
|
-
5.
|
|
332
|
+
3. **上下文传递**:使用 `AsyncLocalStorage` 在异步调用链中传递 TraceID
|
|
333
|
+
4. **事件桥接**:将拦截的请求转发到 WebSocket 客户端以实现 GUI 实时更新
|
|
334
|
+
5. **极简浏览器**:使用 Puppeteer 在 app 模式下启动紧凑的浏览器窗口
|
|
264
335
|
|
|
265
336
|
## 🤝 贡献
|
|
266
337
|
|
|
@@ -292,6 +363,7 @@ MIT © [ddddd](https://github.com/dong0926)
|
|
|
292
363
|
- [@mswjs/interceptors](https://github.com/mswjs/interceptors) - HTTP 请求拦截
|
|
293
364
|
- [undici](https://github.com/nodejs/undici) - HTTP/1.1 客户端
|
|
294
365
|
- [ws](https://github.com/websockets/ws) - WebSocket 实现
|
|
366
|
+
- [puppeteer](https://github.com/puppeteer/puppeteer) - 浏览器自动化
|
|
295
367
|
|
|
296
368
|
## 📮 支持
|
|
297
369
|
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"axios.js","sourceRoot":"","sources":["../../../src/adapters/axios.ts"],"names":[],"mappings":""}
|
package/dist/esm/config.js
CHANGED
|
@@ -14,15 +14,19 @@ const defaultConfig = {
|
|
|
14
14
|
ignoreUrls: [],
|
|
15
15
|
redactHeaders: ['authorization', 'cookie'],
|
|
16
16
|
disableBodyCapture: false,
|
|
17
|
-
autoConnect: true,
|
|
18
|
-
inspectorPort: undefined,
|
|
19
17
|
// GUI 配置默认值
|
|
20
18
|
guiEnabled: true,
|
|
21
19
|
guiPort: 'auto',
|
|
22
20
|
wsPort: 'auto',
|
|
23
21
|
guiHost: '127.0.0.1',
|
|
24
22
|
autoOpen: true,
|
|
25
|
-
|
|
23
|
+
// 浏览器窗口默认配置
|
|
24
|
+
browserWindowSize: {
|
|
25
|
+
width: 800,
|
|
26
|
+
height: 600,
|
|
27
|
+
},
|
|
28
|
+
browserWindowTitle: 'Node Network DevTools',
|
|
29
|
+
browserPath: undefined,
|
|
26
30
|
};
|
|
27
31
|
/**
|
|
28
32
|
* 当前配置(合并后的结果)
|
|
@@ -81,15 +85,19 @@ function loadFromEnv() {
|
|
|
81
85
|
interceptUndici: parseEnvBoolean(env.NND_INTERCEPT_UNDICI, defaultConfig.interceptUndici),
|
|
82
86
|
redactHeaders: parseEnvStringArray(env.NND_REDACT_HEADERS, defaultConfig.redactHeaders),
|
|
83
87
|
disableBodyCapture: parseEnvBoolean(env.NND_DISABLE_BODY_CAPTURE, defaultConfig.disableBodyCapture),
|
|
84
|
-
autoConnect: parseEnvBoolean(env.NND_AUTO_CONNECT, defaultConfig.autoConnect),
|
|
85
|
-
inspectorPort: env.NND_INSPECTOR_PORT ? parseEnvNumber(env.NND_INSPECTOR_PORT, 0) : undefined,
|
|
86
88
|
// GUI 配置
|
|
87
89
|
guiEnabled: parseEnvBoolean(env.NND_GUI_ENABLED, defaultConfig.guiEnabled),
|
|
88
90
|
guiPort: parseEnvPort(env.NND_GUI_PORT, defaultConfig.guiPort),
|
|
89
91
|
wsPort: parseEnvPort(env.NND_WS_PORT, defaultConfig.wsPort),
|
|
90
92
|
guiHost: env.NND_GUI_HOST || defaultConfig.guiHost,
|
|
91
93
|
autoOpen: parseEnvBoolean(env.NND_AUTO_OPEN, defaultConfig.autoOpen),
|
|
92
|
-
|
|
94
|
+
// 浏览器窗口配置
|
|
95
|
+
browserWindowSize: {
|
|
96
|
+
width: parseEnvNumber(env.NND_BROWSER_WIDTH, defaultConfig.browserWindowSize?.width ?? 800),
|
|
97
|
+
height: parseEnvNumber(env.NND_BROWSER_HEIGHT, defaultConfig.browserWindowSize?.height ?? 600),
|
|
98
|
+
},
|
|
99
|
+
browserWindowTitle: env.NND_BROWSER_TITLE || defaultConfig.browserWindowTitle,
|
|
100
|
+
browserPath: env.NND_BROWSER_PATH,
|
|
93
101
|
};
|
|
94
102
|
}
|
|
95
103
|
/**
|
package/dist/esm/config.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"AAAA;;;;GAIG;
|
|
1
|
+
{"version":3,"file":"config.js","sourceRoot":"","sources":["../../src/config.ts"],"names":[],"mappings":"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"}
|