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

成都創(chuàng)新互聯(lián)公司長(zhǎng)期為近千家客戶(hù)提供的網(wǎng)站建設(shè)服務(wù)，團(tuán)隊(duì)從業(yè)經(jīng)驗(yàn)10年，關(guān)注不同地域、不同群體，并針對(duì)不同對(duì)象提供差異化的產(chǎn)品和服務(wù)；打造開(kāi)放共贏平臺(tái)，與合作伙伴共同營(yíng)造健康的互聯(lián)網(wǎng)生態(tài)環(huán)境。為準(zhǔn)格爾企業(yè)提供專(zhuān)業(yè)的做網(wǎng)站、網(wǎng)站建設(shè)，準(zhǔn)格爾網(wǎng)站改版等技術(shù)服務(wù)。擁有十年豐富建站經(jīng)驗(yàn)和眾多成功案例,為您定制開(kāi)發(fā)。

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

Eruda 是一個(gè)專(zhuān)為手機(jī)網(wǎng)頁(yè)前端設(shè)計(jì)的調(diào)試面板，類(lèi)似 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

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

1）通過(guò)cdn使用：

直接在html頁(yè)面中引入Eruda的JS文件

2）通過(guò)npm安裝：

npm install eruda --save

在頁(yè)面中加載腳本：

我一般使用第一種方式（比較懶，呵呵）。初始化Eruda之后在html界面上會(huì)出現(xiàn)一個(gè)半透明的齒輪按鈕，點(diǎn)擊一下就會(huì)彈出Eruda的面板，再點(diǎn)擊一下就會(huì)收起來(lái)，如下圖所示。

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

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

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

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

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

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

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

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

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

配置面板的代碼如下：

想要什么樣的面板只要在tool的數(shù)組中加上對(duì)應(yīng)的面板名稱(chē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)注創(chuàng)新互聯(lián)網(wǎng)站，小編會(huì)繼續(xù)努力為大家?guī)?lái)更多實(shí)用的文章！