uniwebview4（uni-app动态开启VConsole控制台调试，太方便了！）

需求背景

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

npm安装好vconsole后：

npm install vconsole

会在 H5 页面上一直显示VConsole的开关            ，关闭需要注掉代码后重新打包发布 
  
 
  
 
  
 
  
 
  
 
  
 ，比较繁琐且不够灵活 
  
 
  
 
  
 
  
 
  
 
  
 。

解决方案

方法比较简单











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












。

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) }

访问

 


 


 


 


 


 

，示例地址：

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

注意事项：

如果想单页面启用调试则只需要在页面的 onLoad 加载回调中添加初始化 VConsole；

全局显示则需要在程序入口文件 App.vue 中进行初始化 
  
  
  
  
  
 。