📱 ErudaTool - 移动端调试神器


一个基于 Eruda 的移动端调试工具封装，提供更便捷的调试体验。

✨ 特性

- 🚀 CDN 加载 - 通过 CDN 动态加载 Eruda，无需本地安装
- 🔗 URL 参数控制 - 通过 URL 参数 ?debug=1 快速启用调试
- 👆 点击召唤 - 点击指定次数"召唤神龙"显示/隐藏调试面板
- 📊 页面信息打印 - 自动打印当前页面地址和参数信息
- 🔧 全局控制 - 可全局禁用/启用 console 和 alert
- 🎯 Vue 支持 - 默认集成 eruda-vue 插件
- 📱 移动端优化 - 专为移动端调试场景优化

📦 安装

$3

``bash
npm install epoint-eruda-tool
`

$3

`html

`

🚀 快速开始

$3

`javascript
import { initErudaTool } from 'epoint-eruda-tool';

// 使用默认配置初始化
const erudaTool = initErudaTool();
`

$3

`javascript
import { createErudaTool } from 'epoint-eruda-tool';

const erudaTool = createErudaTool({
enableUrlParam: true, // 启用URL参数检测
urlParamName: 'debug', // URL参数名称
enableClickSummon: true, // 启用点击召唤
clickCount: 5, // 点击次数
clickInterval: 500, // 点击间隔(ms)
enablePageInfo: true, // 启用页面信息打印
enableVuePlugin: true, // 启用Vue插件
disableConsole: false, // 禁用console
disableAlert: false // 禁用alert
});
`

$3

`html










移动端调试测试







`

🎯 使用方式

$3

在页面 URL 后添加 ?debug=1 即可自动显示调试面板：
`
https://your-site.com?debug=1
`

$3

在页面右上角区域连续点击 5 次（默认）即可召唤调试面板。

$3

`javascript
// 显示调试面板
erudaTool.showEruda();

// 隐藏调试面板
erudaTool.hideEruda();

// 切换调试面板
erudaTool.toggleEruda();

// 禁用console输出
erudaTool.disableConsoleGlobal();

// 启用console输出
erudaTool.enableConsole();

// 禁用alert弹窗
erudaTool.disableAlertGlobal();

// 启用alert弹窗
erudaTool.enableAlert();
`

⚙️ 配置选项

| 选项 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| enableUrlParam | boolean | true | 是否启用URL参数检测 |
| urlParamName | string | 'debug' | URL参数名称 |
| enableClickSummon | boolean | true | 是否启用点击召唤功能 |
| clickCount | number | 5 | 召唤所需点击次数 |
| clickInterval | number | 500 | 点击时间间隔(毫秒) |
| enablePageInfo | boolean | true | 是否启用页面信息打印 |
| enableVuePlugin | boolean | true | 是否启用Vue插件 |
| disableConsole | boolean | false | 是否全局禁用console |
| disableAlert | boolean | false | 是否全局禁用alert |
| erudaCdn | string | CDN地址 | 自定义Eruda CDN地址 |
| erudaVueCdn | string | CDN地址 | 自定义Eruda Vue插件CDN地址 |
| customStyle | string | '' | 自定义样式 |

🎨 页面信息打印

工具会自动以美观的格式打印页面信息：

`javascript
console.log('%c 页面地址 : %c https://example.com/page?id=123 ',
'background: #606060; color: #fff; border-radius: 3px 0 0 3px;',
'background: #1475B2; color: #fff; border-radius: 0 3px 3px 0;'
);
`

🔧 API 参考

$3

`javascript
// 创建实例
const tool = new ErudaTool(options);

// 显示调试面板
await tool.showEruda();

// 隐藏调试面板
tool.hideEruda();

// 切换显示状态
await tool.toggleEruda();

// 全局控制
tool.enableConsole();
tool.disableConsoleGlobal();
tool.enableAlert();
tool.disableAlertGlobal();

// 配置管理
const options = tool.getOptions();
tool.updateOptions(newOptions);

// 销毁实例
tool.destroy();
`

$3

`javascript
import { getErudaTool } from 'epoint-eruda-tool';

// 获取全局实例
const tool = getErudaTool();
`

🌟 高级用法

$3

`javascript
// main.js
import { initErudaTool } from 'epoint-eruda-tool';

// 开发环境启用调试
if (process.env.NODE_ENV === 'development') {
initErudaTool({
enableVuePlugin: true,
enableUrlParam: true
});
}
`

$3

`javascript
// App.js
import { useEffect } from 'react';
import { initErudaTool } from 'epoint-eruda-tool';

function App() {
useEffect(() => {
if (process.env.NODE_ENV === 'development') {
initErudaTool();
}
}, []);

return

;
}
`

$3

`javascript
// 仅在移动设备上启用
if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
initErudaTool();
}

// 仅在特定域名启用
if (location.hostname.includes('test') || location.hostname.includes('dev')) {
initErudaTool();
}
``

🐛 故障排除

$3

1. 调试面板不显示
- 检查网络连接，确保能访问CDN
- 检查控制台是否有错误信息
- 确认URL参数格式正确

2. Vue插件不工作
- 确保页面中有Vue实例
- 检查Vue版本兼容性

3. 点击召唤不响应
- 确认点击区域（页面右上角）
- 检查点击间隔和次数设置

📄 许可证

MIT License - 详见 LICENSE 文件

🤝 贡献

欢迎提交 Issue 和 Pull Request！

📞 支持

如有问题，请提交 Issue

---

享受调试的乐趣！ 🎉