H5 移动调试全攻略

作者 | Jartto

来源 | http://jartto.wang/2018/11/01/mobile-debug/

随着移动设备的高速发展,H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就是掌握调试技巧,定 Bug于无形。

一、概要

因为移动端操作系统分为 iOS 和 Android 两派,所以本文的调试技巧也会按照不同的系统来区分。寻找最合适高效的方式,才能让你事半功倍。

文章会列举目前适合移动端调试的多种方案,快来选择你的最佳实践吧!

二、iOS 设备

Safari:iphone 调试利器,查错改样式首选,需要我们做如下设置:

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

iphone 设置:设置 – Safari – 高级 – 打开 Web 检查器

大功告成,这时候通过手机的 Safari 来打开 H5 页面,我们通过浏览器开发选项可以看到:

iOS 模拟器:不需要真机,适合调试 Webview 和 H5 有频繁交互的功能页面。

首先下载 Xcode ,运行项目,选择模拟器 iphonex,编译后就会打开模拟器,如下:

可以看到 H5 已经在「壳子」中运行起来了,下来就可以尝试调用 Webview 的方法,和「壳子」交互了。更多的调试技巧可以参考文章:iOS 模拟器调试。

具体的调试功能还是依赖浏览器的开发选项,与上无异,就不赘述了。

三、抓包

Charles: Mac OS 系统首选的抓包工具,适合查看、控制网络请求,分析数据情况。

Charles 抓包首先需要配置手机代理,Wifi – 配置代理(IP 地址) – 手动,如下图:

配置好手机代理,这时候打开 Charles ,就会收到确认提醒,选择允许。接下来就可以捕获手机的请求了,但是这些都是常规操作,我们来点高级的。

有意思的是:我们可以用本地文件来替换线上文件,方便调试,远程定位线上问题。

选择 Structure,找到需要替换的文件,右键菜单 – Map Local,如下图:

这时候就会打开一个弹窗,填写具体的配置:

OK,大功告成,快去改动本地文件吧,从此再也不怕线上调试了。需要注意的是如果抓取 HTTPS 请求,要安装信任证书,下文会详细说明。

与之相应的是 Windows 平台的 Fiddler,功能大致相似,这里就不细说了。

四、Spy-Debugger

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

我们先来安装:

> sudo npm install spy-debugger -g

启动命令:

> spy-debugger

这时候,控制台会打印出如下信息,说明服务已经启动了:

正在启动代理

本机在当前网络下的IP地址为:10.200.24.46

node-mitmproxy启动端口: 9888

浏览器打开 ---> http://127.0.0.1:50389

最后一步,设置手机代理:10.200.24.46,端口号:9888。补充说明一下:

Android 设置代理步骤:设置 – WLAN – 长按选中网络 – 修改网络 – 高级 – 代理设置 – 手动

iOS 设置代理步骤:设置 – 无线局域网 – 选中网络 – HTTP 代理手动

接下来,尝试一下抓包:

再打开调试页面:

HTTPS 抓包,需要安装根证书,下文会详细说明。

五、Whistle

上面推荐了一款操作简单的调试利器,升级一下,看看更加强大的调试工具 whistle。

whistle:基于 Node 实现的跨平台 Web 调试代理工具。

whistle(读音[ˈwɪsəl],拼音[wēisǒu])是基于 Node实现的跨平台抓包调试代理工具,有以下基本功能:

查看 HTTP、HTTPS请求响应内容

查看 WebSocket、Socket 收发的帧数据

设置请求 hosts、上游 http/socks 代理

修改请求 url 、方法、头部、内容

修改响应状态码、头部、内容,并支持本地替换

修改 WebSocket 或 Socket 收发的帧数据

内置调试移动端页面的 weinre 和 log

作为 HTTP 代理或反向代理

支持用 Node 编写插件扩展功能

大致了解后,我们来尝试安装:

sudo npm install -g whistle

淘宝镜像:npm install whistle -g –registry=https://registry.npm.taobao.org

whistle 安装完成后,执行命令 whistle help 或 w2 help,查看 whistle 的帮助信息:

runStartafront service

startStartabackground service

stopStop current background service

restart Restart current background service

help Display helpinformation

这里只列出部分命令,更多请 w2 help 查看。

看到上面的操作,我们何不试试缩写 w2 start 来启动服务:

w2 start

看到如下的输出,说明服务已经正常启动了:

这时候在浏览器打开链接,同时手机上配置代理(同 Charles),接下来就可以愉快的调试了。值得注意的是,whistle 的功能远非如此,更多的扩展请移步官网文档,贴张图先预览下:

记得开启拦截 HTTPS:勾选 Capture HTTPS CONNECTs

六、安装 HTTPS 证书

对于 Charles,按照如下操作安装证书:

help-SSL - Proxying - install Charles root

弹出安装证书的提示框:

按照提示去手机浏览器打开:chls.pro/ssl,安装信任证书即可。

  • 发表于:
  • 原文链接https://kuaibao.qq.com/s/20181201B14L6900?refer=cp_1026
  • 腾讯「云+社区」是腾讯内容开放平台帐号(企鹅号)传播渠道之一,根据《腾讯内容开放平台服务协议》转载发布内容。
  • 如有侵权,请联系 yunjia_community@tencent.com 删除。

扫码关注云+社区

领取腾讯云代金券