正所谓磨刀不误砍柴工,一个好的调试工具对效率的提升无疑是事半功倍的。本文汇总了一些在移动端开发方面的调试工具和常见技巧,希望对你日常的开发工作有所帮助。
本文分为三个方面介绍:
纯网页调试
– Chrome 控制台调试
– Web Inspector Remote
– Vconsole
– Onerror捕获异常
客户端调试
– 微信端调试
– IOS调试
– Android调试
代理调试
– HTTPS抓包
– Fiddler代理本地文件
– DNS访问本地服务器
利用开发者工具提供的一些方法,可以有效帮助定位日常开发中遇到的问题,这里就不细说了,列举一些常见的手段:
1、设置断点 2、把 objects 输出成表格 3、快速定位 DOM 元素 4、用 console.time() 和 console.timeEnd() 测试循环耗时 5、格式化代码 6、屏蔽不相关代码 7、节点变化时中断 8、等等
更多详细信息可参考 14 个你可能不知道的 JavaScript 调试技巧
Web Inspector Remote 是一个远程调试工具,又称weinre。需要搭建一个weinre的服务器,然后被调试的页面中引入一个js,就可以进行远程调试,调试的界面如下,有点类似chrome开发者工具的调试,不过weinre比较适用于调试CSS,不太合适调试JS,有些JS的错误往往不能报出来。
我在富途内网搭建了weinre服务,地址是 https://weinre.futunn.com ,需要配host 172.28.249.39 weinre.futunn.com,富途的同学可以在内网直接使用。
Vconsole是腾讯微信团队出品的一个前端调试工具,功能很强大,可以看到页面日志、代理信息、网络请求、页面元素、还有cookie、localStorage等。
使用方式有两种:
npm安装
npm install vconsole
或者直接引入压缩后的JS
<script src="path/to/vconsole.min.js"></script> <script> // init vConsole var vConsole = new VConsole(); console.log('Hello world'); </script>
更多信息可访问他们的github: https://github.com/Tencent/vConsole 。
引入Vconsole之后,页面在右下方会出来一个浮层,点开就可以查看更多信息:
Vconsole功能很强大,适用于各类调试场景,而且在各类终端都能使用,非常推荐。
监听window的onerror事件可以捕获全局的一些JS异常,不过只适用于内联JS或者同域下的JS,否则就需要crossorigin参数和远程资源服务器的支持。
Onerror捕获异常比较适用于产品上线后的监控使用,通过收集错误信息,上报到监控服务器,并设置告警条件,可以有效及时地发现线上的错误。
在富途的产品中,我们通常使用公共组件tool-dedog.js,它会收集页面中的错误,告警到monitor,并且把具体的错误信息,上报到ULS日志中心,下图是一个例子:
总结一下: - 在开发阶段,我们使用chrome开发者工具进行移动端的模拟开发; - 在测试阶段,我们使用weinre和Vconsole定位具体的终端问题; - 上线之后,我们监控window的onerror事件,及时发现线上用户实际使用过程产生的一些异常。
微信端调试最好的当然是微信自家的产品——微信web开发者工具。这个工具在扫一扫登录之后,就可以模拟出微信客户端的环境,可以调试微信分享API、支付API等一系列客户端特定的功能。
安卓端USB调试的方式比较简单:
- 连接USB - 开启安卓的调试模式 - 访问chrome://inspect - 勾选Discover USB devices - 选取要调试的网页
如果是调试安卓手机中chrome访问的页面,以上方式就足够了,不过如果需要调试安卓APP内嵌的web网页,还需要同时满足以下条件:
- Android 4.4+ - 在APP代码中设置WebView.setWebContentsDebuggingEnabled(true)
IOS端USB调试的原理其实跟安卓差不多,只不过换成了mac和safari而已:
- 连接USB - 手机上Settings -> Safari -> Advanced,启用Web Inspector - 手机上打开web页面 - Mac上Safari中点Develop -> 设备名 -> 选择网页 - 弹出Web Inspector进行调试
同理,如果safari访问的页面,以上方式就可以调试,但如果是APP内嵌的页面,条件就比较苛刻了,需要满足以下两个条件之一:
- Xcode编译安装的应用 - 越狱IOS设置com.apple.private.webinspector.allow-remote-inspection和com.apple.security.get-task-allow
https抓包分别PC抓包和手机抓包,主要是通过fiddler,生成fiddler证书并信任后,就可以打开fiddler中的HTTPS选项进行抓包了。具体步骤如下:
- 下载并安装Fiddler证书生成器 http://www.telerik.com/docs/default-source/fiddler/addons/fiddlercertmaker.exe - 打开Fiddler,点击工具栏中的Tools——>Options - 切换到 HTTPS 选项卡,勾选 Capture HTTPS CONNECTs,勾选 Decrypt HTTPS traffic,一路点确定安装 - 重启fiddler,切换到HTTPS 选项卡,点击右侧Actions,能看一个下拉菜单,点击 Export Root Certificate to Desktop - 证书会生成到桌面上,名为 FiddlerRoot.cer,点击安装为根证书
手机抓包也是类似,只不过需要把FiddlerRoot.cer拷到手机中安装并信任,另外通过在同一个局域网内设置fiddler的网络代理(端口通常是8888),就可以抓包手机上的HTTPS请求了。
fiddler代理本地文件是通过fiddler的autoResponder实现的,可以编写匹配规则,指定本地电脑上的某个文件代替服务器上的某个文件来响应请求,这样在本地做的修改,就可以马上看到效果,这是很常用的手段,就不细说了。
我来评几句
登录后评论已发表评论数()