Eruda手機(jī)網(wǎng)頁(yè)前端調(diào)試面板
前言
進(jìn)行移動(dòng)端網(wǎng)頁(yè)開(kāi)發(fā)時(shí)，想要查看手機(jī)瀏覽器信息從來(lái)都不是一件容易的事。特別是當(dāng)目標(biāo)環(huán)境為APP內(nèi)置WebView，需要調(diào)用特定的JsBridge接口時(shí)，你根本都干不了什么，只能一遍又一遍地修改代碼，重新打開(kāi)頁(yè)面并alert一下。你可能會(huì)說(shuō)，可以使用Chrome，F(xiàn)irefox連接手機(jī)調(diào)試??！但那樣限定于使用相應(yīng)的手機(jī)版瀏覽器，意義并不大。Weinre，Vorlonjs跟debugGap等工具實(shí)際上也并不好用，初始化過(guò)于繁瑣，而且僅能調(diào)調(diào)樣式，打打log，斷點(diǎn)調(diào)試什么的也沒(méi)有辦法支持。每次測(cè)試出現(xiàn)問(wèn)題，基本上只能屁顛屁顛地跑過(guò)去拿手機(jī)過(guò)來(lái)連接自己的本地環(huán)境改代碼查bug。每當(dāng)這時(shí)候我便會(huì)想，如果手機(jī)上也能有個(gè)跟PC端瀏覽器一樣的DevTools就好了，那樣的話(huà)我就不用再在每個(gè)頁(yè)面前面都寫(xiě)上一句`window.onerror = function (msg) { alert(msg) }`了（內(nèi)心：真是個(gè)2B的做法）。
https://github.com/liriliri/eruda
示例
請(qǐng)?jiān)谑謾C(jī)上打開(kāi)鏈接：http://liriliri.github.io/eruda/index.html?eruda=true
安裝
你可以通過(guò)npm來(lái)下載使用該工具：
npm install eruda --save
然后在頁(yè)面中引入以下腳本：
(function () {
var src = 'node_modules/eruda/dist/eruda.min.js';
if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
})();
可以看到只有當(dāng)url上帶有eruda=true或本地存儲(chǔ)active-eruda為true的時(shí)候，工具才會(huì)被加載并執(zhí)行。其中設(shè)置面板有選項(xiàng)可以設(shè)置active-eruda使工具常駐，不用每次都在url上添加eruda=true。
注：該插件的文件gzip后大小約有50+kb，相比于項(xiàng)目頁(yè)均js腳本量幾kb來(lái)說(shuō)還是太大，并不適合在現(xiàn)網(wǎng)環(huán)境加載影響頁(yè)面載入速度。
功能面板介紹
Console面板
該面板會(huì)替換console對(duì)象中的log，error，info，warn，dir，time，timeEnd方法以不同的樣式顯示出來(lái)，同時(shí)默認(rèn)會(huì)通過(guò)onerror捕獲全局錯(cuò)誤（可以在設(shè)置面板關(guān)閉），打出錯(cuò)誤信息及其堆棧。當(dāng)然，日志的清除與過(guò)濾也是支持的，還可以直接在該面板輸入js腳本并在全局作用域下執(zhí)行。該面板還內(nèi)置了一些快捷指令來(lái)快速執(zhí)行一些有用的功能，比如在頁(yè)面載入jQuery或underscore，使用正則表達(dá)式過(guò)濾log等。
Elements面板
查看Dom狀態(tài)對(duì)于調(diào)試工具自然是一個(gè)必不可少的功能。通過(guò)該工具，你無(wú)需連接PC端調(diào)試工具就能輕松查看DOM節(jié)點(diǎn)上的各個(gè)屬性值，內(nèi)容，應(yīng)用的CSS樣式。被查看的元素也會(huì)在頁(yè)面上高亮，能夠使你快速知曉DOM元素的margin，padding。
注：感謝weinre項(xiàng)目，扒了一點(diǎn)代碼:)
Network面板
Network面板通過(guò)performance接口以圖表的形式展示頁(yè)面的加載速度。計(jì)劃在resource timing api得到廣泛應(yīng)用時(shí)再加入各個(gè)資源的加載情況，不過(guò)目前它僅僅只能得到頁(yè)面的加載速度。
Resources面板
該面板主要用來(lái)展示localStorage，cookie，頁(yè)面腳本，樣式，圖片等資源，同時(shí)能夠?qū)ζ鋱?zhí)行一些簡(jiǎn)單的操作，如清除指定的localStorage條目。
Info面板
很多時(shí)候會(huì)需要查看復(fù)制瀏覽器上的指定信息，比如通過(guò)JsBridge獲取到的用戶(hù)Id，用于后臺(tái)數(shù)據(jù)查錯(cuò)。又比如，測(cè)試碰到某些頁(yè)面錯(cuò)誤時(shí)，我們首先做的一件事經(jīng)常是：把鏈接發(fā)給我看看，然而APP里并沒(méi)有復(fù)制鏈接的選項(xiàng):( 還有，一個(gè)頁(yè)面在不同環(huán)境下需要有不同的表現(xiàn)，項(xiàng)目H5頁(yè)面經(jīng)常需要在不同APP里有不同表現(xiàn)以及調(diào)用不同jsApi。靠什么來(lái)區(qū)分？UA。然而有時(shí)候?qū)δ硞€(gè)版本UA檢測(cè)不準(zhǔn)確就會(huì)造成頁(yè)面出BUG，這時(shí)候如果有個(gè)方便的方法能夠快速查看到出錯(cuò)者的瀏覽器UA就太好了。
綜上，Info面板默認(rèn)會(huì)展示出url和user-agent兩條信息，你也可以通過(guò)調(diào)用它的接口輸出其它指定信息。
Snippets面板
Console面板可以執(zhí)行js腳本，但在手機(jī)上輸入代碼體驗(yàn)實(shí)在不怎么樣。利用該面板你可以添加一些方法以便于快速和多次觸發(fā)它。Sinppets默認(rèn)加入了兩個(gè)腳本，為頁(yè)面所有元素加border查看排版結(jié)構(gòu)以及重刷頁(yè)面。
Features面板
嗯，之前碰到過(guò)BUG，結(jié)果發(fā)現(xiàn)是APP的WebView沒(méi)開(kāi)啟對(duì)localStorage的支持，所以有了該面板。它會(huì)檢測(cè)一些常用的功能是否被瀏覽器所支持，不支持的話(huà)將以紅色高亮進(jìn)行顯示。
自定義插件
Eruda本質(zhì)上只是一個(gè)可拖拽的入口按鈕加一個(gè)Tab組件，其中的每個(gè)面板都是一個(gè)獨(dú)立的插件。所以，事實(shí)上你可以自行添加各種自定義的信息展示面板，具體可參考這個(gè)頁(yè)面FPS展示插件。這是一個(gè)很有用的特性，因?yàn)橥ㄓ媒M件很難做到適應(yīng)于各類(lèi)需求，有很多時(shí)候你會(huì)想要去擴(kuò)展它。比如，項(xiàng)目用于移動(dòng)端測(cè)試環(huán)境切換的工具會(huì)在每個(gè)頁(yè)面嵌入該插件用于不同環(huán)境的切換，同時(shí)顯示ID便于查找單次請(qǐng)求所對(duì)應(yīng)的完整HTTP記錄，它長(zhǎng)下面這個(gè)樣子：
結(jié)語(yǔ)
Eruda調(diào)試面板的基礎(chǔ)工具庫(kù)：http://liriliri.github.io/eustia/