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

使用介绍 | UniDevTools

兼容框架：

兼容平台：

下载安装

将下载好的源码解压至项目根目录，文件夹命名为 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)

  //挂载Devtools
  app.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已默认开启调试气泡框
自定义配置可参考：参数配置

效果图：