給手機端頁面留一個除錯後門吧(vue)

小熊我不要了發表於2019-09-04
除錯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 不會被插入到網頁中。

file

在安裝完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。

轉評贊就是最大的鼓勵

相關文章