h5頁(yè)面在瀏覽器上好好的，到手機(jī)上熄火了又看不到報(bào)錯(cuò)信息怎么辦？

背景

最近小編接了一個(gè)新需求，用h5開(kāi)發(fā)頁(yè)面，通過(guò)webview嵌入原生APP中，自己在瀏覽器上開(kāi)發(fā)爽歪歪，什么信息都能看到，可是一嵌入原生app中，瞬間就熄火了，啥也看不到了，不知道為什么，反正就是頁(yè)面點(diǎn)不動(dòng)了。

這可把我急壞了，不知道有沒(méi)有小伙伴有和我一樣的困擾，我們?cè)陂_(kāi)發(fā)手機(jī)版網(wǎng)頁(yè)的時(shí)候，常常會(huì)出現(xiàn)下面的情景：

(1) 開(kāi)發(fā)時(shí)，在自己電腦上運(yùn)行得好好的，在手機(jī)上打開(kāi)就掛了，但是手機(jī)上又看不到error log；

(2) 上線后，某用戶表示頁(yè)面失靈，但我們自己又重現(xiàn)不出來(lái)，看不到用戶側(cè)的出錯(cuò)信息。

如果說(shuō)(1)還可以通過(guò)電腦連接手機(jī)以查看log來(lái)解決，那(2)在沒(méi)有完善的前端上報(bào)體系時(shí)就非常被動(dòng)了。

作為開(kāi)發(fā)者，我們的訴求很簡(jiǎn)單：有沒(méi)有快捷的方法在手機(jī)前端頁(yè)面看到log日志？

莫慌，今天小編給大家?guī)?lái)了兩個(gè)調(diào)試神器：

    Eruda
    vConsole

Eruda
Eruda介紹

Eruda 是一個(gè)專為前端移動(dòng)端、移動(dòng)端設(shè)計(jì)的調(diào)試面板，類似Chrome DevTools 的迷你版（沒(méi)有chrome強(qiáng)大 這個(gè)是可以肯定的），其主要功能包括：捕獲 console 日志、檢查元素狀態(tài)、顯示性能指標(biāo)、捕獲XHR請(qǐng)求、顯示本地存儲(chǔ)和 Cookie信息、瀏覽器特性檢測(cè)等等。
































通過(guò)這張圖，大家可以發(fā)現(xiàn)Eruda和瀏覽器的控制臺(tái)十分相似，可以說(shuō)功能是相當(dāng)?shù)亩嗔?。雙手附上在線體驗(yàn)地址：

請(qǐng)?jiān)谑謾C(jī)上打開(kāi)鏈接：http://liriliri.github.io/eruda/index.html?eruda=true
各個(gè)面板功能
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。
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獲取到的用戶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è)一些常用的功能是否被瀏覽器所支持，不支持的話將以紅色高亮進(jìn)行顯示。
使用方式

官方教程地址： https://github.com/liriliri/eruda/blob/master/doc/README_CN.md
原生使用

也可以使用cdn方式引入，這里列舉了所有版本的js地址，可以隨意選擇一個(gè)版本復(fù)制引入。然后在頁(yè)面 里面加入初始化代碼。

示例代碼如下：

<script src="http://cdn.bootcdn.net/ajax/libs/eruda/2.3.3/eruda.js"></script>
<script>
  // 初始化
  eruda.init();
  console.log('Hello world');
</script>

 

為什么要在head引入，這樣能盡量將你所有的的console都打印出來(lái)。
es6 webpack使用

示例代碼如下：

npm install eruda --save
或者
cnpm install eruda --save
或者
yarn add eruda --save
 
然后在index.html頁(yè)面中加載腳本：
 
<script src="node_modules/eruda/eruda.js"></script>
<script>eruda.init();</script>

 

JS 文件對(duì)于移動(dòng)端來(lái)說(shuō)略重（gzip 后大概 100kb）。建議通過(guò) url 參數(shù)來(lái)控制是否加載調(diào)試器，比如：

;(function () {
    var src = '//cdn.jsdelivr.net/npm/eruda';
    if (!/eruda=true/.test(window.location) && localStorage.getItem('active-eruda') != 'true') return;
    document.write('<scr' + 'ipt src="' + src + '"></scr' + 'ipt>');
    document.write('<scr' + 'ipt>eruda.init();</scr' + 'ipt>');
})();

 

初始化時(shí)可以傳入配置：

    container: 用于插件初始化的 Dom 元素，如果不設(shè)置，默認(rèn)創(chuàng)建 div 作為容器直接置于 html 根結(jié)點(diǎn)下面。
    tool：指定要初始化哪些面板，默認(rèn)加載所有。

let el = document.createElement('div');
document.body.appendChild(el);

eruda.init({
    container: el,
    tool: ['console', 'elements'],
    useShadowDom: true
});

 

vConsole
vConsole介紹

vConsole是一款由微信公眾平臺(tái)前端團(tuán)隊(duì)打造的前端調(diào)試面板，專治手機(jī)端看log難題。

雙手附上在線體驗(yàn)地址：

請(qǐng)?jiān)谑謾C(jī)上打開(kāi)鏈接：http://wechatfe.github.io/vconsole/demo.html






目前vConsole自帶有5個(gè)面板，默認(rèn)為“日志”面板，負(fù)責(zé)展示log。默認(rèn)情況下，vConsole的面板是隱藏起來(lái)的。我們可以點(diǎn)擊右下角的“面板”懸浮按鈕來(lái)顯示vConsole面板。
日志面板

 





















































第一個(gè)是日志面板主要就是我們打印顯示的一些數(shù)據(jù)，細(xì)心的同學(xué)可能會(huì)發(fā)現(xiàn)上方的log控制臺(tái)上有四種類型的日志。與電腦端的Developer Tools一樣，開(kāi)發(fā)者可以通過(guò)調(diào)用不同的方法來(lái)打出不同的顏色，以便快速區(qū)分日志類型：

console.log('foo'); // 白底黑字  
console.info('bar'); // 白底紫字  
console.warn('foo'); // 黃底黃字  
console.error('bar'); // 紅底紅字

 

“系統(tǒng)”面板



















































第二個(gè)是“系統(tǒng)”面板，vConsole會(huì)自動(dòng)將一些基礎(chǔ)信息（如系統(tǒng)版本）打印出來(lái)，方便開(kāi)發(fā)者定位問(wèn)題。若頁(yè)面是在微信內(nèi)置瀏覽器中打開(kāi)的，vConsole還會(huì)打印出微信版本號(hào)、當(dāng)前網(wǎng)絡(luò)類型等額外信息。
Network面板

第三個(gè)是Network面板，所有 XMLHttpRequest 請(qǐng)求都會(huì)被顯示到 Network tab 中。

若不希望一個(gè)請(qǐng)求顯示在面板中，可添加屬性 _noVConsole = true 到 XHR 對(duì)象中：

var xhr = new XMLHttpRequest();
xhr._noVConsole = true; // 不會(huì)顯示到 tab 中
xhr.open("GET", 'http://example.com/');
xhr.send();

 

Element面板






















































第四個(gè)是Element面板，可以查看頁(yè)面的dom結(jié)構(gòu)。
Storage面板




















































第五個(gè)是Storage面板，可以查看本地存儲(chǔ)的數(shù)據(jù)，包括Cookies、localStorage及sessionStorage。

注意點(diǎn)：

    vconsole 這個(gè)插件源碼里面是依賴 html dom api 來(lái)實(shí)現(xiàn)的，如果你所使用的的環(huán)境不支持 dom，與原有的瀏覽器內(nèi)核有差異，可能無(wú)法使用。一般的 web-view 嵌套網(wǎng)頁(yè)是可以用的，或者手機(jī)瀏覽器都是OK的。如果是小程序或者第三方軟件解析html需要查看一下原理。至于微信小程序?yàn)槭裁从?，因?yàn)閯e人就是內(nèi)置的，自己寫(xiě)適配了自己。

vConsole使用

官方教程地址： https://github.com/Tencent/vConsole/blob/dev/doc/tutorial_CN.md
原生使用

也可以使用cdn方式引入，這里列舉了所有版本的js地址，可以隨意選擇一個(gè)版本復(fù)制引入。然后在頁(yè)面 里面加入初始化代碼。

示例代碼如下：

<script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script>
<script>
  // 初始化
  var vConsole = new VConsole();
  console.log('Hello world');
</script>

 

為什么要在head引入，這樣能盡量將你所有的的console都打印出來(lái)，vconsole原理是只有 new 初始化的時(shí)候才會(huì)插入dom，并改寫(xiě)監(jiān)聽(tīng)console方法。
es6 webpack使用

示例代碼如下：

npm install vconsole
或者
cnpm install vconsole
或者
yarn add vconsole
 
然后設(shè)置個(gè)環(huán)境變量作為區(qū)分線上線下環(huán)境，比如：
 
import VConsole from 'vconsole';
 
const isDebug = true;
// 本地開(kāi)發(fā)調(diào)試注入vConsole
if (isDebug) {
    new VConsole();
}

 

引入模塊后，vConsole會(huì)有一小段時(shí)間用于初始化工作，在渲染出面板HTML之前將無(wú)法立即打印log。因此，若要在引入模塊后立即打印log，應(yīng)使用vConsole.ready()方法：

vConsole.ready(function() { console.log('Hello World');
});

 


歡迎關(guān)注微信公眾號(hào):猴哥說(shuō)前端