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

查看本机IP

(1)Window

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

本机IP

(2)Mac

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页面

首先要保证手机和电脑处于同一个局域网当中,然后通过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/#/

生成二维码

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

Quick QR Code Generator

移动端页面调试

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

首先需要将手机的开发者模式打开,以我手中的小米9为例,打开开发者模式需要依次进入『设置』→『我的设备』→『全部参数』,点击6次MIUI版本,将开发者模式打开。然后进入『设置』→『更多设置』→『开发者选项』,勾选上『开启开发者选项』和『USB调试』

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

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

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

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

手机配置Host

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

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

# test2
114.113.198.65	facrm.ms.netease.com

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

Registered Name: ******

License Key: ***************

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,我们就可以愉快的进行各种复杂度的真机调试了。

参考

发布了382 篇原创文章 · 获赞 91 · 访问量 33万+
展开阅读全文

没有更多推荐了,返回首页

©️2019 CSDN 皮肤主题: 编程工作室 设计师: CSDN官方博客

分享到微信朋友圈

×

扫一扫,手机浏览