Package Exports

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 install @leeguoo/network-debugger

或使用 CDN:

<script src="https://unpkg.com/@leeguoo/network-debugger/dist/index.js"></script>

🚀 快速开始

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://unpkg.com/@leeguoo/network-debugger/dist/index.js"></script>
  <script>
    // 等待页面加载完成
    window.addEventListener('DOMContentLoaded', async () => {
      await NetworkDebugger.init({
        position: 'bottom-right',
        minimized: false
      })
    })
  </script>
</body>
</html>

⚙️ 配置选项

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 代码
查看日志: 显示调试工具的运行日志

📱 移动端使用

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

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

🔒 隐私说明

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

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📄 许可

MIT License

👨‍💻 作者

Leo (@leeguoo)

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

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