【移動端debug-6】如何作一個App裏的web調試小工具

原文連接：如何作一個App裏的web調試小工具
咱們知道如今hybrid app很是流行，在這樣的app裏，h5頁面是應用很是普遍的。相對於以往在pc端開發的網頁，放在app裏的網頁因爲沒法直接使用桌面瀏覽器的開發者工具，致使咱們在有時候在調試的時候不知道到底報了什麼錯。因此咱們須要一個可以在調試app內h5的調試工具，方便咱們定位bug。

如今市面上已經有不少比較成熟的工具能夠用，例如jsconsole、weinre，都是日常會用到的。可是我本身仍是想作一個debug工具，一方面是這些調試工具備必定學習成本，咱們能不能就引入一個js就能開始調試呢？另外一方面這些工具只能在開發階段使用，那麼我想在讓線上的網頁直接上報bug到服務器，方便咱們內部直接獲取呢？

web前端報錯都有哪些？

要作這樣一個工具，咱們首先得知道前端的報錯裏面都有哪些：

1. JavaScript運行時錯誤
2. try,catch時主動拋出的錯誤
3. 資源（img、script、link等）下載時的錯誤
4. ajax請求時的錯誤
   ……

若是獲取這些錯誤信息？

錯誤類型	觸發機制	錯誤類型
1.JavaScript運行時錯誤	經過監聽window的error事件獲取	ErrorEvent
2.try,catch時主動拋出的錯誤	經過catch(e)的參數e獲取	Error
3.資源下載時的錯誤	經過監聽元素的error事件獲取	Event的error類型
4.ajax請求時的錯誤	經過監聽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) { ... }

相關的屬性

在上面的幾種錯誤類型裏，Error的prototype上有一些屬性可供實例訪問得到，而ErrorEvent繼承自Event，但ErrorEvent自己增長了一些相似Error的屬性可供獲取，因此咱們能夠經過同樣的屬性獲取相關字段信息。而Event的error類型則不一樣，咱們下文再詳述。

Error的屬性

屬性	描述
Error.prototype.constructor	Error實例原型的構造函數
Error.prototype.message	錯誤信息描述
Error.prototype.stack	發生錯誤的堆棧跟蹤

ErrorEvent的屬性

屬性	描述
ErrorEvent.prototype.constructor	ErrorEvent實例原型的構造函數
ErrorEvent.prototype.message	錯誤信息描述
ErrorEvent.prototype.filename	發生錯誤的腳本文件的文件名
ErrorEvent.prototype.lineno	錯誤發生時所在的行號
ErrorEvent.prototype.lineno	錯誤發生時所在的列號
ErrorEvent.prototype.error	發生錯誤時所拋出的 Error 對象

能夠看到ErrorEvent對象裏的error屬性是一個Error的實例，所以咱們能夠得到這兩個錯誤類型的堆棧跟蹤，從而獲取出錯的代碼位置。

而Event的error類型沒法獲取錯誤的相關堆棧，所以咱們只能經過event.target去獲取觸發這一事件的元素是誰。

小工具debuggerjs

經過上面的總結，咱們已經知道前端會出現的一些常見錯誤狀況，根據上面的思路，我本身寫了一個小工具debuggerjs，奉上github地址：https://github.com/zyf394/debuggerjs，歡迎吐槽，若是能夠的話幫忙點個star哦~

TODOList

1. 增長打log時上報服務器的邏輯
2. 處理代碼壓縮後獲取的報錯信息可讀性弱的問題

其餘說明

若是使用zepto或者jQuery，在error回調裏獲取的error參數只是一個XHR對象，沒法獲取對應的error對象。