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

引言

平常工做中再牛逼的大佬都不敢說本身的代碼是徹底沒有問題的，既然有問題，那就也就有調試，說到調試工具，你們可能對於 fiddler、Charles、chrome devtools、Firebug、還有Safari遠程調試等比較熟悉，甚至有些是我可能也沒有用過的；css

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

俗話說：「預先善其事必先利其器」，今天想給你們分享的是一個可能被人們忽略的小工具，爲何說被人們忽略呢？由於發現github上它才4.6k Star、457 Fork、Watch 173次，也就是說千萬開發者中知道它的人可能不超過5w，因而決定分享一波，此文重在引導，但願能幫你們開發中帶來一點點便利、效率的提高：前端

在平常的移動端開發時，通常都是試用chrome瀏覽器的移動端模式進行開發和調試，只有在chrome調試完成，沒有問題了纔會上到真機測試，移動端,寶劍鋒從磨礪出，梅花香自苦寒來，作有溫度的攻城獅!，公衆號：honeyBadger8

github 數據

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

Eruda是什麼？

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

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

可是前面都講了，只是模擬、模擬，當下手機品牌可算是千千萬，手機中各類類瀏覽器，甚至APP都有本身不同的特點腰間盤突出，有的還特別突出，有病咱們得給它治啊，否則測試、產品、需求、領導都不會放過咱們，好比下圖場景。chrome

作移動端Web開發的一大痛點就是，在真機運行下沒法查看console.log日誌和其餘信息如網絡請求、顯示本地存儲等信息。若是網頁是運行在,首席填坑官∙蘇南的專欄交流：91259409五、公衆號：honeyBadger8

項目上線場景圖

如何使用？

它支持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(); });//蘇南的專欄 交流：91259409五、公衆號：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不小了，用形容妹子的話來講就是：豐滿，直接說它胖，你就死定了；
這裏的小而美是指小巧功能也強大，界面也好看;
說了這麼多來看看它到底長啥樣吧：

作移動端Web開發的一大痛點就是，在真機運行下沒法查看console.log日誌和其餘信息如網絡請求、顯示本地存儲等信息。若是網頁是運行在手機瀏覽器中還算好，能夠把網址在電腦上打開查看console信息，可是若是是作APP的內嵌H5頁面，那就只能靠開發階段在瀏覽器模擬環境中儘可能沒有Bug,公衆號：honeyBadger8

小而美不叫胖那叫豐滿

功能清單

console

console 的做用就不用廢話了，你們都懂；
早期在console誕生以前，咱們的調試功能都是alert過多，包括如今的移動端，在手機上咱們想看到參數值、數據、節點等都以alert打印爲多數，但過於粗暴、並且一不當心有可能帶到線上去了；
eruda 能幫咱們解決這個問題；全部的日誌、錯誤都能幫咱們捕獲到
甚至咱們還能像chrome,直接在控制檯執行js代碼；

console 演示

Elements

eruda 它沒有在PC端這麼直觀，但也由於在移動端展現的方式侷限性，
它能把每個父節點下的每個子節點所有列出來；你點擊某個子節點時，列出當前節點所有的屬性、樣式、盒子模型等；
查看標籤內容及屬性；查看Dom上的樣式；支持頁面元素高亮；支持屏幕直接點擊選取；查看Dom上綁定的各種事件。
甚至也能使用Plugins 插件，作到跟PC端同樣，造成 dom tree；

PC、Mobile調試節點對比

Network

如今的項目大多都是先後端分享的形式了，前端處理的業務愈來愈多、各類請求資源等；
乾的越多承擔責任也越多、鍋也越多，又大又平的那種哦～
因此 Network 的必要性不言而喻，它能捕獲請求，查看發送數據、返回頭、返回內容等信息，它對於咱們平時先後端聯調出現的問題定位是有很大幫助的，好比：後端說你請求參數少了，前端你看了代碼邏輯沒有問題，但在手機上就是調不通，Network 能很直接明瞭的看到你請求帶了什麼。

vConsole即是這樣一款很棒的移動端DevTools工具，由大廠企鵝出品。但本文把他定位爲男二號，今天的主角男一號是：Eruda！vConsole的同類。,PC、eruda 數據請求對比

媽媽不再用擔憂個人數據問題

Resources

它跟 Chrome Devtools 裏的 Application + Source,二者的結合體；
Resources 它能查看 Cookie、localStorage、sessionStorage等信息，而且還能執行清除操做（Application）；
它還查看當前頁面加載腳本及樣式文件；查看頁面加載過的圖片等資源（Source）；
好吧，感受說的再多，也不如上圖直接：Application + Source 結合體

Sources/Info

Sources：查看頁面源碼；格式化html，css，js代碼及json數據。
Info：主要輸出URL信息及User Agent；及其餘的一些手機系統信息，同時也支持自定義輸出內容哦。

一般寫前端頁面都在Chrome瀏覽器的開發模式下進行調試，可是寫放在移動端的H5頁面時，有時候會遇到在Chrome上調試沒有問題，可是在手機的瀏覽器上有問題的狀況；也有的頁面是須要放在微信公衆號中的，調用了微信JSSDK的方法，必須得經過手機上的微信內置瀏覽器才能使用，這個時候若是遇到了報錯，只可以經過alert一步一步地定位問題。今天發現了一個好用的能夠在手機瀏覽器上直接定位問題的插件：eruda.js,Resources 功能分析

源代碼設備等信息

高階用法

以上剛纔介紹的是它的一些基本的功能，也是我本身在工做中用的較多的；
最近發現新版本功能要強大很多，以前一直用的1.0.5，好像是沒有插件這一項的；
大概看了一下，都蠻強大，包括上面的Dom tree,插件這部分並無都實際應用過，因此也就不打腫臉充胖子了，有興趣的同窗能夠本身看看。
若是以爲已經的插件都知足不了你的需求，它還支持自定義插件本身編寫。

高級用法

結尾：

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

線上問題咱們通常的作法是喜歡給某個不起眼的元素，添加一個點擊事件，要點它十次、八次之後纔開啓 debug 模式；json

上面二維碼確實是真實的官方Demo，不用擔憂有套路,也有連接：eruda.liriliri.io/ 後端

Github 地址:github.com/liriliri/er…