vite-uni-dev-tool

v0.0.51

Published

15 days ago

vite-uni-dev-tool, debug, uni-app, 一处编写，到处调试

0High
0Medium
0Low

anycloud666

vite debugger dev-tool vite-uni-dev-tool uni-app 调试插件一处编写，到处调试

vite-uni-dev-tool

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

安装

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

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

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

使用方法

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 | | 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 |

v3 支持的工具 hooks 可单独使用

useRequest

文档地址：useRequest

useScanCode

文档地址：useScanCode

useNFC

文档地址：useNFC

为什么不用 subPackages?

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

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

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

// 方法 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`即可

uniDevTool({
  pages,
  importConsole: true
}),

0.0.38 版本加入 `injectDevTool` 属性，根据不同的环境中注入调试工具

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` 即可

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 查看

支持 nfc 查看

支持 storage 查看，编辑

支持 vuex 查看，编辑

支持 pinia 查看，编辑

支持查看 window 信息

支持查看 device 信息

支持查看 system 信息

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

其他页

更新日志

0.0.51

修复 console 滚动异常
优化 useNFC

0.0.50

修复类型错误

0.0.49

修复 console 查看 json
修复 setting 查看 systen info

0.0.48

移除 vueVersion
修复调试工具中编辑 storage
修复调试工具中编辑 vuex

0.0.47

增加了 useNFC ndef 格式读取内容解析
增加了 useNFC ndef 格式内容写入

0.0.46

提供全局uni事件 dev-window-open
- 点击调试按钮触发
提供全局uni事件 dev-window-close
- 关闭调试弹窗触发
修复 uniDevTool 插件在处理 page-meta,放置在 template 中顶层

0.0.45

新增了 useNFC 工具，
- 支持微信小程序读写，
- 支持安卓读
在 uni 中注入了 __dev_tool_nfc_collection__ 方法, 用于收集 useNFC 产生的调试信息

0.0.44

新增了 useRequest 请求工具
新增 useScanCode
- 针对 android pda 广播扫描进行调试信息收集
- 针对 h5 扫描头增加调试信息收集
在 uni 中注入了 __dev_tool_scan_code_collection__ 方法, 用于收集 useScanCode 产生的调试信息

0.0.43

JsonPretty 支持复制全部

0.0.42

修复请求头过滤

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

初始版本发布

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

vite-uni-dev-tool

安装

使用方法

如果修改uniDevTool 配置项编译到微信，Android 需要先删除 dist 目录

uniDevTool 配置项

v3 支持的工具 hooks 可单独使用

useRequest

useScanCode

useNFC

为什么不用 subPackages?

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

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

0.0.38 版本加入 injectDevTool 属性，根据不同的环境中注入调试工具

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

注意事项

兼容性说明

安全性声明

预览

更新日志

0.0.51

0.0.50

0.0.49

0.0.48

0.0.47

0.0.46

0.0.45

0.0.44

0.0.43

0.0.42

0.0.41

0.0.40

0.0.39

0.0.38

0.0.37

0.0.36

0.0.35

0.0.34

0.0.33

0.0.32

0.0.31

0.0.30

0.0.29

0.0.28

0.0.27

0.0.26

0.0.25

0.0.24

0.0.23

0.0.22

0.0.21

0.0.20

0.0.19

0.0.18

0.0.17

0.0.16

0.0.15

0.0.14

0.0.13

0.0.12

0.0.11

0.0.10

0.0.9

0.0.8

0.0.7

0.0.6

0.0.5

0.0.4

0.0.3

0.0.2

0.0.1

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

0.0.38 版本加入 `injectDevTool` 属性，根据不同的环境中注入调试工具

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