vite-uni-dev-tool
Version:
vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试
525 lines (366 loc) • 20.7 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 配置项编译到微信，Android 需要先删除 dist 目录_**
- 这个很重要，防止出现各种异常问题
- 这个很重要，防止出现各种异常问题
- 这个很重要，防止出现各种异常问题
### uniDevTool 配置项
| 参数 | 说明 | 类型 | 默认值 |
| ---------------------------- | ------------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------ |
| pages | 配置pages.json | object | {} |
| enableCaptureScreen | 是否监听 截屏时间，默认关闭，开启需要前往插件市场安装 `uni-usercapturescreen` 插件 | boolean | false |
| enableInterceptPromiseReject | 是否拦截Promise.reject 最好不要拦截 默认禁用 | boolean | false |
| consoleMaxSize | 最大的console条数 | number | 1000 |
| networkMaxSize | 最大的网络请求条数 | number | 1000 |
| uploadMaxSize | 最大的上传文件条数 | number | 1000 |
| wsDataMaxSize | 最大的套接字消息条数 | number | 1000 |
| screenMaxSize | 最大的屏幕记录条数 | number | 1000 |
| elEventListMaxSize | 最大的元素事件记录条数 | number | 1000 |
| uniEventListMaxSize | 最大的uni事件记录条数 | number | 1000 |
| scanCodeListMaxSize | 最大扫描码记录条数 | number | 1000 |
| cacheMaxSize | 最大占用缓存空间 bytes | number | 8\*1024\*1024\*10 |
| initShowDevTool | 初始化时是否显示调试按钮,默认显示 | boolean | true |
| zIndex | 调试按钮的zIndex,998 | number | 998 |
| useDevSource | 该属性处于实验当中，谨慎使用,读取开发环境 source file,source map,默认 禁用 | boolean | false |
| sourceFileServers | 该属性处于实验当中，谨慎使用,开发环境 source file 服务器地址，默认 [] ，配合 useDevSource 使用 | string[] | [] |
| importConsole | 是否导入 console 默认不导入， 只会捕获error 和 warn | boolean | false |
| importEventBus | 是否导入 eventBus 默认导入，不导入将会无法触发捕获事件 | boolean | true |
| captureList | 需要捕获的事件列表 | \['tap','touchstart','touchend','touchemove'\] | \[\] |
| vueVersion | vue版本 该属性处于实验当中，3 支持 vue3 + ts + setup + hooks ，2 支持 vue3,vue2 非ts 非setup 情况 | number | 3 |
| excludeImportConsole | 排除导入 console 的目录 或 文件 | string[] | \['uni_modules', 'node_modules', 'src/App.vue'\] |
| excludeImportDevTool | 排除导入 DevTool 的目录 或 文件 | string[] | \['uni_modules', 'node_modules'\] |
| includeCaptureElDataSet | 需要捕获的 data-xxx, 优先级高于 `excludeCaptureElDataSet` , 默认空 捕获全部 | string[] | \[\] |
| excludeCaptureElDataSet | 排除捕获的 data-xxx, 优先级低于 `includeCaptureElDataSet` | string[] | \[\] |
| injectDevTool | 是否注入调试工具, 默认注入 | boolean | true |
| uploadAbnormalUV | 上传异常信息到远程服务器 | UploadAbnormalUV | undefined |
### 为什么不用 subPackages?
- 从当前页跳转到subPackages页面时，会触发 uni-app 页面生命周期，有时是不希望如此的，比如在开发过程中，希望可以直接在当前页面进行调试。
### 如何将 console 日志输出到控制台
- 0.0.5版本之后为了在生产环境中移除插件，开发环境中插件将会自动导入 `console`，无需手动导入
- 0.0.5版本之后不推荐使用 `uni.__dev__console` , 在未来版本中可能会进行移除
- 0.0.35 版本开始，已经移除 `uni.__dev__console`
```ts
// 方法 1
import { console } from 'vite-uni-dev-tool/dist/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
}),
```
### 0.0.38 版本加入`injectDevTool` 属性，根据不同的环境中注入调试工具
```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(({ mode }) => {
console.log('mode: ', mode);
return {
optimizeDeps: {
// 预构建排除 vite-uni-dev-tool 模块
exclude: ['vite-uni-dev-tool'],
},
plugins: [
uniDevTool({
pages,
useDevSource: true,
importConsole: true,
// 根据环境判断是否注入调试工具
injectDevTool: mode === 'development',
}),
uni() as any,
],
server: {
host: true,
port: 10088,
},
resolve: {
alias: {
'@': path.resolve(__dirname, 'src'),
},
},
};
});
```
### vite 预加载导致的 `eventBus` 事件冲突 , 预加载排除 `vite-uni-dev-tool` 即可
```ts
optimizeDeps: {
// 预构建排除 vite-uni-dev-tool 模块，防止 eventBus 冲突
exclude: ['vite-uni-dev-tool'],
}
```
### 注意事项
### 兼容性说明
| vue2 | vue3 |
| ---- | ---- |
| N | Y |
| h5 | 安卓 | 微信小程序 | 支付宝小程序 | 抖音小程序 | 其他 |
| --- | ---- | ---------- | ------------ | ---------- | ------ |
| Y | Y | Y | Y | Y | 未测试 |
### 安全性声明
插件不收集任何信息，只供开发人员调试使用
- 插件中使用到了 `fs`，用于栈信息获取源代码文件
- 插件使用了 `uni.request` ，用于栈信息获取源代码文件
### 预览
- 调试按钮
- 支持 console 日志
- 支持 network 查看
- 支持 upload 查看
- 支持 websocket 查看
- 支持 connection 网络状态查看
- 支持 route 查看，跳转
- 支持 el event 查看
- 支持 uni event 查看
- 支持 capture screen 查看
- 支持 scan code 查看
- 支持 storage 查看，编辑
- 支持 vuex 查看，编辑
- 支持 pinia 查看，编辑
- 支持查看 window 信息
- 支持查看 device 信息
- 支持查看 system 信息
- setting 页，支持重启，导出日志（h5,app）
- 其他页
## 更新日志
### 0.0.41
- 微信小程序重新启动
- 优化`console`中的`link`展示和跳转
- 支持 `ScanCode` 查看
### 0.0.40
- 修复事件列表最大尺寸配置错误
- 增加异常上报功能
- 优化 initDevTool 插入位置
- 兼容抖音小程序
### 0.0.39
- `uniDevTool` 插件新增 `injectDevTool` 属性，默认为 `true`，可根据外界 mode 判断是否注入 `DevTool`
- 调试文档预览图篇
### 0.0.38
- 增加网络请求发起者: user-> 用户 ， dev_tool -> 调试工具
- 替换部分 `ref` -> `shallowRef` 提升一点点
- 修复 `NetworkDetail` 滚动
- 修复 `Tabs` 滚动
- TODO: 微信模拟器中 `navigateHeight` 已经被计算到 `windowHeight` 中 ，导致高度计算异常，暂时没法处理, 真机模式暂无该问题
- 模拟器中最好不要将调试按钮拖动到屏幕 `2/3` 处, 防止高度计算导致的调试按钮不可见
- 解决 android `Uncaught TypeError: Cannot read property 'children' of null at uni-app-view.umd.js:7`
- 解决 android `Uncaught TypeError: Cannot read property '$' of undefined at uni-app-view.umd.js:7`
- 兼容 `android` 请求异常栈行
- 修复初始化过早调试弹窗事件没有注册完成
- 兼容不同平台 `style` 传递造成的差异
- 兼容 `mp-alipay`
- 强制 `connectSocket` 生成 `socketTask`
- 优化 `socket message` 展示
### 0.0.37
- 去除页面外层样式 `height: 100vh; overflow: auto;`
- 当内容高度大于 `100vh` 时,未滚动到顶部 可触发 `onPullDownRefresh`
- 暂无阻止滚动事件穿透方法
- 增加事件的捕获和排除
- 解决控制台报错 `TypeError: Cannot read properties of null (reading 'scrollHeight')`
### 0.0.36
- 优化 `console` 展示，不在列表中展示 `object` , `array`
- 增加了部分事件捕获: `tap`, `touchstart`, `touchend`,`touchmove`
- 添加了新的配置项 `importEventBus` 和 `captureList`
### 0.0.35
- 修复开发，生产环境造成 `core`条件编译异常
- 修复阻止滚动穿透带来的部分tab无法滚动
- `scroll-view` 出现滚动时，可以阻止触发 `onPullDownRefresh`,`onReachBottom`，仅部分tab可以触发
- 修复调试按钮拖拽
- 固定按钮样式
- 移除 `uni.__dev__console`
- 优化插件初始化逻辑
- 切换路由时关闭调试器
- 增加路由进入时间，离开时间，最近停留时长，总停留时长，进入次数
- 优化底部 tab 高度计算
- 优化RunJS执行逻辑
- 调整 console 部分样式
- 加入截屏监听配置项
- 如果需要监听截屏事件，请前往插件市场安装 `uni-usercapturescreen` 进行 uts 编译
- 如果编译失败 `uni-usercapturescreen` 不存在，将 `index.js|ts` 重命名成 `index.uts`
- h5 不支持截屏监听
- 兼容 `android` `AutoSize`获取高度异常报错
- 增加 `setting` 反馈链接地址
### 0.0.34
- 兼容 navigate 和 tab 高度造成的异常
- 阻止滚动穿透
- h5 采用事件进行阻止 + 页面样式(自动注入)
- WEIXIN, APP-PLUS 对页面样式进行调整 `height: 100vh; overflow: auto;`, 无法阻止页面级别的 `onPullDownRefresh`,`onReachBottom`
### 0.0.33
- 兼容 android 事件冲突
### 0.0.32
- 兼容 android 事件冲突
### 0.0.31
- 优化创建逻辑
### 0.0.30
- 兼容 app JsonPretty 警告
- 输出创建信息
### 0.0.29
- 优化创建逻辑
### 0.0.28
- 兼容 app JsonPretty 警告
### 0.0.27
- 兼容h5 内容高度
### 0.0.26
- 兼容h5 systemInfo
### 0.0.25
- 部分样式调整
- 兼容h5 systemInfo
### 0.0.24
- 修复缺失的key
- 优化版本信息
- 优化插件初始化逻辑
- 解决部分控制台 warn
### 0.0.23
- 兼容微信小程序 拦截store
- 优化部分展示
### 0.0.22
- 增加网络请求拦截规则
- 优化插件初始化逻辑
### 0.0.21
- 增加 source code 部分语法高亮
- 补充 network detail 字段
### 0.0.20
- 修复 storage 调用异常
### 0.0.19
- 修复 VirtualListPro 向上滚动
### 0.0.18
- Network Send 兼容微信小程序
- Network Send 去除部分传参格式
- 部分样式兼容 暗夜模式
### 0.0.17
- v3增加网络请求排序
- v3增加网络请求调用栈
- v3优化源码查看
### 0.0.16
- 修复 console 主题颜色
### 0.0.15
- 兼容部分 vue2 场景
### 0.0.14
- 兼容 script 非 setup
### 0.0.13
- 将部分ts内容转换为js
- 更换打包方式
- 开始兼容 vue2
### 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
- 初始版本发布