原文鏈接：如何做一個App里的web調試小工具
我們知道現在hybrid app非常流行，在這樣的app里，h5頁面是應用非常廣泛的。相對于以往在pc端開發的網頁，放在app里的網頁由于無法直接使用桌面瀏覽器的開發者工具，導致我們在有時候在調試的時候不知道到底報了什么錯。所以我們需要一個能夠在調試app內h5的調試工具，方便我們定位bug。

現在市面上已經有很多比較成熟的工具可以用，例如jsconsole、weinre，都是平常會用到的。但是我自己還是想做一個debug工具，一方面是這些調試工具有一定學習成本，我們能不能就引入一個js就能開始調試呢？另一方面這些工具只能在開發階段使用，那么我想在讓線上的網頁直接上報bug到服務器，方便我們內部直接獲取呢？

web前端報錯都有哪些？

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

JavaScript運行時錯誤

try,catch時主動拋出的錯誤

資源（img、script、link等）下載時的錯誤

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

增加打log時上報服務器的邏輯

處理代碼壓縮后獲取的報錯信息可讀性弱的問題

其他說明

如果使用zepto或者jQuery，在error回調里獲取的error參數只是一個XHR對象，無法獲取對應的error對象。

轉載于:https://www.cnblogs.com/shuiyi/p/5929788.html

總結

以上是生活随笔為你收集整理的【移动端debug-6】如何做一个App里的web调试小工具的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。