🔍 Network Debugger

一个强大的网络调试工具，类似 vConsole，支持自动请求解密和可视化调试面板。

Created by Leo (@leeguoo) - 如需支持请联系 Leo

✨ 特性

- 🌐 网络请求拦截: 自动拦截 XMLHttpRequest 和 Fetch 请求
- 🔓 自动解密: 支持 WebAssembly 加密数据的自动解密
- 🎨 可视化面板: 类似 vConsole 的调试面板，支持拖拽和调整大小
- 📱 移动端友好: 响应式设计，适配各种屏幕尺寸
- 🛠️ 丰富工具: cURL 解析、CORS 测试、HAR 导出等
- 📊 控制台功能: 内置 JavaScript 控制台
- 🎯 零配置: 开箱即用，一行代码即可启用

📦 安装

$3

``bash
npm install @leeguoo/pwtk-network-debugger
`

$3

推荐使用精确版本号，避免缓存问题：

`html





`

注意: 如果使用 @latest 标签，可能由于 CDN 缓存导致加载到旧版本。建议：
1. 使用具体版本号
2. 添加时间戳参数：?t=${Date.now()}
3. 查看最新版本：npm 主页

🚀 快速开始

$3

`typescript
import NetworkDebugger from '@leeguoo/network-debugger'

// 简单使用
await NetworkDebugger.init()

// 或者带配置
await NetworkDebugger.init({
position: 'bottom-right',
theme: 'dark',
decrypt: {
enabled: true,
keyExtractor: (headers) => headers.keys || headers.cid,
slkExtractor: (headers) => headers.slk
}
})
`

$3

`javascript
const NetworkDebugger = require('@leeguoo/network-debugger').default

NetworkDebugger.init({
position: 'top-left',
showConsole: true
})
`

$3

`html













`

$3

在任何网站的开发者控制台中运行：

`javascript
(function(){
'use strict';
const VERSION='1.3.0';
const CDN_URLS=[
'https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@'+VERSION+'/dist/index.js',
'https://unpkg.com/@leeguoo/pwtk-network-debugger@'+VERSION+'/dist/index.js'
];
let idx=0;
function load(){
if(idx>=CDN_URLS.length){
console.error('[PWTK] 所有 CDN 都失败');
return;
}
const s=document.createElement('script');
s.src=CDN_URLS[idx];
s.crossOrigin='anonymous';
s.onload=async()=>{
await new Promise(r=>setTimeout(r,500));
const nd=window.NetworkDebugger?.default||window.NetworkDebugger;
if(nd){
await nd.init({position:'bottom-right',decrypt:{enabled:true}});
console.log('✅ PWTK 解密工具已加载！');
}
};
s.onerror=()=>{idx++;load();};
document.head.appendChild(s);
}
load();
})();
`

⚙️ 配置选项

`typescript
interface NetworkDebuggerConfig {
// 面板位置
position?: 'bottom-right' | 'bottom-left' | 'top-right' | 'top-left'

// 主题
theme?: 'dark' | 'light'

// 是否最小化
minimized?: boolean

// 是否显示控制台
showConsole?: boolean

// 是否自动启动
autoStart?: boolean

// WebAssembly 配置
wasm?: {
enabled?: boolean
wasmUrl?: string // 自定义 wasm 文件路径
jsUrl?: string // 自定义 wasm_exec.js 路径
}

// 解密配置
decrypt?: {
enabled?: boolean
keyExtractor?: (headers: Record) => string
slkExtractor?: (headers: Record) => string
}

// 过滤器（可选）
filter?: {
urls?: string[] // 只拦截这些URL
ignoreUrls?: string[] // 忽略这些URL
methods?: string[] // 只拦截这些HTTP方法
}
}
`

🎯 功能详解

$3

工具会自动拦截所有的 XMLHttpRequest 和 fetch 请求，并在调试面板中显示：

- 请求方法和 URL
- 请求头和响应头
- 请求体和响应体
- 响应状态码和耗时
- 错误信息（如果有）

$3

如果您的项目使用了加密数据传输，工具可以自动解密：

`typescript
await NetworkDebugger.init({
decrypt: {
enabled: true,
// 从请求头中提取密钥
keyExtractor: (headers) => {
// 例如：从Cookie或header中获取keys
return headers.keys || getCookieValue('keys')
},
// 从请求头中提取slk
slkExtractor: (headers) => {
return headers.slk || ''
}
}
})
`

$3

如果您使用了 WebAssembly 加密模块（如原项目中的 mimlib.wasm），工具会自动加载：

`typescript
await NetworkDebugger.init({
wasm: {
enabled: true,
wasmUrl: '/path/to/your/mimlib.wasm',
jsUrl: '/path/to/your/wasm_exec.js'
}
})
`

$3

调试面板内置了多种实用工具：

- cURL 解析: 粘贴 cURL 命令并解析
- CORS 测试: 测试跨域请求
- HAR 导出: 导出网络数据为 HAR 格式
- 解密测试: 测试数据解密功能

🔧 API 参考

$3

`typescript
// 初始化
await NetworkDebugger.init(config)

// 显示面板
NetworkDebugger.show()

// 隐藏面板
NetworkDebugger.hide()

// 销毁实例
NetworkDebugger.destroy()

// 获取当前实例
const instance = NetworkDebugger.getInstance()
`

$3

`typescript
// 创建独立实例
const debugger = await NetworkDebugger.create(config)

// 获取所有请求
const requests = debugger.getRequests()

// 清空请求历史
debugger.clearRequests()

// 导出数据
const data = debugger.exportData()

// 检查 WebAssembly 是否加载
const wasmLoaded = debugger.isWasmLoaded()
`

🎨 界面功能

$3

原因: CDN 缓存导致。jsDelivr 和 unpkg 会缓存 @latest 标签，缓存时间可能长达 12-24 小时。

解决方案:

1. 使用精确版本号（强烈推荐）:
`html


`

2. 添加缓存破坏参数:
`html

`

3. 硬刷新浏览器:
- Windows/Linux: Ctrl + Shift + R 或 Ctrl + F5
- Mac: Cmd + Shift + R

4. 清除浏览器缓存:
- 打开开发者工具 (F12)
- 右键点击刷新按钮
- 选择"清空缓存并硬性重新加载"

5. 手动清除 jsDelivr 缓存:
`bash
curl -X PURGE https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@latest/dist/index.js
`

$3

可能原因:
1. 脚本加载失败（检查控制台错误）
2. CSP（内容安全策略）限制
3. 其他脚本冲突

解决方案:
1. 检查浏览器控制台是否有错误信息
2. 尝试使用不同的 CDN
3. 确保在 DOMContentLoaded 之后初始化

$3

可能原因:
1. WebAssembly 文件未正确加载
2. 密钥提取器配置不正确

解决方案:
1. 检查 wasmUrl 配置是否正确
2. 验证 keyExtractor 和 slkExtractor 函数
3. 查看控制台日志了解详细错误

$3

在控制台中运行：
`javascript
console.log(window.NetworkDebugger?.version || 'Unknown');
`

或查看成功加载的日志：
`
✅ PWTK 解密工具 v1.3.0 已成功加载！
``

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可

MIT License

👨‍💻 作者

Leo (@leeguoo)

如需技术支持或商业合作，请联系 Leo

---

这个工具基于原始的 curl-tool 项目开发，旨在为开发者提供更好的网络调试体验。