Web移動端調試利器eruda的使用

在平常的移動端開發時，通常都是試用chrome瀏覽器的移動端模式進行開發和調試，只有在chrome調試完成，沒有問題了纔會上到真機測試，移動端開發的一大問題就在於此，每次當咱們覺得改好的時候，就須要打一次包放在手機上，若是不知足條件，又須要再次打包，如此反覆，直到調整好爲止，這樣既費時，又讓咱們前端人員苦惱。那麼有沒有一款相似於chrome調試工具的東西呢，答案顯然是有的，這裏我像你們推薦一款名爲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面板：捕獲請求，查看發送數據、返回頭、返回內容等信息。

5. Resources面板：查看並清除localStorage、sessionStorage及cookie；查看頁面加載腳本及樣式文件；查看頁面加載圖片。

6. Sources面板：查看頁面源碼；格式化html，css，js代碼及json數據。

7. Info面板：輸出URL及User Agent；支持自定義輸出內容。

8. Snippets面板：頁面元素添加邊框；加時間戳刷新頁面；支持自定義代碼片斷。

快速上手

　　經過cdn來使用　　

　　　　<script src="//cdn.bootcss.com/eruda/1.5.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文件對於移動端略大（壓縮以後還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默認爲容器，而且將該div至於html根節點下面。
• tool: 須要加載的插件的面板參數，默認則所有加載。// value是數組類型

　　實例：　　　　

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

　　　　eruda.init({

　　　　　　container: el,
　　　　　　tool: ['console', 'elements'],
　　　　　　useShadowDom: true
　　　　});

　　
　　那麼假如你如今就想已經躍躍欲試，能夠在某個頁面的控制檯輸入下面的代碼。

　　　　(function () {

　　　　　　var script = document.createElement('script');

　　　　　　 script.src="//cdn.jsdelivr.net/npm/eruda";

　　　　　　document.body.appendChild(script);

　　　　　　script.onload = function () { eruda.init() }

　　　　})();　　　　

　　至此，eruda的基本介紹和使用就到這裏結束了，更復雜的還請你們去eruda官網細細品味，謝謝你們~

原文出處：https://www.cnblogs.com/love769111984/p/10194394.html