原文链接:如何做一个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

  1. try {
  2. throw new Error();
  3. }catch (err) {
  4. callback(err) // err为Error的实例
  5. }

window.onerror

  1. window.onerror = function(message, source, lineno, colno, error) { ... }

element.onerror

  1. 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对象。

【移动端debug-6】如何做一个App里的web调试小工具的更多相关文章

  1. 做一个 App 前需要考虑的几件事

    做一个 App 前需要考虑的几件事  来源:limboy的博客   随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...

  2. 做一个App前需要考虑的几件事

    本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...

  3. 涨姿势:创业做一个App需要花多少钱(8个人,6个月,就要100万,附笔记心得)

    (原标题:涨姿势:创业做一个App要花多少钱?) 作为互联网从业者,被外行的朋友们问及最多的问题是,“做一个网站需要多少钱?”或者“做一个APP需要多少钱?”. 作为做过完整网站项目和APP的人,今天 ...

  4. [转载]做一个 App 前需要考虑的几件事

    本文转自http://limboy.me/tech/2016/07/06/starting-an-app.html ========================================= ...

  5. 创业成本?亲身经历告诉你做一个app要多少钱

    导语:作为一名苦逼的移动互联网创业者,被外行的朋友们问及最多的问题是“做一个网站需要多少钱?”或者“做一个APP需要多少钱?” 作为一名苦逼的移动互联网创业者,被外行的朋友们问及最多的问题是“做一个网 ...

  6. 尝试用kotlin做一个app(写在前面)

    学kotlin的目的好像就是做一个app,不一定有什么想做的项目,只是单纯想掌握这一门技术,确切地说只是单纯想学会做app.对于概念的东西,我也没兴趣深究,用得到的学一下,用不到的,就算了.我也不知道 ...

  7. 一个Json结构对比的Python小工具兼谈编程求解问题

    先上代码. jsondiff.py #!/usr/bin/python #_*_encoding:utf-8_*_ import argparse import json import sys rel ...

  8. 分享一个WPF 实现 Windows 软件快捷小工具

    分享一个WPF 实现 Windows 软件快捷小工具 Windows 软件快捷小工具 作者:WPFDevelopersOrg 原文链接:https://github.com/WPFDevelopers ...

  9. 推荐一个linux下的web压力测试工具神器webbench

    推荐一个linux下的web压力测试工具神器webbench2014-04-30 09:35:29   来源:   评论:0 点击:880 用多了apache的ab工具之后你就会发现ab存在很多问题, ...

随机推荐

  1. Android 关于在ScrollView中加上一个ListView,ListView内容显示不完全(总是显示第一项)的问题的两种简单的解决方案

    是这样的哈: 有这样一个需求: 1.显示一个界面,界面上有一个列表(ListView),列表上面有一个可以滚动的海报. 2.要求在ListView滚动的过程中,ListView上面的海报也可以跟着Li ...

  2. POJ 2367 Genealogical tree 拓扑排序入门题

    Genealogical tree Time Limit: 1000MS   Memory Limit: 65536K Total Submissions: 8003   Accepted: 5184 ...

  3. 利用WebHook实现PHP自动部署Git代码

    平时项目代码都托管在Coding,然后每次提交了代码之后都要SSH到服务器上去git pull一次,很是繁琐,在看了OverTrue的<使用PHP脚本远程部署git项目>后就尝试在自己服务 ...

  4. HBase启动报错:ERROR: org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: Server is not running yet

    今天进入hbase shell中输入命令报错:ERROR: org.apache.hadoop.hbase.ipc.ServerNotRunningYetException: Server is no ...

  5. springboot 定制错误页面

    项目中经常遇到的异常情况 400-Bad Request 401-Unauthorized If the request already included Authorization credenti ...

  6. Java基础—基础语法与常用命令

    一.基础语法 1.case不加break会有穿透效果 根据阿里规范,严禁省略default语句,即使它一句话也没有 2.for循环执行顺序: for(初始化1;条件2;迭代运算3){ 循环体4: } ...

  7. 20155311高梓云《网络对抗》逆向及Bof基础

    20155311高梓云<网络对抗>逆向及Bof基础 实践目标 本次实践的对象是一个名为pwn1的linux可执行文件. 该程序正常执行流程是:main调用foo函数,foo函数会简单回显任 ...

  8. mfc Edit控件属性

    设置Edit控件属性 窗口创建顺序 初始化Edit控件数据 一.设置Edit控件属性 .Align Text :Right 二.窗口创建顺序 CMywindowdlg: 窗口构造函数 OnCreate ...

  9. libgdx学习记录16——资源加载器AssetManager

    AssetManager用于对游戏中的资源进行加载.当游戏中资源(图片.背景音乐等)较大时,加载时会需要较长时间,可能会阻塞渲染线程,使用AssetManager可以解决此类问题. 主要优点: 1. ...

  10. JavaScript 为什么不要使用 eval

    本文内容 eval 隐藏的 eval 安全问题 结论 参考资料   eval eval 函数是一个高等级的函数,它与任何对象都无关.其参数,如果是一个字符串表达式,那么该函数计算表达式的值:如果是一个 ...