uni-app动态开启vconsole调试

分享 uni-app 动态开启 vconsole 调试的方法

背景

使用 uni-app 开发 h5 应用有时需要排查线上发生的问题。

安卓手机可以使用debugx5.qq.com来开启调试面板，但是苹果并不支持，所以一般采用安装vconsole的方式来查看控制台信息调试应用。

安装之后会在 H5 页面上一直显示vconsole的开关，关闭需要注掉代码后重新打包，过程比较繁琐。

解决办法

方法比较简单，就是增加一个参数例如 debug 来控制调试面板的初始化，接收并在本地缓存参数动态控制调试模式的启停用，缺省时默认不开启。

这里比较特殊的地方是综合办公应用已经与平台解耦，所以需要修改应用的授权页。

1. 引入 vconsole：

npm install vconsole

1. App.vue 文件中增加引用：

import vconsole from 'vconsole';

1. 在程序启动回调函数 onLaunch 中追加判断：

onLaunch: function(e) {
	if (e.query.debug) {
		if (e.query.debug == 1 && !this.$vconsole) {
			this.$vconsole = new vconsole()
		}
	}
	console.log('App Launch')
},

1. 访问方式(本地测试端口为 8080)：

地址示例：

http://[localhost/本机IP]:8080/?debug=1

Tip: 如果想单页面启用调试则只需要在页面的 onLoad 加载回调中添加初始化 vconsole；全局显示则需要在程序入口文件 App.vue 中进行初始化。

参考资料

• TBS 调试指南
• uni-app 使用 vconsole