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

[[206554]]

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

Erdua是誰(shuí)?

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

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

使用技巧

這才是本文重點(diǎn)。

Erdua的基本使用方法推薦使用CDN和可配置參數(shù)的形式，在頁(yè)面引入如下代碼：

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

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

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

;(function (){  
if (!/eruda=true/.test(window.location) || sessionStorage.getItem('eruda') != '0') return;  
var src = '//cdn.bootcss.com/eruda/1.2.4/eruda.min.js';  
document.write('  
document.write('  
})(); 

這段代碼的意思是如果URL中有參數(shù) eruda=true 或者sessionStorage中 eruda 的值大于0才加載Erdua。這樣的好處是，我們需要調(diào)試的時(shí)候可以在網(wǎng)頁(yè)URL后面加個(gè)參數(shù)即可，不需要調(diào)試的它不會(huì)加載。

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

例子：假如有這樣的一個(gè)頁(yè)面，里有一個(gè)標(biāo)題文字

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

那么我們可以在 h2 標(biāo)簽上綁定一個(gè) click 事件，加入方法名叫 showErdua

<h2onclick="showErdua">——規(guī)則詳情——</h2> 
<div> 
..... 
</div> 
 
<script> 
var count = 0; 
function showErdua(){ 
    if (count >= 10) {     
        var erdua = sessionStorage.getItem('erdua'); 
        if (!erdua || erdua === 'no'){ 
            sessionStorage.setItem('eruda', 'yes') 
        } else { 
            sessionStorage.setItem('eruda', 'no') 
        } 
        location.reload() 
    } 
    count++ 
} 
</script> 

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

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