移动端开发08 移动端真机调试

查看本机IP

Window

打开CMD,输入ipconfig,可以获取IP地址

macOS

ifconfig | grep "inet " | grep -v 127.0.0.1

输出结果中前面的IP地址即为本机IP。

可以将这个命令写入zhs的缩写中:

alias ip='ifconfig | grep "inet " | grep -v 127.0.0.1''

这样可以直接执行ip就可以展示本机IP了。

手机访问PC页面(Dev Server)

首先要保证手机和电脑处于同一个局域网当中,然后通过Webpack开启一个服务(也可以直接修改例如Vue Cli中的配置)

注意,要将Webpack的配置文件中的host设置为0.0.0.0

{
  host: '0.0.0.0', // can be overwritten by process.env.HOST
}

默认值是localhost,这样只能通过localhost或者127.0.0.1访问,更改之后不仅可以通过前二者,还可以可以通过本机IP或者0.0.0.0来访问

在手机上也就可以使用本机IP加端口号访问页面了:http://10.234.98.49:8080/#/

手机扫描二维码访问PC页面

可以使用Chrome的插件Quick QR Code Generator,来为当前页面生成二维码,节省了手机上输入网址的过程,直接扫一扫就OK

Quick QR Code Generator

移动端页面调试

当我们发现一个移动端的页面发现了Bug,除了在本机使用Chrome进行模拟调试之外,还可以使用真机调试,有两种方案,一种是利用Chrome,一种是利用Safir,我使用的是前者(因为手里没有Iphone…),关于后者可以参考这篇文章,原理是类似的。

打开手机开发者模式

首先需要将手机的开发者模式打开,以我手中的小米9为例,打开开发者模式需要依次进入『设置』→『我的设备』→『全部参数』,点击6次MIUI版本,将开发者模式打开。

然后进入『设置』→『更多设置』→『开发者选项』,勾选上『开启开发者选项』和『USB调试』

设置PC端Chrome

使用PC的Chrome浏览器,在地址栏输入chrome://inspect/#devices,勾选Discover USB devices(顺表说一句,利用Chrome进行Node调试也需要在此页面进行设置,具体参考我的另一篇笔记《Egg03 断点调试》

连接手机

然后将手机用USB线与电脑连接,连接时手机会弹窗询问『USB的用途』,需要勾选『传输文件』,这个时候inspect的界面上就会出现手机的相关信息:

点击inspect按钮,会弹出一个独立的调试窗口,然后打开手机端的Chrome,输入URL就可以在调试窗口中看到对应的截面,并且可以展示控制台的相关信息:

也可以使用腾讯开发的TBS Studio调试工具,它在Chrome的调试工具的基础上进行了功能扩展,功能更强大,有需要的同学可以尝试。

手机配置Host

如果PC配置了Host之后(推荐使用SwitchHost),如果使用手机直接访问是行不通的,而修改手机的Host一般来说需要Root,还是比较复杂的。可以借助Fiddler或者Charles来进行反向代理实现

如果在测试环境下,PC端配置了Host:

# test2
114.113.198.65	facrm.ms.netease.com

Charles在macOS使用,需要注册,可以使用下面的激活码:

Registered Name: https://zhile.io

License Key: 48891cf209c6d32bf4

Charles和Fiddler的使用基本是类似的,激活之后首先设置代理的端口号:

在弹出的截面设置端口号,默认是8888,然后在手机上连接代理,还是需要手机和PC在同一局域网下,在连接的WIFI详情页中,在最下方的『代理』处点击『手动』,输入本机IP的上面的代理的端口号,这样在抓包软件中就可以截获手机的网络请求了。

Fiddler

但是如果我们设置的hostfleet.baidu.com代理到了0.0.0.0或者localhost的话,手机端是没有办法正常请求的,会展示Failed to connect to remote host的错误:

这个原因在Charles官网上有解释:大改意思就是代理本机localhost0.0.0.0是非常复杂的,所以如果想要访问localhost:8080需要访问localhost.charlesproxy.com:8080。当然最有效的解决防范就是将Host的配置中的0.0.0.0改为本机IP,这样就不会出现这个问题了

拦截手机端请求

如果是客户端内嵌的Web页,在调试时既不能输入网址,又不能扫二维码,如何观察当前PC页面的效果呢?还是要用到Fiddler或者Charles,下面以Fiddler举例:

首先打开客户端的界面,这时候Fiddler会拦截到当前的网络请求,以百度为例,在主界面右侧的AutoResponder标签下,点击Add Rule,添加一条规则,将请求拦截,转发到谷歌,点击保存

转发设置

这时候再打开这个页面,就会跳转到谷歌的页面了

注意,要把Enable rulesUnmatched requests passthrough勾选上,否则不会生效

设置

如果将目标网址设置为我们本机服务的地址比如http://10.234.98.49:8080/#/,在手机中就实现了拦截跳转。

到此,基本上通过Charles配合Chrome,我们就可以愉快的进行各种复杂度的真机调试了。

使用Charles进行HTTPS抓包

上面所有的例子,前提都必须是HTTP协议,如果是HTTPS协议,抓包访问到的内容会是乱码,需要进行额外的配置

在电脑上配置证书

需要在电脑上安装Charles HTTPS证书:

help → SSLProxying → Install Charles Root Ceriticate

点击Install Charles Root Ceriticate后,会直接跳到钥匙串

如果你的证书已经信任,可直接进入下一步,反之,点击Charles Proxy CA,进入钥匙串访问,设置为始终信任

通过Proxy → Proxy Settings →Proxies,勾选Enable transparent HTTP proxying

通过Proxy → SSL Proxying Settings,勾选Enable SSL Proxying,并添加host,端口是443 这里是把所有的host都设置进去

手机端下载证书

电脑上通过 help → SSLProxying → Install Charles Root Ceriticate on a Mobile Device or Remote Browser,可以获得下载提示

手机上 safari(Andriod使用自带浏览器或者Chrome)打开上述网址chls.pro/ssl(可能会有不同,请看上图提示),下载安装证书。注意选择浏览器,其他浏览器下载证书并不会提示安装

信任刚刚安装的证书,手机上打开 设置 → 通用 → 关于本 → 证书信任设置 → 信任证书

查看效果

配置完成后,理论上就可以抓取HTTPS的结果,如果没有成功,可能的原因:

  • 手机和电脑不处在同一网络环境下
  • 手机上的代理ip不是电脑本机ip
  • 证书没装成功
  • 没勾选 Proxy → macOS Proxy,勾选上 macOS Proxy
  • 浏览器装的插件拦截了

参考

已标记关键词 清除标记
©️2020 CSDN 皮肤主题: 编程工作室 设计师:CSDN官方博客 返回首页