epoint-eruda-tool
v1.0.0
Published
一个封装移动端调试的NPM插件，基于eruda实现
Maintainers
helun940122Readme
📱 ErudaTool - 移动端调试神器
一个基于 Eruda 的移动端调试工具封装，提供更便捷的调试体验。
✨ 特性
- 🚀 CDN 加载 - 通过 CDN 动态加载 Eruda，无需本地安装
- 🔗 URL 参数控制 - 通过 URL 参数
?debug=1快速启用调试 - 👆 点击召唤 - 点击指定次数"召唤神龙"显示/隐藏调试面板
- 📊 页面信息打印 - 自动打印当前页面地址和参数信息
- 🔧 全局控制 - 可全局禁用/启用 console 和 alert
- 🎯 Vue 支持 - 默认集成 eruda-vue 插件
- 📱 移动端优化 - 专为移动端调试场景优化
📦 安装
NPM 安装
npm install epoint-eruda-toolCDN 引入
<script src="https://unpkg.com/epoint-eruda-tool@latest/dist/index.js"></script>🚀 快速开始
基础用法
import { initErudaTool } from 'epoint-eruda-tool';
// 使用默认配置初始化
const erudaTool = initErudaTool();自定义配置
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
});HTML 直接使用
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>调试测试</title>
</head>
<body>
<h1>移动端调试测试</h1>
<script src="https://unpkg.com/epoint-eruda-tool@latest/dist/index.js"></script>
<script>
// 全局对象方式使用
const erudaTool = EpointErudaTool.initErudaTool({
enableUrlParam: true,
enableClickSummon: true,
clickCount: 5
});
</script>
</body>
</html>🎯 使用方式
1. URL 参数启用
在页面 URL 后添加 ?debug=1 即可自动显示调试面板：
https://your-site.com?debug=12. 点击召唤
在页面右上角区域连续点击 5 次（默认）即可召唤调试面板。
3. 编程控制
// 显示调试面板
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 | '' | 自定义样式 |
🎨 页面信息打印
工具会自动以美观的格式打印页面信息：
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 参考
类方法
// 创建实例
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();工具函数
import { getErudaTool } from 'epoint-eruda-tool';
// 获取全局实例
const tool = getErudaTool();🌟 高级用法
Vue 项目集成
// main.js
import { initErudaTool } from 'epoint-eruda-tool';
// 开发环境启用调试
if (process.env.NODE_ENV === 'development') {
initErudaTool({
enableVuePlugin: true,
enableUrlParam: true
});
}React 项目集成
// App.js
import { useEffect } from 'react';
import { initErudaTool } from 'epoint-eruda-tool';
function App() {
useEffect(() => {
if (process.env.NODE_ENV === 'development') {
initErudaTool();
}
}, []);
return <div>Your App</div>;
}条件加载
// 仅在移动设备上启用
if (/Android|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent)) {
initErudaTool();
}
// 仅在特定域名启用
if (location.hostname.includes('test') || location.hostname.includes('dev')) {
initErudaTool();
}🐛 故障排除
常见问题
调试面板不显示
- 检查网络连接，确保能访问CDN
- 检查控制台是否有错误信息
- 确认URL参数格式正确
Vue插件不工作
- 确保页面中有Vue实例
- 检查Vue版本兼容性
点击召唤不响应
- 确认点击区域（页面右上角）
- 检查点击间隔和次数设置
📄 许可证
MIT License - 详见 LICENSE 文件
🤝 贡献
欢迎提交 Issue 和 Pull Request！
📞 支持
如有问题，请提交 Issue
享受调试的乐趣！ 🎉