移動端調試神器（eruda）

以前提到的vconsole調試工具，最近又發現一個更牛逼的eruda，vconsole相比之下就有點弱了。

eruda 是一個專爲手機網頁前端設計的調試面板，其主要功能包括：捕獲 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.4.2/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>
複製代碼

Js文件對於移動端來講略重（gzip後大概100kb）。建議經過url參數來控制是否加載調試器，好比：

;(function () {
    var src = 'node_modules/eruda/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>');
})();
複製代碼

初始化時能夠傳入配置：

• container: 用於插件初始化的Dom元素，若是不設置，默認建立div做爲容器直接置於html根結點下面。
• tool：指定要初始化哪些面板，默認加載全部。

let el = document.createElement('div');
document.body.appendChild(el);

eruda.init({
    container: el,
    tool: ['console', 'elements'],
    useShadowDom: true
});
複製代碼