【移动端debug-6】如何做一个App里的web调试小工具

原文链接:如何做一个App里的web调试小工具
我们知道现在hybrid app非常流行,在这样的app里,h5页面是应用非常广泛的。相对于以往在pc端开发的网页,放在app里的网页由于无法直接使用桌面浏览器的开发者工具,导致我们在有时候在调试的时候不知道到底报了什么错。所以我们需要一个能够在调试app内h5的调试工具,方便我们定位bug。

现在市面上已经有很多比较成熟的工具可以用,例如jsconsoleweinre,都是平常会用到的。但是我自己还是想做一个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对象。

posted @ 2016-10-03 22:58  水乙  阅读(397)  评论(0编辑  收藏