移动web开发调试工具AlloyLever介绍
简介
web调试有几个非常频繁的刚需:看log、看error、看AJAX发包与回包。其他的如timeline和cookie以及localstorage就不是那么频繁,但是AlloyLever都支持。如你所见:
特征
点击alloylever按钮之间切换显示或隐藏工具面板
Console会输出所有用户打印的日志如console.[log/error/info/debug/debug]
Console会输出所有的错误信息(脚本错误和网络请求错误)
XHR面板会输出所有(XMLHttpRequest)AJAX请求和服务器端返回的数据
Resouces面板会输出所有的Cookie信息和LocalStorage
TimeLime面板会输出页面相关的生命周期里的时间段耗时情况
演示
http://alloyteam.github.io/AlloyLever/
Install
可以通过npm安装:
使用
你的页面只需要引用一个js即可!
但是需要注意的是,该js必须引用在其他脚本之前。至于为什么,看下面的原理。
Console截获
重写了console方法,并且保存下window下真正的方法进行执行,并且注入自己的事件。
AJAX截获
如上面所示,重写了XMLHttpRequest对象。用户new的对象全部为重写后的,返回的是真正的。这样就可以拿到所有用户创建的XMLHttpRequest对象的实例进行监听。
Error截获
其中error包含两部分,第一部分是js报的错误,通过下面的方式截获:
这里执行的时候console已经被重写了。所以自己的console面板也能看到错误。
第二部分是资源加载失败报的错,通过遍历HTML dom节点拿到所有的 js/css/img,然后再次发送请求。js和css通过XMLHttpRequest发请求,监听状态。,img通过new Image(),监听onerror。具体代码参见: https://github.com/AlloyTeam/AlloyLever/blob/master/src/component/alloy_lever/index.js
其他
Timeline通过timing.js获得所有信息,timing.js基于window.performance封装的类库。Cookie和localStorage通过js遍历得到。
相关
Github: https://github.com/AlloyTeam/AlloyLever
Issues: https://github.com/AlloyTeam/AlloyLever/issues
微信部门也有个方便的vConsole:https://github.com/WechatFE/vConsole
欢迎大家试用反馈。
建议继续学习:
- 网络数据包调试利器之wireshark (阅读:18537)
- 内存越界的概念和调试方法 (阅读:6262)
- GDB中应该知道的几个调试方法 (阅读:5443)
- webapp网页调试工具Chrome Devtools (阅读:5258)
- php调试利器之phpdbg (阅读:4554)
- 如何在Windows下编译或调试MySQL (阅读:3543)
- FirePHP,给力的调试工具 (阅读:2971)
- 如何调试PHP的Core之获取基本信息 (阅读:2364)
- BTrace使用简介 (阅读:2197)
- 思考mysql之初级系列10---mysql内核调试方法 (阅读:2170)
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:TAT.dnt 来源: 腾讯AlloyTeam
- 标签: AlloyLever 调试
- 发布时间:2016-05-12 12:55:11
- [68] 如何拿下简短的域名
- [68] Go Reflect 性能
- [64] Oracle MTS模式下 进程地址与会话信
- [61] IOS安全–浅谈关于IOS加固的几种方法
- [61] 图书馆的世界纪录
- [60] 【社会化设计】自我(self)部分――欢迎区
- [59] android 开发入门
- [54] 视觉调整-设计师 vs. 逻辑
- [49] 读书笔记-壹百度:百度十年千倍的29条法则
- [47] 界面设计速成