引言

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

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

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

這裡是IT平頭哥聯盟，我是首席填坑官—蘇南,用心分享 做有溫度的攻城獅。

Eruda是什麼？

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

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

　　但是前面都講了，只是模擬

如何使用？

• 它支援npm方式的，這個是不是很開心？？
• 外鏈，沒錯，就是外鏈的形式引入，對於它，我覺得npm的方式沒有什麼太大意義，直接以外鏈的引入更方便，也能減少專案資源包的大小，更便於控制是否要載入這個資源。

方式一，預設引入：
<script src="//cdn.jsdelivr.net/npm/eruda"></script>
<script>eruda.init();</script>

方式二，動態載入：

__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('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

方式四 ，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/

如覺得不錯，請記得隨手轉發，並關注（IT平頭哥聯盟）支援我們哦～

其他

• vue\react\java/面試題等資源共享
• 團隊解散，我們該何去何從？
• 月入三萬 還能少了你一個雞蛋
• 如何給localStorage設定一個有效期？

作者：蘇南 - 首席填坑官

連結：https://blog.csdn.net/weixin_43254766

交流群：912594095[資源獲取/交流群]、公眾號：honeyBadger8

本文原創，著作權歸作者所有。商業轉載請聯絡IT平頭哥聯盟獲得授權，非商業轉載請註明原連結及出處。