真机实时显示电脑开发的网页效果
2019-07-13 本文已影响0人
Ace华
注意
本文章的手机显示电脑端的效果是真机的显示效果，而不是通过chrome浏览器的模拟实现的
在有了上一篇的电脑端远程调试手机网页的基础后，我们接下来看看电脑端的网页要怎么实时在真机上预览
配置端口转发
-
还是在
chrome://inspect/#devices这个页面中，点击port forwarding按钮，如图：
[站外图片上传中...(image-f62678-1563031130142)] -
比如，我要将我本机写的一个Vue项目在我的安卓手机上实时预览。我的vue项目的端口是
8080，所以就在弹出的窗口中如下配置：
[站外图片上传中...(image-eeeb66-1563031130143)]
切记，一定要勾选
Enable port forwarding选项
- 点击
done按钮后，会看到8080端口已经绿了
[站外图片上传中...(image-f0f07f-1563031130143)]
预先查看电脑端网页显示效果
让我们先看看电脑端显示的页面，如下：
[图片上传失败...(image-6507a2-1563031130143)]
在手机上真机预览网页
- 复制浏览器地址栏中的地址
http://localhost:8080/#/ - 粘贴到下图中的位置中
[站外图片上传中...(image-6b81cb-1563031130143)] - 点击
open，即可控制手机打开一个新的标签，并且自动打开你输入的网址，你就可以看到电脑端的网页在真实手机中的显示效果了，如果你不想操作你的手机，你也可以点击那个inspect按钮，就可以同步看到手机的页面。
注意事项
- 关键技术是通过那个端口转发，这样，手机访问localhost:8080就是访问电脑的localhost:8080页面
- localhost就是127.0.0.1
- 当Vue项目代码更改重新编译时，手机网页也会自动刷新哦，这点特别nice
- 当手机处于调试环境下，是不会熄屏的，这点也特点的友好，方便开发人员实时查看手机的显示效果
本人博客：http://yushihua.vip
本人公众号：
bianchengIT（手把手教编程IT）
分享编程相关经验，欢迎大家关注，只分享干货
来源: 华哥博客
作者: Hua
链接: http://yushihua.vip/2019/07/13/meng-mei-yi-qiu-de-dian-nao-diao-shi-shou-ji-wang-ye-lai-liao/
文章著作权归作者所有，转载请注明出处。
