利用 Chrome 浏览器实现开发的页面在手机上实时同步更新预览

资料

参考地址

准备工作

  • PC 端安装 谷歌浏览器
  • 手机需要开启【开发者模式】->【USB调试】
  • 手机数据线
  • 项目需在PC端本地起一个服务运行

开始操作

  1. 本地起服务(以 vue 开发为基石的)
  • 我这里使用的是 vue-cli 构建的项目,运行方法 npm run dev,默认的是 8080 端口号,我这边因为开启了多个项目,所以是 8081 端口
image.png
  • 上图证明已编译成功
  1. Chrome 浏览器中骚操
  • 谷歌浏览器打开 http://localhost:8081 地址
image.png
  • F12 打开开发者工具,依次找到 More tools -> Remote devices(远程设备) -> setting -> port forwarding(端口转发),之后点击 【Add Rule】,输入 【8081】端口号 + 手机端需要请求的地址 localhost:8081,最后点击【Add】按钮保存,下面为 GIF 图演示
Animation46.gif
  1. 上面的是电脑端操作,下面是手机端操作
  • 用数据线将手机和电脑连接,开启手机的【开发者模式】->【USB调试】,多个型号开启方法不尽相同,可自行百度
  • 手机端打开浏览器测试
    • 小米手机自带浏览器测试成功 http://localhost:8081
    • UC 浏览器测试成功 http://localhost:8081
    • Chrome 浏览器测试成功 localhost:8081 唯一的方便之处是不需要输入协议前缀了
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • Spring Cloud为开发人员提供了快速构建分布式系统中一些常见模式的工具(例如配置管理,服务发现,断路器,智...
    卡卡罗2017阅读 135,269评论 19 139
  • Android 自定义View的各种姿势1 Activity的显示之ViewRootImpl详解 Activity...
    passiontim阅读 174,634评论 25 709
  • 有一种痛叫“杀人不偿命”,小升初就给了我这种感觉! 10道奥数题,全对,留下,错了,离开。150人左右考试,留下6...
    博雅亲子阅读阅读 836评论 6 5
  • 好一个浓烈的女子 骨子里透着钢性,毅念,不服 给点时间酝酿,发酵,将来是坛烈酒 她问,为何喜欢? 现在看,也好比一...
    酷那么塔塔阅读 413评论 0 0
  • 解除控制的办法就是高调、高频、高科技、高节奏。有人试图用心理学和人脉控制降低你生活节奏的时候,就是想要控制你的时候...
    晓拙阅读 118评论 0 0