更新记录

1.1.1（2026-05-29） 下载此版本

• 优化示例入口配置，Vue2/Vue3 分支统一使用 process.env.NODE_ENV !== 'production'
• 优化 README 启用示例，移除 Vite 专属的 import.meta.env 写法，提升 uni-app Vue2 项目兼容性

1.1.0（2026-05-29） 下载此版本

• 新增悬浮按钮位置记忆，页面跳转后保持上次拖动位置
• 新增 Log、Network、Storage 跨页面历史回放，减少多 WebView 页面切换后的记录丢失感
• 新增 Storage 面板镜像，支持查看 uni.setStorageSync/removeStorageSync/clearStorageSync 的变更
• 新增 persistLogs、persistNetwork、persistStorage、persistSwitchPosition 配置开关
• 优化默认历史数量，Log 默认保留 200 条、Network 默认保留 100 条
• 优化悬浮按钮位置同步，移除常驻轮询，降低页面运行开销
• 调整 uni.request 采集逻辑，请求记录只进入 Network 面板，不再自动写入 Log 面板

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

• 支持 App-Plus 真机 WebView 自动注入 vConsole
• 支持采集 console.log/info/warn/error/debug
• 支持采集 uni.request 请求并展示到 vConsole Network 面板
• 内置本地 vconsole.min.js，无需额外安装 npm 依赖

平台兼容性

uni-app(3.7.8)

s-vconsole App真机调试面板

vConsole 是 Tencent 开源的移动端调试面板。本插件面向 uni-app App-Plus 做了一层封装：自动把本地 vconsole.min.js 注入到 App WebView，并把 App service 层的 console、uni.request 和 uni storage 同步到 vConsole 面板。插件针对 App 多 WebView 场景做了跨页面历史回放和悬浮按钮位置记忆，页面跳转后仍能继续查看调试记录。

命名说明

• 插件目录和插件 id 使用小写：uni_modules/s-vconsole、id: "s-vconsole"。
• 展示名和文档使用官方写法：vConsole，即 v 小写、C 大写。

特性

• 仅建议在 APP-PLUS 测试包/开发包启用。
• 内置 vConsole 文件，无需安装 npm 依赖。
• 支持自动注入页面 WebView，页面跳转后也会重新注入。
• 支持 console.log/info/warn/error/debug。
• 支持 uni.request 请求采集，包含请求头、请求体、响应、耗时、状态码。
• 支持 Log、Network、Storage 跨页面历史回放。
• 支持悬浮按钮拖动位置记忆，页面跳转后保持上次位置。
• 支持将 uni.setStorageSync/removeStorageSync/clearStorageSync 的变更镜像到 Storage 面板的 LocalStorage。
• 支持按需关闭历史回放和位置记忆，减少调试包运行开销。
• 默认脱敏 authorization、token、cookie 请求/响应头。

推荐用法：Vue 3

在 main.js 或 main.ts 中安装插件：

import { createSSRApp } from 'vue'
import App from './App.vue'

// #ifdef APP-PLUS
import vConsole from '@/uni_modules/s-vconsole/js_sdk/s-vconsole'
// #endif

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

  // #ifdef APP-PLUS
  app.use(vConsole, {
    enabled: process.env.NODE_ENV !== 'production',
  })
  // #endif

  return {
    app,
  }
}

生产包建议关闭，避免把调试面板带到正式用户环境。process.env.NODE_ENV 在 uni-app Vue2/Vue3 项目中都可用；生产构建时为 production。

手动用法

如果你不想使用 app.use，可以手动安装：

// #ifdef APP-PLUS
import { installVConsole } from '@/uni_modules/s-vconsole/js_sdk/s-vconsole'

installVConsole({
  enabled: process.env.NODE_ENV !== 'production',
})
// #endif

如果页面跳转后某些 WebView 没出现浮标，可以在 App.vue 的 onShow 里补一次注入：

// #ifdef APP-PLUS
import { injectVConsole } from '@/uni_modules/s-vconsole/js_sdk/s-vconsole'
// #endif

export default {
  onShow() {
    // #ifdef APP-PLUS
    injectVConsole()
    // #endif
  },
}

配置项

静态资源路径

插件默认会尝试加载：

uni_modules/s-vconsole/static/vendor/vconsole.min.js
_www/uni_modules/s-vconsole/static/vendor/vconsole.min.js
static/vendor/vconsole.min.js
_www/static/vendor/vconsole.min.js

如果你的 App 构建后资源路径特殊，可以手动指定：

app.use(vConsole, {
  scriptPath: '_www/uni_modules/s-vconsole/static/vendor/vconsole.min.js',
})

注意事项

• App 页面是多 WebView 结构，vConsole 面板本身无法跨页面共享同一个 DOM 实例；插件采用“每个 WebView 注入一份、App service 统一广播日志/请求”的方式保证页面跳转后可用。
• Network 面板采集的是 uni.request。如果你使用 axios，需要确保 axios adapter 最终走的是 uni.request。
• vConsole 原生 Storage 面板查看的是 WebView 的 cookie/localStorage/sessionStorage；uni.setStorageSync 写入的是 uni-app storage，插件会把拦截到的变更镜像为 LocalStorage 中的 uni-storage:* key。
• 请不要在正式生产包默认开启，避免暴露接口信息。