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

mingzhong 發布于2019-08-23 14:15 / 2553人閱讀

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

引言

?　　日常工作中再牛逼的大佬都不敢說自己的代碼是完全沒有問題的，既然有問題，那就也就有調試，說到調試工具，大家可能對于fiddler、Charles、chrome devtools、Firebug、還有Safari遠程調試等比較熟悉，甚至有些是我可能也沒有用過的；

　　這里噴一句吧，誰都別給我提IE啊，IE那個不叫調試工具，那叫坑爹神器，話說最近不是又甩鍋了，把自己的革命老根據地都甩了。

　　俗話說預先善其事必先利其器，今天想給大家分享的是一個可能被人們忽略的小工具，為什么說被人們忽略呢？因為發現github上它才4.6k Star、457 Fork、Watch 173次，也就是說千萬開發者中知道它的人可能不超過5w，于是決定分享一波，此文重在引導，希望能幫大家開發中帶來一點點便利、效率的提升：

這里是IT平頭哥聯盟，我是首席填坑官—蘇南,用心分享 做有溫度的攻城獅。
公眾號：honeyBadger8，群：912594095。

Eruda是什么？

　　Eruda是什么？Eruda 是一個專為前端移動端、移動端設計的調試面板，類似Chrome DevTools 的迷你版（沒有chrome強大這個是可以肯定的），其主要功能包括：捕獲 console 日志、檢查元素狀態、顯示性能指標、捕獲XHR請求、顯示本地存儲和 Cookie 信息、瀏覽器特性檢測等等。

　　雖說日常的移動端開發時，一般都是在用Chrome DevTools瀏覽器的移動端模式模擬各種手機型號來進行開發和調試，確保功能/頁面展示等都沒有問題了，才會提交測試；

　　但是前面都講了，只是模擬、模擬，當下手機品牌可算是千千萬，手機中各種類瀏覽器，甚至APP都有自己不一樣的特色 腰間盤突出，有的還特別突出，有病我們得給它治啊，不然測試、產品、需求、領導都不會放過我們，比如下圖場景。

如何使用？

它支持npm方式的，這個是不是很開心？？

外鏈，沒錯，就是外鏈的形式引入，對于它，我覺得npm的方式沒有什么太大意義，直接以外鏈的引入更方便，也能減少項目資源包的大小，更便于控制是否要加載這個資源。

方式一，默認引入：



方式二，動態加載：

__DEBUG__ && loadJS("http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js", ()=>{
  eruda.init();
});//蘇南的專欄 交流：912594095、公眾號：honeyBadger8

方式三 ，指定場景加載：
//比如線上 給自己留一個后門，
//我們一般的做法是喜歡給某個不起眼的元素，添加一個點擊事件，要點它十次、八次以后才開啟 debug 模式；
;(function () {
    var src = "http://cdn.jsdelivr.net/eruda/1.0.5/eruda.min.js";
    if (!/eruda=true/.test(window.location) && localStorage.getItem("active-eruda") != "true") return;
    document.write("");
    document.write("eruda.init();");
})();

方式四 ，npm：
 npm install eruda --save

…… 加載的方式很多

小而美

這里小，不是指它的包小啊，知道它的同學都知道，其實它的包并不小（約100kb gzip）；

100kb不小了，用形容妹子的話來說就是：豐滿，直接說它胖，你就死定了；

這里的小而美是指小巧功能也強大，界面也好看;

說了這么多來看看它到底長啥樣吧：

功能清單 console

console 的作用就不用廢話了，大家都懂；

早期在console誕生之前，我們的調試功能都是alert過多，包括現在的移動端，在手機上我們想看到參數值、數據、節點等都以alert打印為多數，但過于粗暴、而且一不小心有可能帶到線上去了；

eruda 能幫我們解決這個問題；所有的日志、錯誤都能幫我們捕獲到

甚至我們還能像chrome,直接在控制臺執行js代碼；

Elements

eruda 它沒有在PC端這么直觀，但也因為在移動端展示的方式局限性，

它能把每一個父節點下的每一個子節點全部列出來；你點擊某個子節點時，列出當前節點全部的屬性、樣式、盒子模型等；

查看標簽內容及屬性；查看Dom上的樣式；支持頁面元素高亮；支持屏幕直接點擊選取；查看Dom上綁定的各類事件。

甚至也能使用Plugins 插件，做到跟PC端一樣，形成 dom tree；

Network

現在的項目大多都是前后端分享的形式了，前端處理的業務越來越多、各種請求資源等；

干的越多承擔責任也越多、鍋也越多，又大又平的那種哦～

所以 Network 的必要性不言而喻，它能捕獲請求，查看發送數據、返回頭、返回內容等信息，它對于我們平時前后端聯調出現的問題定位是有很大幫助的，比如：后端說你請求參數少了，前端你看了代碼邏輯沒有問題，但在手機上就是調不通，Network 能很直接明了的看到你請求帶了什么。

Resources

它跟 Chrome Devtools 里的 Application + Source,兩者的結合體；

Resources 它能查看 Cookie、localStorage、sessionStorage等信息，并且還能執行清除操作（Application）；

它還查看當前頁面加載腳本及樣式文件；查看頁面加載過的圖片等資源（Source）；

好吧，感覺說的再多，也不如上圖直接：

Sources/Info

Sources：查看頁面源碼；格式化html，css，js代碼及json數據。

Info：主要輸出URL信息及User Agent；及其他的一些手機系統信息，同時也支持自定義輸出內容哦。

高階用法

以上剛才介紹的是它的一些基本的功能，也是我自己在工作中用的較多的；

最近發現新版本功能要強大不少，之前一直用的1.0.5，好像是沒有插件這一項的；

大概看了一下，都蠻強大，包括上面的Dom tree,插件這部分并沒有都實際應用過，所以也就不打腫臉充胖子了，有興趣的同學可以自己看看。

如果覺得已經的插件都滿足不了你的需求，它還支持自定義插件自己編寫。

結尾：

　　以上就是今天給大家帶來的分享，工作中用了蠻久，挺方便的，對于定位移動端的疑難雜癥問題、甚至留下后門定位線上問題都有很大幫助，如文中有理解不到位之處，歡迎留言指出。

　　線上問題我們一般的做法是喜歡給某個不起眼的元素，添加一個點擊事件，要點它十次、八次以后才開啟 debug 模式；

　　上面二維碼確實是真實的官方Demo，不用擔心有套路,也有鏈接：https://eruda.liriliri.io/
Github 地址:https://github.com/liriliri/eruda

其他

vue/react/java/大廠面試題等資源免費獲取

大家好這就是2018年的我～

月入三萬還能少了你一個雞蛋

如何給localStorage設置一個有效期？

作者：蘇南 - 首席填坑官
鏈接：http://susouth.com/
交流：912594095、公眾號：honeyBadger8
本文原創，著作權歸作者所有。商業轉載請聯系@IT·平頭哥聯盟獲得授權，非商業轉載請注明原鏈接及出處。

GPU云服務器云服務器說起分布式存儲大家可能都會覺得這是一個 Eruda 被遺忘云主機可能出現的問題

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

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

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

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

xzavier 2019-08-21 17:19 評論0 收藏0
2019個稅，我們每年能省多少錢～

摘要：注意每月元，扣除期限最長不超過個月，扣除人夫妻雙方約定，可由其中一方扣除，確定后，一個納稅年度內不得更改。注意醫保目錄范圍內的醫藥費用支出，醫保報銷后的個人自付部分累計超過元的部分，且不超過元的部分。 showImg(https://segmentfault.com/img/bVblMkk?w=652&h=298); 　　看大家這些天都在群里討論，2019年1月1日起個稅免征額調整政策...

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

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

jeyhan 2021-09-09 09:32 評論0 收藏0
互聯網"凜冬"，看大廠HR怎么說~

摘要：寫在前面的話最近互聯網朋友圈充斥著一股恐慌的氣息。本人作為一名，萬不敢稱資深，只是呆過幾年大型央企和大型互聯網企業，聊有一點自己的看法罷了。如果不放心，以一周為期，對展示在面前的機會進行初步分級。也可以略高于期望，以此探一探對方的反應。 showImg(https://segmentfault.com/img/bVblxeY?w=1008&h=298); 寫在前面的話　　最近互聯網朋...

renweihub 2019-08-23 14:26 評論0 收藏0
扯一下似乎被遺忘的盒模型

摘要：不過想想，現在都讓微軟給退下了，還有多少呢。接著就是要提到的一點，盒模型的計算方式，標準方式和模式是不同的，不知道又想知道的同學請問谷哥或者度娘吧，記得幾年前我那本破書上也又提到，還做了一些測試。扯遠了，盒模型大概的情況就是這樣。前段時間為了組里在擴充人員，在面試的過程中有過幾次扯到盒模型這個東西。對于盒模型以前是經常提到，現在被CSS3的風頭給蓋下去了，已經沒多少人去講盒模型，也導...

Barry_Ng 2019-08-28 17:51 評論0 收藏0