vite-uni-dev-tool, debug, uni-app, 一处编写,到处调试
npm install vite-uni-dev-toolcmd
使用 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'),
},
},
});
`
$3
- 这个很重要,防止出现各种异常问题
- 这个很重要,防止出现各种异常问题
- 这个很重要,防止出现各种异常问题
$3
| 参数 | 说明 | 类型 | 默认值 |
| ---------------------------- | ---------------------------------------------------------------------------------------------- | ---------------------------------------------- | ------------------------------------------------ |
| 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 |
| nfcListMaxSize | 最大的nfc记录条数 | 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'\] | \[\] |
| 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 |
$3
#### useRequest
文档地址:useRequest
#### useScanCode
文档地址:useScanCode
#### useNFC
文档地址:useNFC
$3
- 从当前页跳转到subPackages页面时,会触发 uni-app 页面生命周期,有时是不希望如此的,比如在开发过程中,希望可以直接在当前页面进行调试。
$3
- 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');
`
$3
`ts
uniDevTool({
pages,
importConsole: true
}),
`
$3
`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'),
},
},
};
});
`
$3
`ts
optimizeDeps: {
// 预构建排除 vite-uni-dev-tool 模块,防止 eventBus 冲突
exclude: ['vite-uni-dev-tool'],
}
`
$3
$3
| vue2 | vue3 |
| ---- | ---- |
| N | Y |
| h5 | 安卓 | 微信小程序 | 支付宝小程序 | 抖音小程序 | 其他 |
| --- | ---- | ---------- | ------------ | ---------- | ------ |
| Y | Y | Y | Y | Y | 未测试 |
$3
插件不收集任何信息,只供开发人员调试使用
- 插件中使用到了 fs,用于栈信息获取源代码文件
- 插件使用了 uni.request ,用于栈信息获取源代码文件
$3
!all.png
- 调试按钮
!image.png
- 支持 console 日志
!image.png
- 支持 network 查看
!image.png
!image.png
!image.png
!image.png
!image.png
!image.png
!image.png
- 支持 upload 查看
!image.png
!image.png
!image.png
!image.png
- 支持 websocket 查看
!image.png
!image.png
- 支持 connection 网络状态查看
!image.png
- 支持 route 查看,跳转
!image.png
- 支持 el event 查看
!image.png
- 支持 uni event 查看
!image.png
- 支持 capture screen 查看
!image.png
- 支持 scan code 查看
!image.png
- 支持 nfc 查看
!image.png
- 支持 storage 查看,编辑
!image.png
- 支持 vuex 查看,编辑
!image.png
- 支持 pinia 查看,编辑
!image.png
- 支持查看 window 信息
!image.png
- 支持查看 device 信息
!image.png
- 支持查看 system 信息
!image.png
- setting 页,支持重启,导出日志(h5,app)
!image.png
!image.png
- 其他页
!image.png
!image.png
更新日志
$3
- 修复 console 滚动异常
- 优化 useNFC
$3
- 修复类型错误
$3
- 修复 console 查看 json
- 修复 setting 查看 systen info
$3
- 移除 vueVersion
- 修复调试工具中编辑 storage
- 修复调试工具中编辑 vuex
$3
- 增加了 useNFC ndef 格式读取内容解析
- 增加了 useNFC ndef 格式内容写入
$3
- 提供全局uni事件 dev-window-open
- 点击调试按钮触发
- 提供全局uni事件 dev-window-close
- 关闭调试弹窗触发
- 修复 uniDevTool 插件在处理 page-meta,放置在 template 中顶层
$3
- 新增了 useNFC 工具,
- 支持微信小程序读写,
- 支持安卓读
- 在 uni 中注入了 __dev_tool_nfc_collection__ 方法, 用于收集 useNFC 产生的调试信息
$3
- 新增了 useRequest 请求工具
- 新增 useScanCode
- 针对 android pda 广播扫描进行调试信息收集
- 针对 h5 扫描头增加调试信息收集
- 在 uni 中注入了 __dev_tool_scan_code_collection__ 方法, 用于收集 useScanCode 产生的调试信息
$3
- JsonPretty 支持复制全部
$3
- 修复请求头过滤
$3
- 微信小程序重新启动
- 优化 console中的 link展示和跳转
- 支持 ScanCode 查看
$3
- 修复事件列表最大尺寸配置错误
- 增加异常上报功能
- 优化 initDevTool 插入位置
- 兼容抖音小程序
$3
- uniDevTool 插件新增 injectDevTool 属性,默认为 true,可根据外界 mode 判断是否注入 DevTool
- 调试文档预览图篇
$3
- 增加网络请求发起者: 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 展示
$3
- 去除页面外层样式 height: 100vh; overflow: auto;
- 当内容高度大于 100vh 时,未滚动到顶部 可触发 onPullDownRefresh
- 暂无阻止滚动事件穿透方法
- 增加事件的捕获和排除
- 解决控制台报错 TypeError: Cannot read properties of null (reading 'scrollHeight')
$3
- 优化 console 展示,不在列表中展示 object , array
- 增加了部分事件捕获: tap, touchstart, touchend,touchmove
- 添加了新的配置项 importEventBus 和 captureList
$3
- 修复开发,生产环境造成 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 反馈链接地址
$3
- 兼容 navigate 和 tab 高度造成的异常
- 阻止滚动穿透
- h5 采用事件进行阻止 + 页面样式(自动注入)
- WEIXIN, APP-PLUS 对页面样式进行调整 height: 100vh; overflow: auto;, 无法阻止页面级别的 onPullDownRefresh,onReachBottom`