epoint-eruda-sdk

一个前端调试 SDK，基于 eruda，支持 Vue2 和 Vue3，提供控制台管理、页面监控和接口监控功能。

特性

• 兼容 Vue2 和 Vue3
• 统一管理和封装 console，可自定义配置开启/关闭
• 页面监控：记录页面地址和传参
• 接口监控：记录 API 调用及参数
• 多种配置方式打开 eruda 调试面板：
  • 全局配置开启/关闭
  • URL 参数开启（例如：?debug=true）
  • 点击特定元素 N 次开启（类似 AlloyLever 的机制）
• 通过 CDN 动态加载 eruda，无需手动引入
• 多 CDN 源支持：自动切换 CDN 源，确保 eruda 可靠加载
• 默认禁用浏览器原生 alert，提供自定义回调处理

安装

NPM

npm install epoint-eruda-sdk --save-dev

CDN

<script src="https://cdn.jsdelivr.net/npm/epoint-eruda-sdk/dist/index.umd.js"></script>

使用方法

基本用法

import erudaSDK from "epoint-eruda-sdk";

// 初始化SDK
erudaSDK.init({
  enable: true, // 是否启用调试
  consoleEnable: true, // 是否开启console封装
  pageMonitorEnable: true, // 是否开启页面监控
  apiMonitorEnable: true, // 是否开启接口监控
});

与 Vue 集成

Vue2

import Vue from "vue";
import { vuePlugin } from "epoint-eruda-sdk";

Vue.use(vuePlugin, {
  enableByUrlParam: true, // 通过URL参数启用
  urlParamName: "debug", // URL参数名称
});

Vue3

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");

点击触发调试面板

import erudaSDK from "epoint-eruda-sdk";

erudaSDK.init({
  enableByTap: true, // 启用点击触发
  tapSelector: ".logo", // 点击元素的选择器
  tapTimes: 5, // 需要点击的次数
  tapTimeout: 3000, // 点击超时时间(毫秒)
});

全局配置

也可以在 HTML 中添加全局配置：

<script>
  window.ERUDA_SDK_CONFIG = {
    enable: true,
    enableByUrlParam: true,
    urlParamName: "debug",
    consoleEnable: true,
    pageMonitorEnable: true,
    apiMonitorEnable: true,
  };
</script>

配置选项

| 选项 | 类型 | 默认值 | 说明 | | ----------------- | ----------------- | ------------------------------------ | ------------------------------- | | 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 参考

erudaSDK.init(options)

初始化 SDK，可传入配置选项。

erudaSDK.show()

显示 eruda 面板。

erudaSDK.hide()

隐藏 eruda 面板。

erudaSDK.destroy()

销毁 SDK 实例，清除所有监听和拦截。

erudaSDK.getOptions()

获取当前配置。

禁用 alert 弹窗

SDK 默认会禁用原生的 alert 弹窗，防止影响用户体验。可以通过配置选项控制这一行为：

// 启用alert（默认为禁用）
erudaSDK.init({
  disableAlert: false,
});

// 设置禁用alert时的回调函数
erudaSDK.init({
  disableAlert: true,
  onAlertDisabled: (message) => {
    console.log("被拦截的alert消息:", message);
    // 或者使用自定义UI显示消息
  },
});

在 Vue 组件中使用

Vue2

export default {
  mounted() {
    // 通过this.$erudaSDK访问SDK实例
    this.$erudaSDK.show();
  },
};

Vue3

import { getCurrentInstance } from "vue";

export default {
  setup() {
    const { proxy } = getCurrentInstance();

    // 通过proxy.$erudaSDK访问SDK实例
    proxy.$erudaSDK.show();
  },
};

许可

ISC License

更新日志

v1.0.2

• 修复: eruda 加载失败问题，增加多 CDN 源自动切换机制
• 修复: eruda 面板无法关闭的问题，调整初始化配置确保显示关闭按钮
• 优化: 调整 eruda 面板默认位置和样式

v1.0.1

• 新增: 禁用 alert 功能，默认开启
• 新增: 自定义回调处理被拦截的 alert 消息

v1.0.0

• 首次发布
• 支持 Vue2 和 Vue3
• 提供 console 封装、页面监控、API 监控功能
• 支持多种方式激活 eruda 调试面板