eruda-manage

一个封装了 eruda 的移动端调试工具，提供更加丰富的功能和更简单的配置。新增微信小程序调试支持！

特点

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

安装

npm 安装

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

CDN 使用

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

使用方法

基本用法

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

// 初始化
ErudaManage.init();

或在 HTML 中直接使用：

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

配置选项

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 次可以触发调试面板的显示/隐藏，次数可配置

🆕 环境配置

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

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

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

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

🆕 微信小程序调试功能

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

// 检测是否为微信小程序环境
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

// 禁用 console
ErudaManage.disableConsole();

// 启用 console
ErudaManage.enableConsole();

// 禁用 alert
ErudaManage.disableAlert();

// 启用 alert
ErudaManage.enableAlert();

示例

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

微信小程序使用示例

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

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

高级用法

自定义 eruda 加载地址

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

修改触发次数

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

指定触发元素

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

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

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

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

获取 URL 参数

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

加载外部脚本

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

🆕 配置管理

// 更新配置
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