web移動端調試神器Eruda怎么用

這篇文章主要介紹“web移動端調試神器Eruda怎么用”，在日常操作中，相信很多人在web移動端調試神器Eruda怎么用問題上存在疑惑，小編查閱了各式資料，整理出簡單好用的操作方法，希望對大家解答”web移動端調試神器Eruda怎么用”的疑惑有所幫助！接下來，請跟著小編一起來學習吧！

在Web開發過程中，對html頁面進行開發和調試的時候都會用到瀏覽器提供的調試工具，小編我最常用的就是Chrome瀏覽器自帶的開發者工具了，可以很方便的對JS代碼進行斷點調試，log也很方便。但是在移動端的瀏覽器上進行開發就沒有這么方便了，不管是iOS的Safari還是Android的眾多瀏覽器。在這里小編推薦一個移動端的調試神器Eruda。

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

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

廢話不多說，我們直接上代碼介紹Eruda的用法。使用Eruda有兩種方法。

1）通過CDN使用：

直接在html頁面中引入Eruda的JS文件

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

2）通過npm安裝：

npm install eruda --save

在頁面中加載腳本：

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

我一般使用第一種方式（比較懶，呵呵）。初始化Eruda之后在html界面上會出現一個半透明的齒輪按鈕，點擊一下就會彈出Eruda的面板，再點擊一下就會收起來，如下圖所示。

直接使用不帶任何參數的初始化方法init()會加載Eruda提供的全部面板，如果只需要部分面板需要在init()中帶上配置參數。這里先介紹一下Eruda提供了哪些面板。

Console面板：捕獲Console日志，支持log、error、info、warn、dir、time/timeEnd、clear、count、assert、table；支持占位符，包括%c自定義樣式輸出；支持按日志類型及正則表達式過濾；支持快捷命令加載underscore、jQuery庫；支持JavaScript腳本執行。

Elements面板：查看標簽內容及屬性；查看應用在Dom上的樣式；支持頁面元素高亮；支持屏幕直接點擊選取；查看Dom上綁定的各類事件。

Network面板：圖表顯示頁面加載速度；查看頁面各資源請求時間（Android）；捕獲XHR請求，查看發送數據、返回頭、返回內容等信息。

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

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

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

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

Features面板：瀏覽器常用特性檢測；提供Can I use，Html5Test快捷訪問。

配置面板的代碼如下：

<script>
 eruda.init({
 tool: ['console', 'elements']
 });
 </script>

想要什么樣的面板只要在tool的數組中加上對應的面板名稱就行了。

到此，關于“web移動端調試神器Eruda怎么用”的學習就結束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學習，快去試試吧！若想繼續學習更多相關知識，請繼續關注億速云網站，小編會繼續努力為大家帶來更多實用的文章！