【小技巧】移動端網頁調試神器Eruda的使用技巧

作移動端Web開發的一大痛點就是，在真機運行下沒法查看console.log日誌和其餘信息如網絡請求、顯示本地存儲等信息。若是網頁是運行在手機瀏覽器中還算好，能夠把網址在電腦上打開查看console信息，可是若是是作APP的內嵌H5頁面，那就只能靠開發階段在瀏覽器模擬環境中儘可能沒有Bug，可是，一旦H5上線後報錯那就比較麻煩了，並且還依賴APP環境才能跑的網頁，更加難以查找問題。若是讓移動端也擁有相似Chrome DevTools工具那豈不是很愉快麼？

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

Eruda是誰？

你們好，給你們介紹一下，這是個人.....。Eruda 是一個專爲手機網頁前端設計的調試面板，相似 DevTools 的迷你版，其主要功能包括：捕獲 console 日誌、檢查元素狀態、顯示性能指標、捕獲XHR請求、顯示本地存儲和 Cookie 信息、瀏覽器特性檢測等等。

GitHub地址爲：https://github.com/liriliri/eruda，顏值和技能都很棒的Erdua：

詳細介紹能夠戳這裏產看，我就不贅述了

使用技巧

這纔是本文重點。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，反正我以爲這樣挺好的。

不知道你們都是怎麼用的呢？

全文完。

---

關注公衆號，第一時間接收最新文章。若是對你有一點點幫助，能夠點喜歡點贊點收藏，還能夠小額打賞做者，以鼓勵做者寫出更多更好的文章。