mobile-eruda-pro/README.md

移动端调试工具，封装了eruda和eruda-vue，支持微信小程序调试，实时日志，优化点击触发机制，支持URL参数控制，多次点击显示隐藏，全局控制console和alert

# eruda-manage

一个封装了 [eruda](https://github.com/liriliri/eruda) 的移动端调试工具，提供更加丰富的功能和更简单的配置。**新增微信小程序调试支持！**

## 特点

- 🚀 支持通过 CDN 加载 eruda
- 📱 **智能环境检测**：自动识别微信小程序环境
- 🔧 **微信小程序调试**：使用 `wx.setEnableDebug` 替代 eruda
- 📊 **实时日志功能**：封装微信小程序 `wx.getRealtimeLogManager`
- ⚡ **优化点击触发**：防抖动机制，提高触发准确性
- 🎯 支持通过 URL 参数或连续点击来显示/隐藏调试面板
- 📄 页面加载时自动打印当前页面地址和参数
- 🎛️ 支持全局开启/禁用 console 和 alert
- 🔌 默认启用 eruda-vue 插件，方便 Vue 项目调试

## 安装

### npm 安装

```bash
npm install mobile-eruda-pro --save-dev
```

### CDN 使用

```html
<script src="https://cdn.jsdelivr.net/npm/mobile-eruda-pro/index.min.js"></script>
```

## 使用方法

### 基本用法

```javascript
// ES Module
import ErudaManage from "mobile-eruda-pro";

// 初始化
ErudaManage.init();
```

或在 HTML 中直接使用：

```html
<script src="https://cdn.jsdelivr.net/npm/mobile-eruda-pro/index.min.js"></script>
<script>
  // 初始化
  ErudaManage.init();
</script>
```

### 配置选项

```javascript
ErudaManage.init({
  // 基础配置
  cdn: "//cdn.jsdelivr.net/npm/eruda", // eruda CDN 地址
  vuePlugin: true, // 是否启用 eruda-vue 插件
  tool: "eruda", // 工具名称
  entry: null, // 指定挂载点，可以使用DOM元素、元素ID或CSS选择器(#id)
  displayCount: 5, // 连续点击次数触发调试面板
  triggerElement: document, // 指定触发元素，可以使用DOM元素或CSS选择器
  disableMenu: false, // 是否禁用 alert
  disableConsole: false, // 是否禁用 console

  // 🆕 环境配置
  environment: "auto", // 环境类型: 'auto', 'web', 'miniprogram'
  autoDetectWechat: false, // 是否自动检测微信小程序环境（默认关闭）

  // 🆕 微信小程序相关配置
  enableRealtimeLog: false, // 是否启用微信小程序实时日志
  realtimeLogFilterMsg: "", // 实时日志过滤关键词
  realtimeLogTag: "ErudaManage", // 实时日志标签

  // 🆕 插件配置
  enableWebSocketMonitor: true, // 是否启用WebSocket监控插件

  // 🆕 点击触发优化配置
  maxTapInterval: 1000, // 最大点击间隔(毫秒)
  minTapInterval: 100, // 最小点击间隔(毫秒)
  resetTimeout: 3000, // 重置计数超时时间(毫秒)
});
```

### 控制调试面板显示/隐藏

方法 1：通过 URL 参数控制

- 显示调试面板：`http://yoursite.com/?eruda=true` 或 `http://yoursite.com/#eruda=true`
- 隐藏调试面板：`http://yoursite.com/?eruda=false` 或 `http://yoursite.com/#eruda=false`

方法 2：连续点击页面

- 默认连续点击 5 次可以触发调试面板的显示/隐藏，次数可配置

### 🆕 环境配置

现在支持手动指定运行环境，避免误判：

```javascript
// Web环境（Vue、React等）
ErudaManage.init({
  environment: "web",
  enableWebSocketMonitor: true,
});

// 微信小程序环境
ErudaManage.init({
  environment: "miniprogram",
  enableRealtimeLog: true,
});

// 自动检测（不推荐，可能误判）
ErudaManage.init({
  environment: "auto",
  autoDetectWechat: true,
});
```

### 🆕 微信小程序调试功能

在微信小程序环境中，插件会使用微信小程序专用的调试方法：

```javascript
// 检测是否为微信小程序环境
var isWechat = ErudaManage.isWeChatMiniProgram();

// 切换微信小程序调试状态（使用 wx.setEnableDebug）
ErudaManage.toggleWeChatDebug();

// 启用/禁用实时日志功能
ErudaManage.toggleWeChatRealtimeLog();

// 手动初始化实时日志
ErudaManage.initWeChatRealtimeLog();

// 使用实时日志（需要先启用）
if (ErudaManage.realtimeLog) {
  ErudaManage.realtimeLog.info("这是一条信息");
  ErudaManage.realtimeLog.warn("这是一条警告");
  ErudaManage.realtimeLog.error("这是一条错误");
}

// 获取调试状态
var status = ErudaManage.getDebugStatus();
console.log(status);
// 输出：
// {
//   isWeChatMiniProgram: true,
//   weChatDebugEnabled: false,
//   realtimeLogEnabled: false,
//   erudaLoaded: false
// }
```

### 控制 console 和 alert

```javascript
// 禁用 console
ErudaManage.disableConsole();

// 启用 console
ErudaManage.enableConsole();

// 禁用 alert
ErudaManage.disableAlert();

// 启用 alert
ErudaManage.enableAlert();
```

## 示例

- `example.html` - 基础功能演示
- `wechat-miniprogram-example.html` - 🆕 微信小程序功能演示

### 微信小程序使用示例

```javascript
// 在微信小程序中使用
ErudaManage.init({
  displayCount: 5,
  enableRealtimeLog: true,
  realtimeLogTag: "MyMiniProgram",
  autoDetectWechat: true,
});

// 连续点击5次任意位置即可开启/关闭调试
// 或者手动调用
ErudaManage.toggleWeChatDebug();
```

## 高级用法

### 自定义 eruda 加载地址

```javascript
ErudaManage.init({
  cdn: "//your-cdn-domain.com/path/to/eruda.js",
});
```

### 修改触发次数

```javascript
ErudaManage.init({
  displayCount: 5, // 连续点击5次触发
});
```

### 指定触发元素

默认情况下，连续点击整个页面可以触发调试面板。如果希望只有点击特定元素时才触发，可以使用`triggerElement`配置：

```javascript
// 使用CSS选择器指定触发元素
ErudaManage.init({
  triggerElement: "#trigger-button", // 只有点击ID为trigger-button的元素才会触发
});

// 使用DOM元素指定触发元素
var triggerBtn = document.getElementById("trigger-button");
ErudaManage.init({
  triggerElement: triggerBtn,
});
```

这样可以避免用户在操作页面时误触发调试面板。

### 获取 URL 参数

```javascript
// 获取URL中的参数
var value = ErudaManage.getParameter("your_param_name");
```

### 加载外部脚本

```javascript
ErudaManage.loadScript("https://your-cdn.com/script.js", function () {
  console.log("脚本加载完成");
});
```

### 🆕 配置管理

```javascript
// 更新配置
ErudaManage.updateConfig({
  displayCount: 3,
  enableRealtimeLog: true,
  maxTapInterval: 800,
});

// 获取当前配置
var config = ErudaManage.getConfig();
console.log(config);
```

## 🆕 API 参考

### 环境检测

- `ErudaManage.isWeChatMiniProgram()` - 检测是否为微信小程序环境

### 微信小程序调试

- `ErudaManage.toggleWeChatDebug()` - 切换微信小程序调试状态
- `ErudaManage.toggleWeChatRealtimeLog()` - 切换实时日志功能
- `ErudaManage.initWeChatRealtimeLog()` - 初始化实时日志

### 实时日志

- `ErudaManage.realtimeLog.info(...)` - 输出信息级别日志
- `ErudaManage.realtimeLog.warn(...)` - 输出警告级别日志
- `ErudaManage.realtimeLog.error(...)` - 输出错误级别日志
- `ErudaManage.realtimeLog.setFilterMsg(msg)` - 设置过滤消息
- `ErudaManage.realtimeLog.addFilterMsg(msg)` - 添加过滤消息

### 配置管理

- `ErudaManage.updateConfig(newConfig)` - 更新配置
- `ErudaManage.getConfig()` - 获取当前配置
- `ErudaManage.getDebugStatus()` - 获取调试状态

### 工具方法

- `ErudaManage.getParameter(name)` - 获取 URL 参数
- `ErudaManage.loadScript(src, callback)` - 加载外部脚本

## 调试技巧

1. 可以在 URL 中使用 `?eruda=true` 来启用调试面板，这种方式不会影响服务器端的统计和逻辑

2. 如果页面有全屏操作或复杂的触摸交互，建议增加触发次数以避免误触

## 浏览器兼容性

兼容所有现代浏览器和 IE10+。

## 许可证

[MIT](LICENSE)