小技巧|移動端網頁調試神器Eruda使用技巧

本文首發於個人博客：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的基本使用方法推薦使用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編程快速上手——讓繁瑣工做自動化