分享 uni-app 动态开启 vconsole 调试的方法
背景
使用 uni-app 开发 h5 应用有时需要排查线上发生的问题。
安卓手机可以使用debugx5.qq.com
来开启调试面板,但是苹果并不支持,所以一般采用安装vconsole
的方式来查看控制台信息调试应用。
安装之后会在 H5 页面上一直显示vconsole
的开关,关闭需要注掉代码后重新打包,过程比较繁琐。
解决办法
方法比较简单,就是增加一个参数例如 debug
来控制调试面板的初始化,接收并在本地缓存参数动态控制调试模式的启停用,缺省时默认不开启。
这里比较特殊的地方是综合办公应用已经与平台解耦,所以需要修改应用的授权页。
- 引入
vconsole
:
npm install vconsole
- App.vue 文件中增加引用:
import vconsole from 'vconsole';
- 在程序启动回调函数
onLaunch
中追加判断:
onLaunch: function(e) {
if (e.query.debug) {
if (e.query.debug == 1 && !this.$vconsole) {
this.$vconsole = new vconsole()
}
}
console.log('App Launch')
},
- 访问方式(本地测试端口为
8080
):
地址示例:
http://[localhost/本机IP]:8080/?debug=1
Tip: 如果想单页面启用调试则只需要在页面的
onLoad
加载回调中添加初始化vconsole
;全局显示则需要在程序入口文件 App.vue 中进行初始化。
参考资料
原文地址:https://cloud.tencent.com/developer/article/1934748
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。