前言
進行移動端網頁開發時，想要查看手機瀏覽器信息從來都不是一件容易的事。特別是當目標環境為APP內置WebView，需要調用特定的JsBridge接口時，你根本都干不了什么，只能一遍又一遍地修改代碼，重新打開頁面並alert一下。你可能會說，可以使用Chrome，Firefox連接手機調試啊！但那樣限定於使用相應的手機版瀏覽器，意義並不大。Weinre，Vorlonjs跟debugGap等工具實際上也並不好用，初始化過於繁瑣，而且僅能調調樣式，打打log，斷點調試什么的也沒有辦法支持。每次測試出現問題，基本上只能屁顛屁顛地跑過去拿手機過來連接自己的本地環境改代碼查bug。每當這時候我便會想，如果手機上也能有個跟PC端瀏覽器一樣的DevTools就好了，那樣的話我就不用再在每個頁面前面都寫上一句`window.onerror = function (msg) { alert(msg) }`了（內心：真是個2B的做法）。
https://github.com/liriliri/eruda
示例
請在手機上打開鏈接： http://liriliri.github.io/eruda/index.html?eruda=true
安裝
你可以通過npm來下載使用該工具：
npm install eruda --save
然后在頁面中引入以下腳本：
(function () {
var src = 'node_modules/eruda/dist/eruda.min.js'; if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return; document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>'); })();
可以看到只有當url上帶有eruda=true或本地存儲active-eruda為true的時候，工具才會被加載並執行。其中設置面板有選項可以設置active-eruda使工具常駐，不用每次都在url上添加eruda=true。
注：該插件的文件gzip后大小約有50+kb，相比於項目頁均js腳本量幾kb來說還是太大，並不適合在現網環境加載影響頁面載入速度。
功能面板介紹
Console面板
該面板會替換console對象中的log，error，info，warn，dir，time，timeEnd方法以不同的樣式顯示出來，同時默認會通過onerror捕獲全局錯誤（可以在設置面板關閉），打出錯誤信息及其堆棧。當然，日志的清除與過濾也是支持的，還可以直接在該面板輸入js腳本並在全局作用域下執行。該面板還內置了一些快捷指令來快速執行一些有用的功能，比如在頁面載入jQuery或underscore，使用正則表達式過濾log等。
Elements面板
查看Dom狀態對於調試工具自然是一個必不可少的功能。通過該工具，你無需連接PC端調試工具就能輕松查看DOM節點上的各個屬性值，內容，應用的CSS樣式。被查看的元素也會在頁面上高亮，能夠使你快速知曉DOM元素的margin，padding。
注：感謝weinre項目，扒了一點代碼:)
Network面板
Network面板通過performance接口以圖表的形式展示頁面的加載速度。計划在resource timing api得到廣泛應用時再加入各個資源的加載情況，不過目前它僅僅只能得到頁面的加載速度。
Resources面板
該面板主要用來展示localStorage，cookie，頁面腳本，樣式，圖片等資源，同時能夠對其執行一些簡單的操作，如清除指定的localStorage條目。
Info面板
很多時候會需要查看復制瀏覽器上的指定信息，比如通過JsBridge獲取到的用戶Id，用於后台數據查錯。又比如，測試碰到某些頁面錯誤時，我們首先做的一件事經常是：把鏈接發給我看看，然而APP里並沒有復制鏈接的選項:( 還有，一個頁面在不同環境下需要有不同的表現，項目H5頁面經常需要在不同APP里有不同表現以及調用不同jsApi。靠什么來區分？UA。然而有時候對某個版本UA檢測不准確就會造成頁面出BUG，這時候如果有個方便的方法能夠快速查看到出錯者的瀏覽器UA就太好了。
綜上，Info面板默認會展示出url和user-agent兩條信息，你也可以通過調用它的接口輸出其它指定信息。
Snippets面板
Console面板可以執行js腳本，但在手機上輸入代碼體驗實在不怎么樣。利用該面板你可以添加一些方法以便於快速和多次觸發它。Sinppets默認加入了兩個腳本，為頁面所有元素加border查看排版結構以及重刷頁面。
Features面板
嗯，之前碰到過BUG，結果發現是APP的WebView沒開啟對localStorage的支持，所以有了該面板。它會檢測一些常用的功能是否被瀏覽器所支持，不支持的話將以紅色高亮進行顯示。
自定義插件
Eruda本質上只是一個可拖拽的入口按鈕加一個Tab組件，其中的每個面板都是一個獨立的插件。所以，事實上你可以自行添加各種自定義的信息展示面板，具體可參考這個 頁面FPS展示插件 。這是一個很有用的特性，因為通用組件很難做到適應於各類需求，有很多時候你會想要去擴展它。比如，項目用於移動端測試環境切換的工具會在每個頁面嵌入該插件用於不同環境的切換，同時顯示ID便於查找單次請求所對應的完整HTTP記錄，它長下面這個樣子：
