背景

最近在接手一个政务微信应用（http://zwwxuat.shdata.com/api/doc#10013），其实就是嵌入网页的方式的，但是调试环境着实难受。发现了一个很好调试的工具，vconsole，因此记录一下。

安装使用

方式一

npm i vconsole --save

let VConsole = require('vconsole')
new VConsole()

方式二

 <script src="http://wechatfe.github.io/vconsole/lib/vconsole.min.js"></script>
 new VConsole()

显隐控制

发布到线上环境中的话，此时默认应该是隐藏的，当进行某处的连续5次点击时，显示，主要是为了方便软件开发人员进行线上调试。

示例代码：

<template>
   <div>
        <button  @click="toggleVConsoleShow">显隐 </button>
  </div>
</tempate>

<script>
export default {
   methods:{
     toggleVConsoleShow(){
     count++
     if(count === 5){
        const el = document.getElementById('__vconsole')
        if(el){
           if(el.className.indexOf('show')!==-1){
               el.className = ''
           }else{
               el.className = 'show'
           }
        }
     }
      setTimeout(()=>{
        count = 0
      },1000)
   }
  }
}
</script>

<style>
#__vconsole {
    display: none;
}

#__vconsole.show {
    display: block;
}
</style>