uni-app动态开启vconsole调试

2022-01-14 12:42:26

分享 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 中进行初始化。

参考资料

本文链接:
版权声明:本博客所有文章除特别声明外,均采用 CC BY-NC-ND 3.0 许可协议。可自由转载、引用,但需署名作者且注明文章出处。如转载至微信公众号,请在文末添加作者公众号二维码。

扫描下方二维码阅读当前文章

浏览器、微信扫码
微信小程序

评 论:

好文推荐
同名公众号:薛定喵君
每天进步一点点~