vite-uni-dev-tool
Version:
vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试
265 lines (181 loc) • 9.94 kB
Markdown
# 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` ，用于栈信息获取源代码文件
### 预览
- 支持 console 日志
- 支持 network 监控
- 支持 upload 监控
- 支持 websocket 监控
- 支持 connection 网络状态查看
- 支持 route 查看，跳转
- 支持 storage 监控，编辑
- 支持 vuex 监控，编辑
- 支持 pinia 监控，编辑
- 支持查看 window 信息
- 支持查看 device 信息
- 支持查看 system 信息
- setting 页，支持重启，导出日志（h5,app）
## 更新日志
### 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
- 初始版本发布