移动端开发08 移动端真机调试
移动端开发时，真机调试的方法。
查看本机IP
（1）Window
打开CMD，输入ipconfig，可以获取IP地址
（2）Mac
1 | ifconfig | grep "inet " | grep -v 127.0.0.1 |
输出结果中前面的IP地址即为本机IP。
可以将这个命令写入zhs的缩写中：
1 | alias ip='ifconfig | grep "inet " | grep -v 127.0.0.1'' |
这样可以直接执行ip就可以展示本机IP了。
手机直接访问PC页面
首先要保证手机和电脑处于同一个局域网当中，然后通过Webpack开启一个服务（也可以直接修改例如Vue Cli中的配置）
注意，要将Webpack的配置文件中的host设置为0.0.0.0：
1 | { |
默认值是localhost，这样只能通过localhost或者127.0.0.1访问，更改之后不仅可以通过前二者，还可以可以通过本机IP或者0.0.0.0来访问
在手机上也就可以使用本机IP加端口号访问页面了：http://10.234.98.49:8080/#/
生成二维码
可以使用Chrome的插件Quick QR Code Generator，来为当前页面生成二维码，节省了手机上输入网址的过程，直接扫一扫就OK
移动端页面调试
当我们发现一个移动端的页面发现了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：
1 | # test2 |
Charles在macOS使用，需要注册，可以使用下面的激活码：
1 | Registered Name: ******* |
Charles和Fiddler的使用基本是类似的，激活之后首先设置代理的端口号：
在弹出的截面设置端口号，默认是8888，然后在手机上连接代理，还是需要手机和PC在同一局域网下，在连接的WIFI详情页中，在最下方的『代理』处点击『手动』，输入本机IP的上面的代理的端口号，这样在抓包软件中就可以截获手机的网络请求了。
但是如果我们设置的host将fleet.baidu.com代理到了0.0.0.0或者localhost的话，手机端是没有办法正常请求的，会展示Failed to connect to remote host的错误：
这个原因在Charles官网上有解释：大改意思就是代理本机localhost和0.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 rules和Unmatched requests passthrough勾选上，否则不会生效
如果将目标网址设置为我们本机服务的地址比如http://10.234.98.49:8080/#/，在手机中就实现了拦截跳转。
到此，基本上通过Charles配合Chrome，我们就可以愉快的进行各种复杂度的真机调试了。