當我們在瀏覽器開發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之後,你以為事情就結束了嗎?
還有一個很大的問題就是肯定不能讓使用者看到我們的除錯頁面的,因此我們需要偷偷給我們的程式設定後門。
動態引入程式碼
這裡有兩種設計的思路以供參考:
- 在程式中某個地方設定一個後門。點選10次或者長按10秒之後自動引入這段程式碼。
- 通過執行環境來引入動態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。
轉評贊就是最大的鼓勵