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

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

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

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

Eruda 是一個專為手機網(wǎng)頁前端設(shè)計的調(diào)試面板，類似 DevTools 的迷你版，其主要功能包括：捕獲 console 日志、檢查元素狀態(tài)、顯示性能指標(biāo)、捕獲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界面上會出現(xiàn)一個半透明的齒輪按鈕，點擊一下就會彈出Eruda的面板，再點擊一下就會收起來，如下圖所示。

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

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

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

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

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

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

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

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

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

配置面板的代碼如下：

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

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

到此，關(guān)于“web移動端調(diào)試神器Eruda怎么用”的學(xué)習(xí)就結(jié)束了，希望能夠解決大家的疑惑。理論與實踐的搭配能更好的幫助大家學(xué)習(xí)，快去試試吧！若想繼續(xù)學(xué)習(xí)更多相關(guān)知識，請繼續(xù)關(guān)注創(chuàng)新互聯(lián)網(wǎng)站，小編會繼續(xù)努力為大家?guī)砀鄬嵱玫奈恼拢?/p>

新聞名稱：web移動端調(diào)試神器Eruda怎么用
URL網(wǎng)址：http://muchs.cn/article6/iehjig.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供網(wǎng)站制作、網(wǎng)站收錄、微信公眾號、關(guān)鍵詞優(yōu)化、網(wǎng)站設(shè)計公司、品牌網(wǎng)站制作

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)