UniDevTools - UniApp(前端app)调试工具使用

使用介绍 | UniDevTools

兼容框架：

Vue2+js+vuex	Vue3+ts+vuex(pinia)
√	√

兼容平台：

H5	APP	微信小程序	APP-NVUE	其他小程序	UniAppX
√	√	√	√(大部分功能支持)	未测试	× (待办中)

下载安装

将下载好的源码解压至项目根目录，文件夹命名为 devTools

├─pages
│  ├─ 项目页面文件
|  └─ ...
├─devTools   [DevTools调试工具目录]
│  ├─core         核心源码
│  ├─page         浮窗页面及组件
│  ├─index.js     入口文件
│  ├─config.js    配置文件
│  └─tool.vue     自定义工具组件
├─App.vue
├─main.js
├─manifest.json
├─package.json
├─uni.scss
└─...

1.注册路由​

打开/pages.json加入以下代码:

{"pages": [...],"subPackages": [{"root": "devTools/page","name": "devToolsPage","pages": [{"path": "index","style": {"navigationStyle": "custom"// #ifdef APP-PLUS,"softinputMode": "adjustResize","backgroundColor": "transparent","animationDuration": 1,"animationType": "none","popGesture": "none","bounce": "none","titleNView": false// #endif}}]}]
}

将工具页/devTools/page注册为分包页面，自动兼容小程序\App\H5

2.引入调试工具&组件注册​

在/main.js中加入以下代码：

Vue2:

import Vue from 'vue'
import App from './App'//挂载Devtools
import devTools from "./devTools/index.js";
import devToolsConfig from './devTools/config.js';
Vue.use(devTools, devToolsConfig)//注册小程序端专用的拖动浮标组件
import mpDevBubble from './devTools/core/components/mpDevBubble.vue'
Vue.component("mpDevBubble", mpDevBubble)...
const app = new Vue({...})

Vue3:

import devTools from "./devTools/index.js";
import devToolsConfig from './devTools/config.js';
import mpDevBubble from './devTools/core/components/mpDevBubble.vue'
import devToolsVueMixin from "./devTools/core/proxy/vueMixin.js"export function createApp() {const app = createSSRApp(App);//混入DevTools生命周期监听app.mixin(devToolsVueMixin)//挂载Devtoolsapp.use(devTools, devToolsConfig)//注册小程序端专用的拖动浮标组件app.component("mpDevBubble", mpDevBubble)return {app,...};
}

3.挂载日志监听​

在/app.vue中加入以下代码：

Vue2:

export default {onError(err) {try {// 挂载devTools全局报错拦截uni.$dev.errorReport(err, "at App.vue onError", "oe");} catch (error) {}},onLaunch(option) {try {// 挂载APP启动日志提交uni.$dev.logReport("appOnLaunch>" + JSON.stringify(option));} catch (error) {}}
}

Vue3:

import { onError, onLaunch } from '@dcloudio/uni-app';
onError((err)=>{try {// 挂载devTools全局报错拦截uni.$dev.errorReport(err, "at App.vue onError", "oe");} catch (error) {}
})
onLaunch((ctx) => {try {// 挂载APP启动日志提交uni.$dev.logReport("appOnLaunch>" + JSON.stringify(ctx));} catch (error) {}
})

4.小程序端使用调试气泡

APP端和H5端自动挂载气泡浮窗，无需手动注册。小程序无法动态创建节点，所以需要注册调试气泡组件

在需要的页面vue文件内引入组件：

<template><view>...<mpDevBubble /></view>
</template>

5.启动项目开始试用​

配置文件/devTools/config.js已默认开启调试气泡框
自定义配置可参考：参数配置

效果图：