H5 移动端调试全攻略~

·  阅读 346

移动端调试痛点(项目常用)

在移动端开发时,都是先在PC端使用手机模拟器进行调试,没有问题后,我们才会在手机端的浏览器进行测试。这个时候,一旦出现问题,我们就很难解决,因为缺乏可视化的界面。很多时候,都是靠经验,或者是靠排除法。甚至,我们不得不归结为是浏览器的实现问题。

移动开发的重中之重就是掌握调试技巧,修 Bug 于无形。

1、谷歌浏览器手机模式 - 大众调试

谷歌浏览器是我们前端开发中必不可少的利器。调样式、打断点、看网络请求、看性能等,基本上你能想到的,谷歌都能满足你。

在移动端调试方面也是一样,我们可以利用谷歌浏览器的手机模式,如下图, 点击这个右侧红框手机按钮,便可以切换为手机模式,同时我们还可以在左侧红框内点击下拉箭头,选择不同的手机模式,还可选择responsive模式自定义宽高。

与此同时我们还可以自定义设备,修改浏览器的ua,用来调试哪些只允许微信访问的页面,如下图:

通过谷歌浏览器,就可以满足我们大部分需求,但是实际开发中,由于各种机型的问题,真机调试也成为了前端的必修课。

*特点:大众调试工具,但是不能模拟真机问题。

2、Mac+IOS+Safari- 进阶调试

如果手上有一台 Mac 电脑和一部苹果手机,离解决 bug 只差这操作了。

1、浏览器设置:Safari - 偏好设置 - 高级 - 勾选「在菜单栏中显示开发」菜单。

2、iphone 设置:设置 - Safari - 高级 - 打开 Web 检查器。

3、通过手机的 Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到:

4、通过这种方式成功解决问题。

*特点:不能调试webView里面的页面。

3、Chrome+Android- 进阶调试

1、打开 Android 手机 设置 > 开发者选项 > USB调试。

2、通过数据线连接你的电脑和 Android 手机,会弹出如下界面,点击 确定。

3、Chrome 中输入:chrome://inspect,进入调试页面。

4、可以见到是这样的调试界面

*特点:控制台能正常看页面,可以模似真机,方便找页面布局问题。

4、spy-debugger- 进阶调试

spy-debugger:移动端调试的利器,便捷的远程调试手机页面、抓包工具。

spy-debugger是一站式页面调试、抓包工具。远程调试任何手机浏览器页面,任何手机移动端webview(如:微信,HybridApp等)。支持HTTP/HTTPS,无需USB连接设备。spy-debugger的特性包括:

  • 页面调试+抓包

  • 操作简单,无需USB连接设备

  • 支持HTTPS

  • spy-debugger内部集成了weinre、node-mitmproxy、AnyProxy

  • 自动忽略原生App发起的https请求,只拦截webview发起的https请求,对使用了SSL pinning技术的原生App不造成任何影响。

  • 可以配合其它代理工具一起使用(默认使用AnyProxy) (设置外部代理)

调试方法(重要)

1、安装spy-debugger

sudo npm install spy-debugger -g
复制代码

2、手机和PC保持在同一网络下

3、手机开启网络代理,ip为pc的ip,端口号默认为9888

4、https页面需手机安装证书

5、命令行输入

spy-debugger
复制代码

此时,界面如下:

此时我们便可以在elements,resources,console等进行我们的调试了。同时我们还可以运用spy-debugger自带的anyproxy进行抓包,如下图:

5、charles 抓包工具- 进阶调试

1、Charles是什么

Charles中文名叫青花瓷,它是一个HTTP代理服务器,HTTP监视器,反转代理服务器。通过成为电脑或者浏览器的代理,然后截取请求和请求结果达到分析抓包的目的。Charles是一款基于java开发的跨平台抓包软件,可在Mac、Linux、Windows下使用,可以抓取电脑和手机上的http、https请求,是前端开发的一个利器。

特点:跨平台,半免费。

2、Charles工作原理

Charles 安装与配置

1、Charles的安装

Charles官网:www.charlesproxy.com

页面详解

2、Charles代理设置

3、Charles访问控制

4、客户端-MacOS快捷代理设置

应用场景

当MacOS客户端与运行Charles软件工具的电脑是同一台电脑时,可以通过快捷代理设置方式来进行设置。

**操作步骤:**打开Charles工具后,选择“Proxy” 菜单中的"macOS Proxy"选项。

5、客户端-IOS手机代理设置

1)在IOS手机中选择“设置” - “无线局域网”

2)点击已连接的无线网络名称

3)在HTTP代理的配置代理中选择“手动”

4)输入服务器IP地址及端点,点击“存储”

如图:

6、调试工具- 场景分析

既然移动端调试有这么多种方案,那在实际操作中,我们该如何取舍

场景分析

1、**Safari:**iPhone 调试利器,查错改样式首选;
2、**iOS 模拟器:**不需要真机,适合调试 Webview 和 H5 有频繁交互的功能页面;
3、**Charles:**Mac OS 系统首选的抓包工具,适合查看、控制网络请求,分析数据情况;
4、**Fiddler:**适合 Windows 平台,与 Charles 类似,查看、控制网络请求,分析数据情况;
5、**Spy-Debugger:**移动端调试的利器,便捷的远程调试手机页面、抓包工具;
6、**Whistle:**基于 Node 实现的跨平台 Web 调试代理工具;
7、**Chrome Remote Devices:**依赖 Chrome 来进行远程调试,适合安卓手机远程调试静态页;
8、**localhost 转 ip:**真机调试,适合远程调试静态页面;
9、**vConsole:**内置于项目,打印移动端日志,查看网络请求以及查看 Cookie 和 Storage;

总结:

工欲善其事必先利其器,没有好的调试工具或方法,移动端真机下的 debug 简直是前端的噩梦。但是有了这些好用的方法,各位优秀的前端大佬,修复个小 bug 还是 so easy 的。如果各位大佬有好的意见或者有其他的解决方案,也欢迎评论区交流。

分类:
前端
标签: