1. 程式人生 > >給手機端頁面留一個除錯後門吧(vue)

給手機端頁面留一個除錯後門吧(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。

轉評贊就是最大的鼓