1.3.9 • Published 6 months ago

@leeguoo/pwtk-network-debugger

Licence

MIT

Version

1.3.9

Deps

Size

1.7 MB

Vulns

Weekly

Summary Dependency Versions

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 项目开发，旨在为开发者提供更好的网络调试体验。