更新记录

1.0.6（2026-02-11） 下载此版本

优化已知问题

1.0.5（2025-11-21） 下载此版本

优化按钮

1.0.4（2025-11-03） 下载此版本

精简代码

平台兼容性

uni-app(3.6.16)

uni-app x(3.6.16)

wl-debugger

一个功能强大的 uni-app 调试工具，支持控制台日志、网络请求拦截、本地存储管理和 WebSocket 数据监控等功能。

功能特性

• 📝 控制台日志 - 捕获并显示 console.log、console.error、console.info、console.warn
• 🌐 网络请求拦截 - 监控和调试 uni.request 请求
• 💾 本地存储管理 - 查看和管理本地存储数据
• 🔌 WebSocket 监控 - 实时监控 WebSocket 连接和数据

前置要求

wl-debugger 需要在 uni-app 项目中使用 @uni-ku/root 插件来实现全局组件的注册和显示。

为什么需要 @uni-ku/root？

在 uni-app 中，App.vue 不能直接渲染模板内容，要实现全局组件在所有页面显示，需要使用 @uni-ku/root 提供的全局布局功能。@uni-ku/root 通过 App.ku.vue 文件提供了一个类似 RouterView 的全局布局容器，可以放置需要全局显示的组件。

安装步骤

1. 安装 @uni-ku/root 插件

使用 npm 或 pnpm 安装：

# 使用 npm
npm install @uni-ku/root --save-dev

# 使用 pnpm
pnpm add @uni-ku/root --save-dev

2. 配置 vite.config.js

在项目根目录创建或修改 vite.config.js（或 vite.config.ts），添加 @uni-ku/root 插件：

// vite.config.js
import Uni from '@dcloudio/vite-plugin-uni'
import UniKuRoot from '@uni-ku/root'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    // 若存在改变 pages.json 的插件，请将 UniKuRoot 放置其后
    UniKuRoot(),
    Uni()
  ]
})

使用方法

1. 初始化 Debugger

在 main.js 中初始化 Debugger：

// main.js
import App from './App'
import { createSSRApp } from 'vue'
import { Debugger } from '@/uni_modules/wl-debugger/components/wl-debugger/common/debugger'

export function createApp() {
  const app = createSSRApp(App)
  // 初始化 Debugger
  Debugger.getInstance()
  return {
    app
  }
}

2. 创建 App.ku.vue 文件

在项目根目录创建 App.ku.vue 文件（与 App.vue 同级）：

<script setup lang="ts">
import WlDebugger from '@/uni_modules/wl-debugger/components/wl-debugger/index.vue'
</script>

<template>
  <KuRootView />
  <!-- 全局调试器组件，会在所有页面上层显示 -->
  <WlDebugger />
</template>

说明：

• <KuRootView /> 是 @uni-ku/root 提供的路由视图组件，所有页面内容会渲染在这里
• <WlDebugger /> 是调试器组件，会在所有页面上层显示，不会遮挡页面内容

Q: 调试器没有显示？

A: 检查以下几点：

1. 是否安装了 @uni-ku/root 插件
2. 是否正确配置了 vite.config.js
3. 是否创建了 App.ku.vue 文件
4. 是否在 main.js 中初始化了 Debugger

Q: 如何只在开发环境显示调试器？

A: 使用条件编译：

<!-- App.ku.vue -->
<template>
  <KuRootView />
  <!-- #ifdef H5 -->
  <!-- 开发环境显示 -->
  <WlDebugger />
  <!-- #endif -->
</template>

许可证

MIT

更新日志

查看 changelog.md 了解版本更新记录。