更新记录

1.0.0（2026-05-19） 下载此版本

1.0.0版本创建

平台兼容性

uni-app(5.06)

uni-app x(5.06)

其他

🛠 EConsole

uni-app App 端轻量级调试工具，类似 vConsole。

在 App 真机上直接显示一个原生悬浮调试面板，实时查看 console 日志、网络请求和 storage 数据。

功能

• 🔍 自动拦截 console.log / info / warn / error，支持按级别筛选
• 🌐 自动拦截 uni.request / uploadFile / downloadFile，展示请求详情
• 💾 一键查看当前所有 Storage 数据快照
• 🟢 原生悬浮按钮，可拖拽移动
• 📋 原生 WebView 面板，跨页面常驻，不影响原页面布局
• 🗑 提供 destroyNativePanel() 完全销毁释放资源

使用方式

1. 引入插件

在 main.ts 中引入拦截器和原生面板：

import { initEConsole } from '@/uni_modules/econsole/addInterceptor'
import { initNativePanel } from '@/uni_modules/econsole'

2. 初始化

在 createApp 中调用，建议仅开发环境启用：

export function createApp() {
  const app = createSSRApp(App)

  // #ifdef APP-PLUS
  const { html } = initEConsole({ app })
  initNativePanel({ html })
  // #endif

  return { app }
}

启动后，屏幕右下角出现绿色 EC 按钮，点击即可打开调试面板。

3. 销毁（可选）

import { destroyNativePanel } from '@/uni_modules/econsole'

destroyNativePanel()

示例

// 基础用法 — 默认配置
const { html } = initEConsole({ app })
initNativePanel({ html })

// 自定义面板高度和按钮位置
const { html } = initEConsole({ app, maxLogs: 1000, maxRequests: 500 })
initNativePanel({ html, heightPercent: 60, buttonBottom: 300, buttonRight: 30 })

// 手动控制面板显隐
import { showNativePanel, hideNativePanel } from '@/uni_modules/econsole'
showNativePanel()
hideNativePanel()

配置参数

initEConsole(options)

initNativePanel(options)

注意事项

Console 拦截依赖 uni.__log__（uni-app 编译产物），不存在时 fallback 到 console[level] 覆盖。

Network 使用 uni.addInterceptor，与项目中其他拦截器不冲突。

Storage 为快照模式，打开面板时读取，非实时监听。

生产环境请通过条件编译排除，避免调试代码打入正式包。