chrome手机端调试web页面(前端项目)

2018.04.24
#

#

最近用 vue 做了一个 web 音乐 App, 想看看在手机端的样子。
因为之前都是使用草料二维码查看， 但是最近使用草料二维码的时候报错，页面显示不了。于是就想使用 chrome 真机调试 web 页面，发现手机端的页面还是显示不了。

于是就开启了一段填坑之路。

1.以下是手机端报错信息

采用 chrome 真机调试，使用 pc 的 ip,手机端依然不能访问。但是手机端访问 百度首页，却正常。

2、于是自己采用了以下方式：

• 关闭防火墙
• 关闭杀毒软件
• 还专门下了猎豹 wifi,就是为了处于同一个网段下，手机通过连接 pc 上的 wifi。

可以依然，没有作用。

3、进一步处理

• 经过测试发现：在 pc 上，发现使用 localhost：8080。 pc可以访问项目。但是使用 192.168.1.101：8080 pc 就不能访问项目。
• pc 和手机使用数据线链接之后，手机端使用 localhost：8080 和 192.168.1.101：8080 都不能访问，就出现了上面的报错信息。

4、于是问题就在于，怎么让 pc 端通过 ip 来访问项目。

通过询问，终于知道了方法。由于本项目是采用的vue, 服务端是 express 。修改如下：

通过修改之后，PC就可以通过 ip 来访问项目了。

5、chrome 真机调试就成功了。注意事项如下：

• PC 和 手机端都必须采用 pc的ip来访问项目，采用localhost会失败。(因为pc和手机的localhost都是相对自身的)
• pc 和手机通过数据线连接。(不需要处于同一个网路哦)
• pc 和手机端都必须是 chrome 浏览器
• 手机安装相应机型的USB驱动，(如果电脑上安装有百度手机助手、360手机助手这类软件，一般连接后可以自动安装相应的USB驱动程序)

6、如果草料二维码的报错处理

自己刚开始的时候，把localhost 修改为 pc 的 ip ,手机上扫二维码依然不能查看，最终修改了服务端的设置，才成功。如何修改，请见上面第二张图片。

自己之前在使用vue－cli 做项目的时候，使用草料二维码，只要将localhost 修改为 ip, 使用手机扫一扫，就可以查看，但是最近好像vue-cli有变化，还要同时修改 config 目录下的 index.js 文件中的 host。也就是将 localhost 修改为 ip。

注意：草料二维码，需要手机和 pc 处于同一个网络下。

具体如何操作的请见：

• 参考链接：
  Chrome浏览器真机调试web页面