移动端调试工具，封装了eruda和eruda-vue，支持微信小程序调试，实时日志，优化点击触发机制，支持URL参数控制，多次点击显示隐藏，全局控制console和alert
npm install mobile-eruda-prowx.setEnableDebug 替代 eruda
wx.getRealtimeLogManager
bash
npm install mobile-eruda-pro --save-dev
`
$3
`html
`
使用方法
$3
`javascript
// ES Module
import ErudaManage from "mobile-eruda-pro";
// 初始化
ErudaManage.init();
`
或在 HTML 中直接使用：
`html
`
$3
`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, // 重置计数超时时间(毫秒)
});
`
$3
方法 1：通过 URL 参数控制
- 显示调试面板：http://yoursite.com/?eruda=true 或 http://yoursite.com/#eruda=true
- 隐藏调试面板：http://yoursite.com/?eruda=false 或 http://yoursite.com/#eruda=false
方法 2：连续点击页面
- 默认连续点击 5 次可以触发调试面板的显示/隐藏，次数可配置
$3
现在支持手动指定运行环境，避免误判：
`javascript
// Web环境（Vue、React等）
ErudaManage.init({
environment: "web",
enableWebSocketMonitor: true,
});
// 微信小程序环境
ErudaManage.init({
environment: "miniprogram",
enableRealtimeLog: true,
});
// 自动检测（不推荐，可能误判）
ErudaManage.init({
environment: "auto",
autoDetectWechat: true,
});
`
$3
在微信小程序环境中，插件会使用微信小程序专用的调试方法：
`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
// }
`
$3
`javascript
// 禁用 console
ErudaManage.disableConsole();
// 启用 console
ErudaManage.enableConsole();
// 禁用 alert
ErudaManage.disableAlert();
// 启用 alert
ErudaManage.enableAlert();
`
示例
- example.html - 基础功能演示
- wechat-miniprogram-example.html - 🆕 微信小程序功能演示
$3
`javascript
// 在微信小程序中使用
ErudaManage.init({
displayCount: 5,
enableRealtimeLog: true,
realtimeLogTag: "MyMiniProgram",
autoDetectWechat: true,
});
// 连续点击5次任意位置即可开启/关闭调试
// 或者手动调用
ErudaManage.toggleWeChatDebug();
`
高级用法
$3
`javascript
ErudaManage.init({
cdn: "//your-cdn-domain.com/path/to/eruda.js",
});
`
$3
`javascript
ErudaManage.init({
displayCount: 5, // 连续点击5次触发
});
`
$3
默认情况下，连续点击整个页面可以触发调试面板。如果希望只有点击特定元素时才触发，可以使用triggerElement配置：
`javascript
// 使用CSS选择器指定触发元素
ErudaManage.init({
triggerElement: "#trigger-button", // 只有点击ID为trigger-button的元素才会触发
});
// 使用DOM元素指定触发元素
var triggerBtn = document.getElementById("trigger-button");
ErudaManage.init({
triggerElement: triggerBtn,
});
`
这样可以避免用户在操作页面时误触发调试面板。
$3
`javascript
// 获取URL中的参数
var value = ErudaManage.getParameter("your_param_name");
`
$3
`javascript
ErudaManage.loadScript("https://your-cdn.com/script.js", function () {
console.log("脚本加载完成");
});
`
$3
`javascript
// 更新配置
ErudaManage.updateConfig({
displayCount: 3,
enableRealtimeLog: true,
maxTapInterval: 800,
});
// 获取当前配置
var config = ErudaManage.getConfig();
console.log(config);
`
🆕 API 参考
$3
- ErudaManage.isWeChatMiniProgram() - 检测是否为微信小程序环境
$3
- ErudaManage.toggleWeChatDebug() - 切换微信小程序调试状态
- ErudaManage.toggleWeChatRealtimeLog() - 切换实时日志功能
- ErudaManage.initWeChatRealtimeLog() - 初始化实时日志
$3
- ErudaManage.realtimeLog.info(...) - 输出信息级别日志
- ErudaManage.realtimeLog.warn(...) - 输出警告级别日志
- ErudaManage.realtimeLog.error(...) - 输出错误级别日志
- ErudaManage.realtimeLog.setFilterMsg(msg) - 设置过滤消息
- ErudaManage.realtimeLog.addFilterMsg(msg) - 添加过滤消息
$3
- ErudaManage.updateConfig(newConfig) - 更新配置
- ErudaManage.getConfig() - 获取当前配置
- ErudaManage.getDebugStatus() - 获取调试状态
$3
- ErudaManage.getParameter(name) - 获取 URL 参数
- ErudaManage.loadScript(src, callback) - 加载外部脚本
调试技巧
1. 可以在 URL 中使用 ?eruda=true` 来启用调试面板，这种方式不会影响服务器端的统计和逻辑