移動端網頁調試神器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 () {n var src = //cdn.bootcss.com/eruda/1.2.4/eruda.min.js;n if (!/eruda=true/.test(window.location) && localStorage.getItem(active-eruda) !== true) return;n document.write(<scr + ipt src=" + src + "></scr + ipt>);n document.write(<scr + ipt>eruda.init();</scr + ipt>);n})();n

eruda.init();裡面可以傳入要初始化哪些面板，默認載入所有。

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

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

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

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

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

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

<h2>——規則詳情——</h2>n<div>n.....n</div>n

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

<h2 onclick="showEruda">——規則詳情——</h2>n<div>n.....n</div>nn<script>nvar count = 0;nfunction showEruda () {n if (count >= 10) { n var erdua = sessionStorage.getItem(erdua);n if (!erdua || erdua === false){n sessionStorage.setItem(eruda, true)n } else {n sessionStorage.setItem(eruda, false)n }n location.reload()n }n count++n}n</script>n

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

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