web移動(dòng)端調(diào)試神器Eruda怎么用

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

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

Eruda 是一個(gè)專為手機(jī)網(wǎng)頁前端設(shè)計(jì)的調(diào)試面板，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀態(tài)、顯示性能指標(biāo)、捕獲XHR請(qǐng)求、顯示本地存儲(chǔ)和 Cookie 信息、瀏覽器特性檢測(cè)等等。

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界面上會(huì)出現(xiàn)一個(gè)半透明的齒輪按鈕，點(diǎn)擊一下就會(huì)彈出Eruda的面板，再點(diǎn)擊一下就會(huì)收起來，如下圖所示。

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

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

Elements面板：查看標(biāo)簽內(nèi)容及屬性；查看應(yīng)用在Dom上的樣式；支持頁面元素高亮；支持屏幕直接點(diǎn)擊選??；查看Dom上綁定的各類事件。

Network面板：圖表顯示頁面加載速度；查看頁面各資源請(qǐng)求時(shí)間（Android）；捕獲XHR請(qǐng)求，查看發(fā)送數(shù)據(jù)、返回頭、返回內(nèi)容等信息。

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

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

Info面板：輸出URL及User Agent；支持自定義輸出內(nèi)容。

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

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

配置面板的代碼如下：

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

想要什么樣的面板只要在tool的數(shù)組中加上對(duì)應(yīng)的面板名稱就行了。

到此，關(guān)于“web移動(dòng)端調(diào)試神器Eruda怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí)，請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章！