一、說明

需求：

生產環境出bug，是app單點登入，沒法除錯，需要加一個vconsole，但是不影響其他使用者使用，於是想到用暗門的方式

實現：

最終實現如上圖，點選個人中心幾個字，點選10次顯示vconsole，再點選10次隱藏

二、安裝

框架是vue3的，首先引入vconsole，文件：https://github.com/Tencent/vConsole

1、npm

$ npm install vconsole

2、在合適的地方新建一個檔案vconsole.js，內容如下： 

import Vconsole from 'vconsole'
let vConsole = new Vconsole()
export 
 
default vConsole

3、main.js 引入

import vConsole from './vconsole/index'

經過以上三步走，綠色圖示就會出現，點選可以看到console的除錯介面

三、控制顯示和隱藏

1、全域性新增樣式，這個id是vconsole按鈕內建的，寫了下面這句話，按鈕就隱藏了，我們後面只需要控制顯示就可以了

#__vconsole { 
display: none; 
&.show{ 
display: block; 
} 
}

2、在需要點選的地方新增方法，我這裡是在“個人中心”幾個字這裡加方法

預設隱藏了，下面方法操作加“show” class顯示

1.addClass:為指定的dom元素新增樣式

2.removeClass:刪除指定dom元素的樣式

3.toggleClass:如果存在(不存在)，就刪除(新增)一個樣式

4.hasClass:判斷樣式是否存在

  <div class="vc-tigger" @click="toggleVc"></div>


// 控制點選十次顯示隱藏

 hasClass(obj, cls) {
            return obj.className.match(new RegExp('(\\s|^)' + cls + '(\\s|$)'));
          },
          addClass(obj, cls) {
            
 
if (!this.hasClass(obj, cls)) obj.className += " " + cls;
          },
          toggleClass(obj,cls){
            if(this.hasClass(obj,cls)){
              this.removeClass(obj, cls);
            }else{
              this.addClass(obj, cls);
            }
          },
          removeClass(obj, cls) {
            if (this.hasClass(obj, cls)) {
              var reg = new RegExp('(\\s|^)' + cls + '(\\s|$)');
              obj.className = obj.className.replace(reg, ' ');
            }
          },
          toggleVc(){
            const nowTime = new Date().getTime();
            if(nowTime - this.lastClickTime < 3000){
              this.count ++;
            } else {
              this.count = 0;
            }
            this.lastClickTime = nowTime;
            if(this.count >= 10) {
              let vconDom = document.getElementById('__vconsole');
              this.toggleClass(vconDom,'show')
              this.count = 0;

            }
          }

以上就是所有程式碼了。

後續擴充套件還有，根據環境顯示（判斷當前環境：process.env.NODE_ENV），或者根據使用者顯示（userid 進行判斷）等，靈活調整選用。