我們知道現(xiàn)在hybrid app非常流行，在這樣的app里，h5頁面是應(yīng)用非常廣泛的。相對于以往在pc端開發(fā)的網(wǎng)頁，放在app里的網(wǎng)頁由于無法直接使用桌面瀏覽器的開發(fā)者工具，導(dǎo)致我們在有時候在調(diào)試的時候不知道到底報了什么錯。所以我們需要一個能夠在調(diào)試app內(nèi)h5的調(diào)試工具，方便我們定位bug。
現(xiàn)在市面上已經(jīng)有很多比較成熟的工具可以用，例如jsconsole、weinre，都是平常會用到的。但是我自己還是想做一個debug工具，一方面是這些調(diào)試工具有一定學(xué)習(xí)成本，我們能不能就引入一個js就能開始調(diào)試呢？另一方面這些工具只能在開發(fā)階段使用，那么我想在讓線上的網(wǎng)頁直接上報bug到服務(wù)器，方便我們內(nèi)部直接獲取呢？
web前端報錯都有哪些？
要做這樣一個工具，我們首先得知道前端的報錯里面都有哪些：
JavaScript運行時錯誤
try,catch時主動拋出的錯誤
資源（img、script、link等）下載時的錯誤
ajax請求時的錯誤
……
如果獲取這些錯誤信息？
錯誤類型 觸發(fā)機(jī)制 錯誤類型
1.JavaScript運行時錯誤 通過監(jiān)聽window的error事件獲取 ErrorEvent
2.try,catch時主動拋出的錯誤 通過catch(e)的參數(shù)e獲取 Error
3.資源下載時的錯誤 通過監(jiān)聽元素的error事件獲取 Event的error類型
4.ajax請求時的錯誤 通過監(jiān)聽window的error事件獲取 ErrorEvent
try,catch
try { throw new Error;}catch (err) { callback(err) // err為Error的實例 }
window.onerror
window.onerror = function(message, source, lineno, colno, error) { ... }
element.onerror
element.onerror = function(event) { ... }
相關(guān)的屬性
在上面的幾種錯誤類型里，Error的prototype上有一些屬性可供實例訪問獲得，而ErrorEvent繼承自Event，但ErrorEvent本身增加了一些類似Error的屬性可供獲取，所以我們可以通過一樣的屬性獲取相關(guān)字段信息。而Event的error類型則不同，我們下文再詳述。
Error的屬性
屬性 描述
Error.prototype.constructor Error實例原型的構(gòu)造函數(shù)
Error.prototype.message 錯誤信息描述
Error.prototype.stack 發(fā)生錯誤的堆棧跟蹤
ErrorEvent的屬性
屬性 描述
ErrorEvent.prototype.constructor ErrorEvent實例原型的構(gòu)造函數(shù)
ErrorEvent.prototype.message 錯誤信息描述
ErrorEvent.prototype.filename 發(fā)生錯誤的腳本文件的文件名
ErrorEvent.prototype.lineno 錯誤發(fā)生時所在的行號
ErrorEvent.prototype.lineno 錯誤發(fā)生時所在的列號
ErrorEvent.prototype.error 發(fā)生錯誤時所拋出的 Error 對象
可以看到ErrorEvent對象里的error屬性是一個Error的實例，因此我們可以獲得這兩個錯誤類型的堆棧跟蹤，從而獲取出錯的代碼位置。
而Event的error類型無法獲取錯誤的相關(guān)堆棧，因此我們只能通過event.target去獲取觸發(fā)這一事件的元素是誰。
小工具debuggerjs
通過上面的總結(jié)，我們已經(jīng)知道前端會出現(xiàn)的一些常見錯誤情況，根據(jù)上面的思路，我自己寫了一個小工具debuggerjs，奉上github地址：https://github.com/zyf394/debuggerjs，歡迎吐槽，如果可以的話幫忙點個star哦~
TODOList
增加打log時上報服務(wù)器的邏輯
處理代碼壓縮后獲取的報錯信息可讀性弱的問題
其他說明
如果使用zepto或者jQuery，在error回調(diào)里獲取的error參數(shù)只是一個XHR對象，無法獲取對應(yīng)的error對象（why？）
