H5 App调试方法参考H5调试常见方法chrome developer tools模拟器GapDebugweinrespy-debugger代理总结

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或其相关套件进行调试； 再配合代理的资源本地映射，能够更为方便地调试线上环境出现的问题； 实际开发中，还是需要在合适的时机选择合适的调试方式。