移动端开发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

移动端页面调试

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

打开手机开发者模式

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

然后进入『设置』