前端调试SDK，基于eruda，支持Vue2和Vue3
npm install epoint-eruda-sdkbash
npm install epoint-eruda-sdk --save-dev
`
$3
`html
`
使用方法
$3
`javascript
import erudaSDK from "epoint-eruda-sdk";
// 初始化SDK
erudaSDK.init({
enable: true, // 是否启用调试
consoleEnable: true, // 是否开启console封装
pageMonitorEnable: true, // 是否开启页面监控
apiMonitorEnable: true, // 是否开启接口监控
});
`
$3
#### Vue2
`javascript
import Vue from "vue";
import { vuePlugin } from "epoint-eruda-sdk";
Vue.use(vuePlugin, {
enableByUrlParam: true, // 通过URL参数启用
urlParamName: "debug", // URL参数名称
});
`
#### Vue3
`javascript
import { createApp } from "vue";
import { vuePlugin } from "epoint-eruda-sdk";
import App from "./App.vue";
const app = createApp(App);
app.use(vuePlugin, {
enableByUrlParam: true, // 通过URL参数启用
urlParamName: "debug", // URL参数名称
});
app.mount("#app");
`
$3
`javascript
import erudaSDK from "epoint-eruda-sdk";
erudaSDK.init({
enableByTap: true, // 启用点击触发
tapSelector: ".logo", // 点击元素的选择器
tapTimes: 5, // 需要点击的次数
tapTimeout: 3000, // 点击超时时间(毫秒)
});
`
$3
也可以在 HTML 中添加全局配置：
`html
`
配置选项
| 选项 | 类型 | 默认值 | 说明 |
| ----------------- | ----------------- | ------------------------------------ | ------------------------------- |
| enable | boolean | false | 是否启用调试 |
| enableByUrlParam | boolean \| string | true | 是否通过 URL 参数启用 |
| urlParamName | string | 'debug' | URL 参数名称 |
| enableByTap | boolean | false | 是否启用点击特定元素 N 次后开启 |
| tapSelector | string | 'body' | 点击激活的元素选择器 |
| tapTimes | number | 5 | 激活所需点击次数 |
| tapTimeout | number | 3000 | 激活的超时时间(毫秒) |
| autoLoad | boolean | false | 是否自动加载 eruda |
| consoleEnable | boolean | true | 是否开启 console 封装 |
| pageMonitorEnable | boolean | true | 是否开启页面监控 |
| apiMonitorEnable | boolean | true | 是否开启接口监控 |
| disableAlert | boolean | true | 是否禁用 alert 弹窗 |
| onAlertDisabled | function | null | 禁用 alert 后的回调函数 |
| erudaCDN | string | 'https://cdn.jsdelivr.net/npm/eruda' | eruda 的 CDN 地址 |
| erudaOptions | object | { tool: [...] } | eruda 工具面板配置 |
API 参考
$3
初始化 SDK，可传入配置选项。
$3
显示 eruda 面板。
$3
隐藏 eruda 面板。
$3
销毁 SDK 实例，清除所有监听和拦截。
$3
获取当前配置。
$3
SDK 默认会禁用原生的 alert 弹窗，防止影响用户体验。可以通过配置选项控制这一行为：
`javascript
// 启用alert（默认为禁用）
erudaSDK.init({
disableAlert: false,
});
// 设置禁用alert时的回调函数
erudaSDK.init({
disableAlert: true,
onAlertDisabled: (message) => {
console.log("被拦截的alert消息:", message);
// 或者使用自定义UI显示消息
},
});
`
在 Vue 组件中使用
$3
`javascript
export default {
mounted() {
// 通过this.$erudaSDK访问SDK实例
this.$erudaSDK.show();
},
};
`
$3
`javascript
import { getCurrentInstance } from "vue";
export default {
setup() {
const { proxy } = getCurrentInstance();
// 通过proxy.$erudaSDK访问SDK实例
proxy.$erudaSDK.show();
},
};
``