這篇文章將為大家詳細講解有關移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda怎么用，小編覺得挺實用的，因此分享給大家做個參考，希望大家閱讀完這篇文章后可以有所收獲。

成都創(chuàng)新互聯(lián)公司是一家專業(yè)提供平昌企業(yè)網(wǎng)站建設,專注與做網(wǎng)站、成都做網(wǎng)站、H5網(wǎng)站設計、小程序制作等業(yè)務。10年已為平昌眾多企業(yè)、政府機構等服務。創(chuàng)新互聯(lián)專業(yè)網(wǎng)站設計公司優(yōu)惠進行中。

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('');
 document.write('eruda.init();');
})();

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('');
 document.write('eruda.init();');
})();

這段代碼的意思是如果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次關閉Eruda。用這樣比較隱藏的方式開啟或關閉Eruda，這樣線上環(huán)境也可以自由開啟或關閉Eruda了。

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

——規(guī)則詳情——

.....

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

——規(guī)則詳情——

.....

關于“移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda怎么用”這篇文章就分享到這里了，希望以上內(nèi)容可以對大家有一定的幫助，使各位可以學到更多知識，如果覺得文章不錯，請把它分享出去讓更多的人看到。

另外有需要云服務器可以了解下創(chuàng)新互聯(lián)scvps.cn，海內(nèi)外云服務器15元起步，三天無理由+7*72小時售后在線，公司持有idc許可證，提供“云服務器、裸金屬服務器、高防服務器、香港服務器、美國服務器、虛擬主機、免備案服務器”等云主機租用服務以及企業(yè)上云的綜合解決方案，具有“安全穩(wěn)定、簡單易用、服務可用性高、性價比高”等特點與優(yōu)勢，專為企業(yè)上云打造定制，能夠滿足用戶豐富、多元化的應用場景需求。

網(wǎng)頁標題：移動端網(wǎng)頁開發(fā)調(diào)試神器Eruda怎么用-創(chuàng)新互聯(lián)
分享網(wǎng)址：http://weahome.cn/article/doehod.html