【移动端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对象。