web移動端調試工具Eruda

Eruda github位址:  https://github.com/liriliri/eruda/blob/master/doc/README_CN.md

Eruda 是一個專為手機網頁前端設計的調試面闆，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀态、顯示性能名額、捕獲XHR請求、顯示本地存儲和 Cookie 資訊、浏覽器特性檢測等等。

1. 按鈕拖拽，面闆透明度大小設定。
2. Console面闆：捕獲Console日志，支援log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支援占位符，包括%c自定義樣式輸出；支援按日志類型及正規表達式過濾；支援快捷指令加載underscore、jQuery庫；支援JavaScript腳本執行。
3. Elements面闆：檢視标簽内容及屬性；檢視應用在Dom上的樣式；支援頁面元素高亮；支援螢幕直接點選選取；檢視Dom上綁定的各類事件。
4. Network面闆：圖表顯示頁面加載速度；檢視頁面各資源請求時間（Android）；捕獲XHR請求，檢視發送資料、傳回頭、傳回内容等資訊。
5. Resources面闆：檢視并清除localStorage、sessionStorage及cookie；檢視頁面加載腳本及樣式檔案；檢視頁面加載圖檔。
6. Sources面闆：檢視頁面源碼；格式化html，css，js代碼及json資料。
7. Info面闆：輸出URL及User Agent；支援自定義輸出内容。
8. Snippets面闆：頁面元素添加邊框；加時間戳重新整理頁面；支援自定義代碼片段。
9. Features面闆：浏覽器常用特性檢測；提供Can I use，Html5Test快捷通路。

快速上手

通過CDN使用：

<script src="//cdn.bootcss.com/eruda/1.3.0/eruda.min.js"></script>
<script>eruda.init();</script>      

通過npm安裝：

npm install eruda --save      

在頁面中加載腳本：

<script src="node_modules/eruda/eruda.min.js"></script>
<script>eruda.init();</script>