npm package: @leeguoo/pwtk-network-debugger
Description: PWTK 解密小工具 - 网络请求拦截、自动解密、分享功能 (Created by Leo)
Author: Leo
Latest version: 1.3.9

# 🔍 Network Debugger

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

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

## ✨ 特性

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

## 📦 安装

### npm 安装

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

### CDN 引入

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

```html
<!-- 推荐：使用精确版本号 -->
<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 缓存导致加载到旧版本。建议：
1. 使用具体版本号
2. 添加时间戳参数：`?t=${Date.now()}`
3. 查看最新版本：[npm 主页](https://www.npmjs.com/package/@leeguoo/pwtk-network-debugger)

## 🚀 快速开始

### ESM/TypeScript 项目

```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 项目

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

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

### HTML 直接引入

```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>
```

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

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

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

## 🎯 功能详解

### 1. 网络请求监控

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

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

### 2. 自动解密功能

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

```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 支持

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

```typescript
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 参考

### 全局方法

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

// 显示面板
NetworkDebugger.show()

// 隐藏面板
NetworkDebugger.hide()

// 销毁实例
NetworkDebugger.destroy()

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

### 实例方法

```typescript
// 创建独立实例
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 小时。

**解决方案**:

1. **使用精确版本号（强烈推荐）**:
   ```html
   <!-- 替换 @latest 为具体版本号 -->
   <script src="https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@1.3.0/dist/index.js"></script>
   ```

2. **添加缓存破坏参数**:
   ```html
   <script src="https://cdn.jsdelivr.net/npm/@leeguoo/pwtk-network-debugger@latest/dist/index.js?t=1234567890"></script>
   ```

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
   ```

### 问题：面板不显示

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

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

### 问题：解密功能不工作

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

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

### 查看当前版本

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

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

## 🤝 贡献

欢迎提交 Issue 和 Pull Request！

## 📄 许可

MIT License

## 👨‍💻 作者

**Leo (@leeguoo)**

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

---

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