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 配置项

| 参数 | 说明 | 类型 | 默认值 | | ---------------------------- | ------------------------------------------------------------------------------------------------- | -------- | ------------------------------------------------ | | 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 | | 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'] |

为什么不用 subPackages?

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

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

• 0.0.5版本之后为了在生产环境中移除插件，开发环境中插件将会自动导入 console，无需手动导入
• 0.0.5版本之后不推荐使用 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
}),

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

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

• 初始版本发布