H5 App调试方法参考

程序员诗人 2017-04-24

ios android 性能优化 配置 脚本 chrome Firefox charles

H5调试常见方法

相较于pc端,移动端调试要更加丰富一些,下面对调试的方法进行简单汇总。
主要分为以下几点:

chrome developer tools
android+chrome inspect
iOS+safari
GapDebug
weinre
weinre相关套件
代理

chrome developer tools

除了chrome,Firefox中的调试工具也较为类似,Firefox有个小优势就是代理工具charles支持直接开启Firefox的代理服务(需要安装Firefox的charles插件)。
特点
调试简单,进行响应式布局、性能优化、网络环境模拟等比较方便,缺点是非真机无法调试webviewjsbridge及发现真机中存在的问题。
适用范围
页面响应式调试,适合开发初始阶段,还可进行性能优化分析,前端开发乃至后端开发人员必备技能。
android+chrome inspect
===

特点
使用chrome inspect调试android设备(包括模拟器)中的网页,访问chrome://inspect
即可看到连接设备以及可调试页面。
初次使用chrome inspect需要翻墙

适用范围
调试4.4以上版本android设备上app内的webview及chrome中的网页。
调试webview需要打开app的debug模式,WebView.setWebContentsDebuggingEnabled(true);

模拟器

目前常用的为genymotion,基于virtualbox内核,所以首先需要安装virtualbox。genymotion对virtualbox启动的模拟器作了一系列优化工作,比如ROM下载、移动设备模拟命令菜单(比如旋屏、开启摄像头)等。 另外还有Parallels可供选择,也能下载android ROM进行安装。
iOS+safari

特点
使用pc端的safari调试iOS设备中的网页,可进行真机远程调试,也可调试模拟器。
适用范围
调试iOS设备(包括模拟器)上的webview及safari中的网页。

如果调试safari,直接打开模拟器,使用pc中的safari就可识别到调试网页,而调试webview,则需要安装debug包(由于是运行在pc上,需x86打包)。
简单步骤如下:
安装xcode命令行工具 xcode-select --install

创建模拟器 xcrun simctl create "demo"

启动模拟器 xcrun instruments -w 'demo'

安装app xcrun simctl install booted /path/to/Your.app

GapDebug

特点

跨平台,应用是个web页面,同时集成了Safari和Chrome的调试工具,可运行在windows和mac平台上

依赖少,只需一个Chrome就能使用Safari和Chrome的调试工具
统一管理,在同个界面显示了iOS设备和Android设备及其调试页
一些实用小功能,如截屏、设备控制、app安装等

适用范围
iOS设备和4.4以上版本Android设备(及其模拟器)上的webview和网页。

weinre

特点
适用范围广,在调试页面中加载weinre提供的一个js脚本,即可在weinre inspect面板中进行调试。
安装步骤如下(npm安装方式):
安装 npm install -g weinre

启动 weinre --boundHost -all-
,默认端口是8080,可添加配置--httpPort 8888
改变端口为8888
配置脚本 访问http://localhost:8080
,将target script加入到调试页面中

详细配置及其它安装方式可参见官方文档
适用范围
一般在开发过程中进行调试,不支持USB调试的真机设备可用该方法,官方声明可调试的范围如下:
Android 2.2 Browser application
Android 2.2 w/PhoneGap 0.9.2
iOS 4.2.x Mobile Safari application
BlackBerry v6.x simulator
webOS 2.x (unspecified version)

weinre相关套件
MIHTool
MIHTool是weinre的app集成版本,仅有iOS版本可供安装,例举几个特点:
自动注入weinre所需脚本
支持webview js bridge api的模拟(如果app端还未完成开发)
支持在控制台直接require各种包方便调试、ipad端支持
ipad端还支持在设备中显示类似chrome的开发者工具

与第4点类似提供设备中的开发者工具显示,还有eruda,可以访问http://liriliri.github.io/eruda/查看效果。

spy-debugger

spy-debugger是weinre的扩展版,执行

npm install spy-debugger -g

即可完成安装,启动后配置设备代理即可进行调试。 主要特点如下:
通过代理拦截html自动注入所需调试脚本
集成了代理功能,默认使用AnyProxy,也可配置其他代理
支持https,可拦截webview及浏览器发起的请求

代理

以上涉及移动端设备(包括模拟器)的调试方式均可配合代理一同使用,在移动端设备中配置http/https代理,将线上资源代理到本地,使改动即时生效并看到效果。
常用的代理工具主要有fiddle和charles,代理工具上提供的功能很多,但调试过程中的打开方式一般有以下两种:
直接设置设备的代理服务器为本机,截获请求查询数据,排查异常信息,属于问题定位阶段
除了设置代理服务器,另外配置一些资源的代理路径为本地资源,实时查看代码运行情况,属于问题解决阶段, 平时开发过程也可用该方法代理线上资源进行调试

总结

上面对各类调试方法进行了大致介绍,每个方法都有各自的特点和适用场景。
响应式调试中,使用Chrome DevTools即可快速查看多设备显示效果和实时调节,另外还有Ghostlab也是响应式调试的好工具,有着和broswer-sync一样的多设备多窗口同步功能;
进一步的真机(模拟器)调试,高版本Android设备配合chrome,iOS设备配合Safari,使用GapDebug则更为方便,统一了iOS和Android设备的调试入口;
而其它无法使用chrome和Safari进行调试的情况,比如一些低端机型的兼容问题,使用weinre或其相关套件进行调试;
再配合代理的资源本地映射,能够更为方便地调试线上环境出现的问题;
实际开发中,还是需要在合适的时机选择合适的调试方式。

登录 后评论
下一篇
云攻略小攻
890人浏览
2019-10-21
相关推荐
性能测试评测方法
751人浏览
2018-11-16 17:17:03
关于PWA落地问题的思考
1007人浏览
2017-03-29 03:20:39
聊聊H5与JS近几年的黑科技
1581人浏览
2018-07-10 11:55:58
网易严选App感受Weex开发
2986人浏览
2017-09-12 15:27:09
h5性能测试实践结果分析
794人浏览
2016-11-10 21:04:00
H5AppWeX5学习路线图
503人浏览
2017-11-12 16:34:00
Hybird推送通知然后跳转app
599人浏览
2017-11-14 23:43:00
0
0
0
865