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

1、web移動端調(diào)試神器eruda在web開發(fā)過程中，對html頁面舉行開發(fā)和調(diào)試的時(shí)候都會用到掃瞄器提供的調(diào)試工具，小編我最常用的就是chrome掃瞄器自帶的開發(fā)者工具了，可以很便利的對js代碼舉行斷點(diǎn)調(diào)試，log也很便利。但是在移動端的掃瞄器上舉行開發(fā)就沒有這么便利了，不管是ios的safari還是android的眾多掃瞄器。在這里小編推舉一個(gè)移動端的調(diào)試神器eruda。eruda 是一個(gè)專為手機(jī)網(wǎng)頁前端設(shè)計(jì)的調(diào)試面板，類似 devtools 的迷你版，其主要功能包括：捕捉 console 日志、檢查元素狀態(tài)、顯示性能指標(biāo)、捕捉xhr哀求、顯示本地存儲和 cookie 信息、掃瞄器特性檢測等等

2、。eruda的github地址: 廢話不多說，我們挺直上代碼介紹eruda的使用。用法eruda有兩種辦法。1）通過cdn用法：挺直在html頁面中引入eruda的js文件 eruda.init(); 2）通過npm安裝：npm install eruda -save在頁面中加載腳本： eruda.init(); 我普通用法第一種方式（比較懶，呵呵）。初始化eruda之后在html界面上會浮現(xiàn)一個(gè)半透亮的齒輪按鈕，點(diǎn)擊一下就會彈出eruda的面板，再點(diǎn)擊一下就會收起來，如下圖所示。 挺直用法不帶任何參數(shù)的初始化辦法init()會加載eruda提供的所有面板，假如只需要部分面板需要在init()

3、中帶上配置參數(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面板：圖表顯示頁面加載速度；查看頁面各資源哀求時(shí)光（android

4、）；捕捉xhr哀求，查看發(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面板：掃瞄器常用特性檢測；提供can i use，html5test快捷拜訪。配置面板的代碼如下： eruda.init( tool: 'console', 'elements' );