一个封装移动端调试的NPM插件,基于eruda实现
npm install epoint-eruda-tool

一个基于 Eruda 的移动端调试工具封装,提供更便捷的调试体验。
- 🚀 CDN 加载 - 通过 CDN 动态加载 Eruda,无需本地安装
- 🔗 URL 参数控制 - 通过 URL 参数 ?debug=1 快速启用调试
- 👆 点击召唤 - 点击指定次数"召唤神龙"显示/隐藏调试面板
- 📊 页面信息打印 - 自动打印当前页面地址和参数信息
- 🔧 全局控制 - 可全局禁用/启用 console 和 alert
- 🎯 Vue 支持 - 默认集成 eruda-vue 插件
- 📱 移动端优化 - 专为移动端调试场景优化
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
Your App;
}
`$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();
}
``1. 调试面板不显示
- 检查网络连接,确保能访问CDN
- 检查控制台是否有错误信息
- 确认URL参数格式正确
2. Vue插件不工作
- 确保页面中有Vue实例
- 检查Vue版本兼容性
3. 点击召唤不响应
- 确认点击区域(页面右上角)
- 检查点击间隔和次数设置
MIT License - 详见 LICENSE 文件
欢迎提交 Issue 和 Pull Request!
如有问题,请提交 Issue
---
享受调试的乐趣! 🎉