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

xzavier 發布于2019-08-21 17:19 / 2247人閱讀

摘要：做移動端開發的一大痛點就是，在真機運行下無法查看日志和其他信息如網絡請求顯示本地存儲等信息。是一個專為手機網頁前端設計的調試面板，類似的迷你版，其主要功能包括捕獲日志檢查元素狀態顯示性能指標捕獲請求顯示本地存儲和信息瀏覽器特性檢測等等。

做移動端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 () {
    var src = "http://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();里面可以傳入要初始化哪些面板，默認加載所有。

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

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

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

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

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

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

——規則詳情——

.....

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

——規則詳情——

.....

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

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

云服務器 GPU云服務器調試技巧 javascript調試技巧小技巧小技巧全集

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/89385.html

Eruda 一個可能被人遺忘的調試神器

摘要：引言日常工作中再牛逼的大佬都不敢說自己的代碼是完全沒有問題的，既然有問題，那就也就有調試，說到調試工具，大家可能對于還有遠程調試等比較熟悉，甚至有些是我可能也沒有用過的這里噴一句吧，誰都別給我提啊，那個不叫調試工具，那叫坑爹神器，話說最近不 showImg(https://segmentfault.com/img/bVbk8zn?w=1008&h=298); 引言 ?　　日常工作中再牛...

mingzhong 2019-08-23 14:15 評論0 收藏0
android移動端調試—前端開發工具Eruda

摘要：通過使用通過安裝文件對于移動端來說略重后大概。建議通過參數來控制是否加載調試器，比如初始化時可以傳入配置用于插件初始化的元素，如果不設置，默認創建作為容器直接置于根結點下面指定要初始化哪些面板，默認加載所有示例 Eruda 通過CDN使用： ?eruda.init(); 通過npm安裝： n...

jeyhan 2021-09-09 09:32 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

xiaokai 2019-08-01 18:21 評論0 收藏0
HTML-CSS

摘要：但是，從字體上來說雪碧圖制作，使用以及相關，圖文。由于采用了編譯，所以能夠保證在瀏覽器不支持標準布局的情況下，回滾到舊版本的，保證移動設備中能呈現出一樣的布局效果。我不想陷入和的紛爭，但是有一件事是確定的極大的提升了移動端一勞永逸的搞定 flex 布局尋根溯源話布局一切都始于這樣一個問題：怎樣通過 CSS 簡單而優雅的實現水平、垂直同時居中。記得剛開始學習 CSS 的時候，看到 ...

CHENGKANG 2019-08-29 14:11 評論0 收藏0
前端資源系列（4）-前端學習資源分享&前端面試資源匯總

摘要：特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。特意對前端學習資源做一個匯總，方便自己學習查閱參考，和好友們共同進步。本以為自己收藏的站點多，可以很快搞定，沒想到一入匯總深似海。還有很多不足&遺漏的地方，歡迎補充。有錯誤的地方，還請斧正... 托管: welcome to git，歡迎交流，感謝star 有好友反應和斧正，會及時更新，平時業務工作時也會不定期更...

princekin 2019-08-20 11:28 評論0 收藏0