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

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏Jerry的SAP技术分享

将Java应用部署到SAP云平台neo环境的两种方式

Eclipse里选择要部署的项目,右键->Run as Server, 选择上一步创建的Server即完成部署。

2242
来自专栏梦魇小栈

adb设备信息查询修改刷机等命令

ADB很强大,记住一些ADB命令有助于提高工作效率。 通过ADB命令查看wifi密码、MAC地址、设备信息、操作文件、查看文件、日志信息、卸载、启动和安装APK...

6833
来自专栏前端侠2.0

vs code和node的相关使用 一一 tsd用法

之后安装typescript    npm install -g typescript

2373
来自专栏wym

Linux ubntu 下操作

ls 显示当前下面的文件及文件夹 ls -a 显示当前目录下的所有文件及文件夹包括隐藏的.和..等 ls -al 显示当前目录下的所有文件及文件夹包括隐藏的.和...

1592
来自专栏西枫里博客

宝塔面板操作多个域名做301跳转

都知道在网站更换域名的过程中为了保住收录和排名,就需要通过搜索引擎提供的改版工具来进行操作。而其中最重要的就是对老域名进行301永久重定向获得搜索引擎的收录更新...

4741
来自专栏Timhbw博客

腾讯云COS开启FTP功能

2016-06-0715:35:35 发表评论 258℃热度 我的网站一直用的是腾讯云的COS,图片、JS、CSS等静态资源都存在上面,速度比较理想。但有一个...

1.1K14
来自专栏Youngxj

[康乐优化]]kangle 3311后台添加防cc攻击代码

5094
来自专栏java沉淀

vue入门环境搭建及demo运行

2652
来自专栏dotnet & java

vs javascript intellisence失效

网上搜了一下,看到msdn文档上一句话,“通过使用 reference 指令,Visual Studio 能够在当前正编辑的脚本与其他脚本之间建立关系。”;突然...

882
来自专栏每日一篇技术文章

带你入坑01-weex-搭建环境

安装 Node.js 环境成功后,npm 包管理工具也会自动安装成功 输入下面命令检查一下

1131

扫码关注云+社区

领取腾讯云代金券