【移动端debug-6】如何做一个App里的web调试小工具
原文链接:如何做一个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对象。
【移动端debug-6】如何做一个App里的web调试小工具的更多相关文章
- 做一个 App 前需要考虑的几件事
做一个 App 前需要考虑的几件事 来源:limboy的博客 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 ...
- 做一个App前需要考虑的几件事
本文转载于文章原文链接,版本归原作者所有! 随着工具链的完善,语言的升级以及各种优质教程的涌现,做一个 App 的成本也越来越低了.尽管如此,有些事情最好前期就做起来,避免当 App 有了一定规模后, ...
- 涨姿势:创业做一个App需要花多少钱(8个人,6个月,就要100万,附笔记心得)
(原标题:涨姿势:创业做一个App要花多少钱?) 作为互联网从业者,被外行的朋友们问及最多的问题是,“做一个网站需要多少钱?”或者“做一个APP需要多少钱?”. 作为做过完整网站项目和APP的人,今天 ...
- [转载]做一个 App 前需要考虑的几件事
本文转自http://limboy.me/tech/2016/07/06/starting-an-app.html ========================================= ...
- 创业成本?亲身经历告诉你做一个app要多少钱
导语:作为一名苦逼的移动互联网创业者,被外行的朋友们问及最多的问题是“做一个网站需要多少钱?”或者“做一个APP需要多少钱?” 作为一名苦逼的移动互联网创业者,被外行的朋友们问及最多的问题是“做一个网 ...
- 尝试用kotlin做一个app(写在前面)
学kotlin的目的好像就是做一个app,不一定有什么想做的项目,只是单纯想掌握这一门技术,确切地说只是单纯想学会做app.对于概念的东西,我也没兴趣深究,用得到的学一下,用不到的,就算了.我也不知道 ...
- 一个Json结构对比的Python小工具兼谈编程求解问题
先上代码. jsondiff.py #!/usr/bin/python #_*_encoding:utf-8_*_ import argparse import json import sys rel ...
- 分享一个WPF 实现 Windows 软件快捷小工具
分享一个WPF 实现 Windows 软件快捷小工具 Windows 软件快捷小工具 作者:WPFDevelopersOrg 原文链接:https://github.com/WPFDevelopers ...
- 推荐一个linux下的web压力测试工具神器webbench
推荐一个linux下的web压力测试工具神器webbench2014-04-30 09:35:29 来源: 评论:0 点击:880 用多了apache的ab工具之后你就会发现ab存在很多问题, ...
随机推荐
- CSS属性书写顺序及命名规则
/* mozilla.org Base Styles * maintained by fantasai */ /* Suggested order: * display * list-style * ...
- Java UDP和TCP的区别
为什么要写这篇博客:是这样的,最近听朋友说,有不少公司面试的时候会问道TCP和UDp的却别,所以就写出一篇简单的来描述他们之间的区别,送给那些即将面试的朋友们. UDP: 1.UDP, a.将数据以及 ...
- HDU 1978 How many ways(经典记忆化搜索)
S - How many ways Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u S ...
- jqgrid 配置分页大小及下拉项
如何配置分页大小的下拉项?显示效果如下: 通过 rowNum 来设置默认分页大小 通过 rowList 来设置分页下拉. rowList 的值为一个数组,比如:[10,20,30] $(" ...
- 转自《https安全链接的配置教程:startSSl免费证书申请与nginx的https支持配置》
一.什么是 SSL 证书,什么是 HTTPS 网站? SSL证书是数字证书的一种,类似于驾驶证.护照和营业执照的电子副本.SSL证书通过在客户端浏览器和Web服务器之间建立一条SSL安全通道(Secu ...
- java的myeclipse,java页面改动默认的javadoc方法
在项目中右键点击新建class文件,在弹出的框中选择"here" 勾上enable project specific settings 选择comments中的types然后点击e ...
- C# 文本转语音朗读
1. 利用DONET框架自带的 SpeechSynthesizer ,缺点是没有感情色彩,抑扬顿挫等. using System; using System.Collections.Generic; ...
- 20155330 《网络攻防》 Exp3 免杀原理与实践
20155330 <网络攻防> Exp3 免杀原理与实践 基础问题回答 杀软是如何检测出恶意代码的? 基于特征码.先对流行代码特征的提取,然后进行程序的比对,如果也检测到相应的特征码的程序 ...
- Data Consistency Primer
云应用通常来说,使用的数据很多都是分散的,来自不同的数据仓库.在这种环境下,管理和保持数据一致性是很复杂的,无论是在并发跟可用性上都可能出问题.开发者有的时候就需要为了强一致性而牺牲可用性了.这也就意 ...
- Kubernetes学习之路(二十五)之Helm程序包管理器
目录 1.Helm的概念和架构 2.部署Helm (1)下载helm (2)部署Tiller 3.helm的使用 4.chart 目录结构 5.chart模板 6.定制安装MySQL chart (1 ...