小技巧|移動端網頁除錯神器Eruda使用技巧

Dunizb發表於2017-10-16
網頁除錯

本文首發於我的部落格：dunizb.com
原文連結：dunizb.com/2017/10/16/…

做移動端Web開發的一大痛點就是，在真機執行下無法檢視console.log日誌和其他資訊如網路請求、顯示本地儲存等資訊。如果網頁是執行在手機瀏覽器中還算好，可以把網址在電腦上開啟檢視console資訊，但是如果是做APP的內嵌H5頁面，那就只能靠開發階段在瀏覽器模擬環境中儘量沒有Bug，但是，一旦H5上線後報錯那就比較麻煩了，而且還依賴APP環境才能跑的網頁，更加難以查詢問題。如果讓移動端也擁有類似Chrome DevTools工具那豈不是很愉快麼？

vConsole便是這樣一款很棒的移動端DevTools工具，由大廠企鵝出品。但本文把他定位為男二號，今天的主角男一號是：Eruda！vConsole的同類。如果你不知道怎麼在移動端除錯網頁，那麼本篇文章對你很有幫助，如果你是vConsole的使用者，那麼你也可嘗試一下Eruda，如果你是移動端網頁開發骨灰級玩家，那麼可以選擇低調的忽略本文。

Eruda是誰？

大家好，給大家介紹一下，這是我的.....。Eruda 是一個專為手機網頁前端設計的除錯皮膚，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日誌、檢查元素狀態、顯示效能指標、捕獲XHR請求、顯示本地儲存和 Cookie 資訊、瀏覽器特性檢測等等。

GitHub地址為：github.com/liriliri/er…，顏值和技能都很棒的Erdua：

顏值和技能都很棒的Eruda
顏值和技能都很棒的Eruda

詳細介紹可以戳這裡產看，我就不贅述了

使用技巧

這才是本文重點。Eruda的基本使用方法推薦使用CDN和可配置引數的形式，在頁面引入如下程式碼：

;(function () {
    var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') !== 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();複製程式碼

eruda.init();裡面可以傳入要初始化哪些皮膚，預設載入所有。

這樣使用方式沒有錯，但是如果Eruda要跟著釋出到線上的話，那我們要刪除這段程式碼？因為這樣會不管你需不需要除錯Eruda都會立即載入，在頁面出現Eruda的圖示。我的目標是，Eruda可以保留在頁面裡，無論什麼環境，只要我們想呼喚它出現的時候它才出現，不需要它的時候它只是一段不會生效的普通程式碼。

我想到的辦法是：首先把上述引入程式碼的src放到if裡，同時把localStorage改為sessionStorage，active-eruda引數也可以改個更短的名字，改後的程式碼如下：

;(function () {
    if (!/eruda=true/.test(window.location) || sessionStorage.getItem('eruda') !== 'true') return;
    var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();複製程式碼

這段程式碼的意思是如果URL中有引數eruda=true或者sessionStorage中eruda的值為true才載入Eruda。這樣的好處是，我們需要除錯的時候可以在網頁URL後面加個引數即可，不需要除錯的它不會載入。

然而，這在開發階段可以這樣做比較好，但是線上上環境可能要加URL引數比較麻煩。於是我想到了在頁面中點選某個元素10次再載入Eruda，點選10次或者更多次，然後在sessionStorage中寫入eruda=true，然後重新整理當前頁。相反，再點選10次關閉Eruda。用這樣比較隱藏的方式開啟或關閉Eruda，這樣線上環境也可以自由開啟或關閉Eruda了。

例子：假如有這樣的一個頁面，裡有一個標題文字

<h2>——規則詳情——</h2>
<div>
.....
</div>複製程式碼

那麼我們可以在h2標籤上繫結一個click事件，加入方法名叫showEruda

<h2 onclick="showEruda">——規則詳情——</h2>
<div>
.....
</div>

<script>
var count = 0;
function showEruda () {
    if (count >= 10) {    
        var erdua = sessionStorage.getItem('erdua');
        if (!erdua || erdua === 'false'){
            sessionStorage.setItem('eruda', 'true')
        } else {
            sessionStorage.setItem('eruda', 'false')
        }
        location.reload()
    }
    count++
}
</script>複製程式碼

這樣點選規則詳情10次就可以喚起Eruda了，再點選10次就關閉Eruda，反正我覺得這樣挺好的。

不知道大家都是怎麼用的呢？

聽說寫文章可以得非同步社群的書，非同步社群是由人郵技術分社創辦的一個集圖書購買、生產優質內容、作譯者服務、自出版為一體的綜合性服務平臺，是國內頂尖的IT專業圖書社群。它的書我非常想要，所以我竭力用心寫了這篇文章，我想要這本書(《Python程式設計快速上手——讓繁瑣工作自動化》，大家如果覺得好給我點個贊吧

Python程式設計快速上手——讓繁瑣工作自動化
Python程式設計快速上手——讓繁瑣工作自動化

相關文章