Package Exports

@leeguoo/pwtk-network-debugger
@leeguoo/pwtk-network-debugger/dist/index.esm.js
@leeguoo/pwtk-network-debugger/dist/index.js

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@leeguoo/pwtk-network-debugger) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

🔍 Network Debugger

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

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

✨ 特性

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

📦 安装

npm 安装

npm install @leeguoo/pwtk-network-debugger

CDN 引入

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

<!-- 推荐：使用精确版本号 -->
<script src="https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@1.3.0/dist/index.js"></script>

<!-- 或使用 unpkg -->
<script src="https://unpkg.com/@leeguoo/pwtk-network-debugger@1.3.0/dist/index.js"></script>

注意: 如果使用 @latest 标签，可能由于 CDN 缓存导致加载到旧版本。建议：

使用具体版本号
添加时间戳参数：?t=${Date.now()}
查看最新版本：npm 主页

🚀 快速开始

ESM/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
  }
})

CommonJS 项目

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

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

HTML 直接引入

<!DOCTYPE html>
<html>
<head>
  <title>网络调试工具</title>
</head>
<body>
  <!-- 您的页面内容 -->

  <!-- 推荐：使用精确版本号避免缓存 -->
  <script src="https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@1.3.0/dist/index.js"></script>
  <script>
    // 等待页面加载完成
    window.addEventListener('DOMContentLoaded', async () => {
      const NetworkDebugger = window.NetworkDebugger?.default || window.NetworkDebugger;
      await NetworkDebugger.init({
        position: 'bottom-right',
        minimized: false
      })
    })
  </script>
</body>
</html>

控制台一键安装（推荐用于临时调试）

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

(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();
})();

⚙️ 配置选项

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, string>) => string
    slkExtractor?: (headers: Record<string, string>) => string
  }
  
  // 过滤器（可选）
  filter?: {
    urls?: string[]        // 只拦截这些URL
    ignoreUrls?: string[]  // 忽略这些URL
    methods?: string[]     // 只拦截这些HTTP方法
  }
}

🎯 功能详解

1. 网络请求监控

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

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

2. 自动解密功能

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

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

3. WebAssembly 支持

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

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

4. 工具功能

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

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

🔧 API 参考

全局方法

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

// 显示面板
NetworkDebugger.show()

// 隐藏面板
NetworkDebugger.hide()

// 销毁实例
NetworkDebugger.destroy()

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

实例方法

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

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

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

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

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

🎨 界面功能

面板操作

拖拽移动: 点击标题栏拖拽面板
调整大小: 拖拽边缘调整面板大小
最小化: 点击最小化按钮
全屏: 点击全屏按钮

请求列表

点击展开: 点击请求项查看详情
自动解密: 显示解密后的请求和响应数据
状态码: 不同颜色显示不同的HTTP状态码

控制台

执行代码: 在控制台中执行 JavaScript 代码
查看日志: 显示调试工具的运行日志

📱 移动端使用

工具完全适配移动端，在移动设备上：

自动调整面板大小
支持触摸操作
响应式布局

🔒 隐私说明

工具仅在本地运行，不会上传任何数据
所有网络请求的拦截和解密都在浏览器内完成
可以完全离线使用

🔧 故障排除

问题：加载的是旧版本

症状: 安装后，功能没有更新，控制台显示的版本号是旧的。

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

解决方案:

使用精确版本号（强烈推荐）:

<!-- 替换 @latest 为具体版本号 -->
<script src="https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@1.3.0/dist/index.js"></script>

添加缓存破坏参数:

<script src="https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@latest/dist/index.js?t=1234567890"></script>

硬刷新浏览器:
- Windows/Linux: Ctrl + Shift + R 或 Ctrl + F5
- Mac: Cmd + Shift + R
清除浏览器缓存:
- 打开开发者工具 (F12)
- 右键点击刷新按钮
- 选择"清空缓存并硬性重新加载"

手动清除 jsDelivr 缓存:

curl -X PURGE https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@latest/dist/index.js

问题：面板不显示

可能原因:

脚本加载失败（检查控制台错误）
CSP（内容安全策略）限制
其他脚本冲突

解决方案:

检查浏览器控制台是否有错误信息
尝试使用不同的 CDN
确保在 DOMContentLoaded 之后初始化

问题：解密功能不工作

可能原因:

WebAssembly 文件未正确加载
密钥提取器配置不正确

解决方案:

检查 wasmUrl 配置是否正确
验证 keyExtractor 和 slkExtractor 函数
查看控制台日志了解详细错误

查看当前版本

在控制台中运行：

console.log(window.NetworkDebugger?.version || 'Unknown');

或查看成功加载的日志：

✅ PWTK 解密工具 v1.3.0 已成功加载！

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可

MIT License

👨‍💻 作者

Leo (@leeguoo)

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

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