給手機端頁面留一個調試後門吧(vue)

當咱們在瀏覽器開發vue頁面時，因爲瀏覽器對於調試有自然的支持，咱們開發起來很方便。可是如今已經進入了移動端時代，移動端頁面的需求愈來愈大。

在開發移動端頁面的時候咱們一般是在瀏覽器完成開發完成，以後纔在手機端測試，若是測試出現問題還得從新回到瀏覽器上尋找錯誤。甚至還有嵌入在APP的頁面，通過調試以後還要從新發包。固然還有更加奇怪的現象，因爲手機瀏覽器和Web瀏覽器的差別，常常會發如今Web瀏覽器上好好的，一到手機上就不行的狀況。

所以首先咱們須要一個能在手機端調試的插件。若是你還在使用alert一步步來定位移動端頁面bug的話，不妨試試vConsole。

vConsole

vConsole是一個由微信公衆平臺前端團隊研發的Web前端開發者面板，可用於展現console日誌，方便開發、調試。能夠在vConsole.js下載地址下載所需的js。下載解壓以後，在dist文件夾中找到vconsole.min.js，加入工程中：

<script src="path/to/vconsole.min.js"></script>
<script>
  // init vConsole
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

請注意，VConsole 只是 vConsole 的原型，而非一個已實例化的對象。因此在手動 new 實例化以前，vConsole 不會被插入到網頁中。

在安裝完vConsole以後，你覺得事情就結束了嗎？

還有一個很大的問題就是確定不能讓用戶看到咱們的調試頁面的，所以咱們須要偷偷給咱們的程序設置後門。

動態引入代碼

這裏有兩種設計的思路以供參考：

1. 在程序中某個地方設置一個後門。點擊10次或者長按10秒以後自動引入這段代碼。
2. 經過運行環境來引入動態vConsole。即在測試階段引入，而生產環境則不會引入這段代碼。

設置後門

在程序中某個地方設置長按10秒自動引入代碼。

首先長按10秒的效果須要3個事件結合才能產生。

• @touchstart：開始長按
• @touchmove：長安過程當中移動
• @touchend：結束長按

綁定事件

代碼以下，在標籤上引入這三個事件：

<div @touchstart="handleTouchstart" @touchmove="handleTouchmove" @touchend="handleTouchend">
   <van-col span="24" class="loginPage-title">title<an-col>
</div>

對應的方法：

handleTouchstart() {
  touchStart();
},
handleTouchmove() {
  touchMove();
},
handleTouchend() {
  touchEnd();
},

其中的touchStart，touchMove，touchEnd方法由外部文件import進來，便於統一管理，固然其實也能夠直接在這個文件裏實現。

長按10秒

首先什麼才叫長按10秒。touchstart而後開始計時10秒以後確定不叫長按10秒，這樣就叫作點擊事後10秒了。長按10秒應該是手指觸碰連續10秒，期間不能觸發touchmove和touchend事件。

所以思路應該是，touchstart開始計時，期間若是觸發了touchmove和touchend事件則將計時器重置：

let timeOutEvent = null;

export const touchStart = () => {
    timeOutEvent = setTimeout(function () {
        longPress();
    }, 10000);

};
export const touchMove = () => {
    clearTimeout(timeOutEvent);
    timeOutEvent = 0;
}

export const touchEnd = () => {
    clearTimeout(timeOutEvent);
}

在longPress方法中去動態引入vConsole：

const longPress = () => {
    clearTimeout(timeOutEvent); //清除定時器
    timeOutEvent = 0;
    //執行長按要執行的內容
    vConsoleLog()
};

const vConsoleLog = () => {
    let mapScript = document.getElementById("vConsoleLog");
    if(mapScript){
        return;
    }
    let script = document.createElement('script');
    script.id = 'vConsoleLog';
    script.type = 'text/javascript';
    script.src = './console.js';
    document.body.appendChild(script);
}

這樣，咱們就在程序中植入了一個後門，須要調試的時候只須要長按10秒,vConsole就出來了。

根據環境動態引入

若是想要嚴謹一點，不但願用戶在任什麼時候候看到這個調試按鈕的話，則能夠根據環境（env）來引入vConsole。

轉評贊就是最大的鼓勵

原文出處：https://www.cnblogs.com/xiaoyuehan/p/11457432.html