移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的介紹與使用技巧

更新時間：2017年10月30日 09:48:20 作者：dunizb

在日常的移動端開發(fā)時，一般都是試用chrome瀏覽器的移動端模式進行開發(fā)和調(diào)試，只有在chrome調(diào)試完成，而最近發(fā)現(xiàn)了一個新的調(diào)試方法，所以這篇文章主要給大家介紹了關(guān)于移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda的基本資料，以及其使用的一些技巧，需要的朋友可以參考下。

前言

眾所周知，我們在做移動端Web開發(fā)的一大痛點就是，在真機運行下無法查看console.log日志和其他信息如網(wǎng)絡請求、顯示本地存儲等信息。如果網(wǎng)頁是運行在手機瀏覽器中還算好，可以把網(wǎng)址在電腦上打開查看console信息，但是如果是做APP的內(nèi)嵌H5頁面，那就只能靠開發(fā)階段在瀏覽器模擬環(huán)境中盡量沒有Bug，但是，一旦H5上線后報錯那就比較麻煩了，而且還依賴APP環(huán)境才能跑的網(wǎng)頁，更加難以查找問題。如果讓移動端也擁有類似Chrome DevTools工具那豈不是很愉快么？

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

Eruda是誰？

大家好，給大家介紹一下，這是我的.....。Eruda 是一個專為手機網(wǎng)頁前端設計的調(diào)試面板，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀態(tài)、顯示性能指標、捕獲XHR請求、顯示本地存儲和 Cookie 信息、瀏覽器特性檢測等等。

GitHub地址為：https://github.com/liriliri/eruda （本地下載），顏值和技能都很棒的Erdua：

詳細介紹可以戳這里產(chǎn)看，我就不贅述了

使用技巧

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

;(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();里面可以傳入要初始化哪些面板，默認加載所有。

這樣使用方式?jīng)]有錯，但是如果Eruda要跟著發(fā)布到線上的話，那我們要刪除這段代碼？因為這樣會不管你需不需要調(diào)試Eruda都會立即加載，在頁面出現(xiàn)Eruda的圖標。我的目標是，Eruda可以保留在頁面里，無論什么環(huán)境，只要我們想呼喚它出現(xiàn)的時候它才出現(xiàn)，不需要它的時候它只是一段不會生效的普通代碼。

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

;(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中有參數(shù)eruda=true或者sessionStorage中eruda的值為true才加載Eruda。這樣的好處是，我們需要調(diào)試的時候可以在網(wǎng)頁URL后面加個參數(shù)即可，不需要調(diào)試的它不會加載。

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

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

<h2>——規(guī)則詳情——</h2>
<div>
.....
</div>

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

<h2 onclick="showEruda">——規(guī)則詳情——</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>

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

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

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學習或者工作具有一定的參考學習價值，如果有疑問大家可以留言交流，謝謝大家對腳本之家的支持。