# vite-uni-dev-tool

**Repository Path**: cloud_l/vite-uni-dev-tool

## Basic Information

- **Project Name**: vite-uni-dev-tool
- **Description**: 用于 vue3 + ts + uni-app 的开发调试插件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2025-07-02
- **Last Updated**: 2025-07-28

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vite-uni-dev-tool

用于 vue3 + ts + hooks + uni-app 的开发调试插件

## 安装

```cmd
# 使用 npm 安装
npm i vite-uni-dev-tool

# 使用 pnpm 安装
pnpm i vite-uni-dev-tool

# 使用 yarn 安装
yarn add vite-uni-dev-tool
```

## 使用方法

```ts
import { defineConfig } from 'vite';
import uni from '@dcloudio/vite-plugin-uni';

import uniDevTool from 'vite-uni-dev-tool';
import pages from './src/pages.json';
import * as path from 'path';

// https://vitejs.dev/config/
export default defineConfig({
  optimizeDeps: {
    // 预构建排除 vite-uni-dev-tool 模块，防止 eventBus 冲突
    exclude: ['vite-uni-dev-tool'],
  },
  plugins: [
    // 一定要在 uni() 之前调用 否则微信小程序将无法正常编译组件
    uniDevTool({
      pages,
    }),
    uni(),
  ],
  server: {
    host: true,
    port: 10088,
  },
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'),
    },
  },
});
```

### uniDevTool 配置项

| 参数                         | 说明                                                                                           | 类型     | 默认值                 |
| ---------------------------- | ---------------------------------------------------------------------------------------------- | -------- | ---------------------- |
| pages                        | 配置pages.json                                                                                 | object   | {}                     |
| enableInterceptPromiseReject | 是否拦截Promise.reject 最好不要拦截 默认禁用                                                   | boolean  | false                  |
| consoleMaxSize               | 最大的console条数                                                                              | number   | 1000                   |
| networkMaxSize               | 最大的网络请求条数                                                                             | number   | 1000                   |
| uploadMaxSize                | 最大的上传文件条数                                                                             | number   | 1000                   |
| wsDataMaxSize                | 最大的套接字消息条数                                                                           | number   | 1000                   |
| captureScreenMaxSize         | 最大的截图记录条数                                                                             | number   | 1000                   |
| cacheMaxSize                 | 最大占用缓存空间 bytes                                                                         | number   | 8\*1024\*1024\*10      |
| buttonSize                   | 按钮大小                                                                                       | number   | 50                     |
| buttonText                   | 按钮文本                                                                                       | string   | 🐜                     |
| buttonFontSize               | 按钮字体大小                                                                                   | string   | 16px                   |
| buttonBackgroundColor        | 按钮背景颜色                                                                                   | string   | rgba(255, 255, 255, 0) |
| initShowDevTool              | 初始化时是否显示调试按钮,默认显示                                                              | boolean  | true                   |
| zIndex                       | 调试按钮的zIndex,默认1000                                                                      | number   | 1000                   |
| useDevSource                 | 该属性处于实验当中，谨慎使用,读取开发环境 source file,source map,默认 禁用                     | boolean  | false                  |
| sourceFileServers            | 该属性处于实验当中，谨慎使用,开发环境 source file 服务器地址，默认 [] ，配合 useDevSource 使用 | string[] | []                     |
| importConsole                | 是否导入 console 默认不导入， 只会捕获error 和 warn                                            | boolean  | false                  |

### 为什么不用 subPackages?

- 从当前页跳转到subPackages页面时，会触发 uni-app 页面生命周期，有时是不希望如此的，比如在开发过程中，希望可以直接在当前页面进行调试。

### 如何将 console 日志输出到控制台

- 0.0.5版本之后为了在生产环境中移除插件，开发环境中插件将会自动导入 `console`，无需手动导入
- 0.0.5版本之后不推荐使用 `uni.__dev__console` , 在未来版本中可能会进行移除

```ts
// 方法 1
import { console } from 'vite-uni-dev-tool/dev/core';

console.log('hello vite-uni-dev-tool');

// 方法 2

uni.__dev__console.log('hello vite-uni-dev-tool');
```

### 0.0.12 版本在插件中增加了 `importConsole` 属性，默认不导入，只捕获`error`, `warn`, 用户手动调用的`console` 将不再进行捕获，如需捕获传入`true`即可

```ts
uniDevTool({
  pages,
  importConsole: true
}),
```

### vite 预加载导致的 `eventBus` 事件冲突 , 预加载排除 `vite-uni-dev-tool` 即可

```ts
optimizeDeps: {
  // 预构建排除 vite-uni-dev-tool 模块，防止 eventBus 冲突
  exclude: ['vite-uni-dev-tool'],
}
```

### 注意事项

### 兼容性说明

| vue2 | vue3 |
| ---- | ---- |
| N    | Y    |

| 微信小程序 | 安卓 | 其他   |
| ---------- | ---- | ------ |
| Y          | Y    | 未测试 |

### 安全性声明

插件不收收集任何信息，只供开发人员调试使用

- 插件中使用到了 `fs`，用于栈信息获取源代码文件
- 插件使用了 `uni.request` ，用于栈信息获取源代码文件

### 预览

![all.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/all.png)

- 支持 console 日志

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/console.jpg)

- 支持 network 监控

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/network1.jpg)
![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/network2.jpg)
![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/network3.jpg)
![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/network4.jpg)

- 支持 upload 监控

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/upload1.jpg)
![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/upload2.jpg)
![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/upload3.jpg)
![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/upload4.jpg)

- 支持 websocket 监控

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/websocket1.jpg)
![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/websocket2.jpg)

- 支持 connection 网络状态查看

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/connection.jpg)

- 支持 route 查看，跳转

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/route.jpg)

- 支持 storage 监控，编辑

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/storage.jpg)

- 支持 vuex 监控，编辑

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/vuex.jpg)

- 支持 pinia 监控，编辑

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/pinia.jpg)

- 支持查看 window 信息

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/window.jpg)

- 支持查看 device 信息

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/device.jpg)

- 支持查看 system 信息

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/system.jpg)

- setting 页，支持重启，导出日志（h5,app）

![image.png](https://gitee.com/cloud_l/vite-uni-dev-tool/raw/master/packages/docs/public/setting.jpg)

## 更新日志

### 0.0.12

- 修复 network url显示长度
- 修复部分样式
- 修复列表高度异常
- 修复销毁之后操作
- 刷新之后隐藏调试弹窗
- 列表返回到顶部
- 增加层级属性，默认层级1000
- 构建导致的 eventBus 冲突

### 0.0.11

- 新增 console run 简易提示
- 新增 appInfo
- 新增 captureScreen(h5端不支持)
- 新增滑动切换
- 修复 console 滚动到指定位置
- 修复调用栈起始行
- 修复 json pretty 折叠icon

### 0.0.10

- 修复 console 过滤异常

### 0.0.9

- 修复 template 多节点造成的 createIntersectionObserver 异常

### 0.0.8

- 修复多 template 注入调试工具异常
- 修复 json pretty 逗号位置
- 修复 json pretty symbol 类型转换异常
- json pretty 自动判断虚拟列表
- 虚拟列表抽离到独立文件

### 0.0.7

- 监听uni.$on
- 监听uni.%once
- 监听uni.$emit
- 监听uni.$of

### 0.0.6

- 修复 app 查看 source 重启

### 0.0.5

- 修复 路由支持跳转 subPackages
- 增加栈位置查看（实验中功能）

### 0.0.4

- 修复初始启用状态

### 0.0.3

- 文档调整

### 0.0.2

- 文档调整

### 0.0.1

- 初始版本发布