技术分享:前端开发中电脑和手机联调的方法

本文介绍如何在手机上访问电脑启动的前端项目,包括普通H5页面和App内嵌H5页面的方法。通过设置局域网地址,手机可直接访问前端项目;使用Chrome浏览器的inspect功能,实现手机和电脑网页的同步预览。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

如果是普通的H5页面,那么电脑和手机处于一个局域网,手机就可以访问电脑启动的前端项目了。
例如,项目地址是 http://192.168.43.241:8088,在手机直接访问http://192.168.43.241:8088即可。

如果想要手机和电脑的网页同步的话,可以在手机中安装 chrome浏览器,USB 连接电脑(手机需要开启开发者模式),然后在电脑的 chrome 浏览器中打开 chrome://inspect ,打开一个新的标签,输入要访问的前端项目地址,这样手机就可以看到和电脑上同步的网页。
示例
然后在手机和电脑上就会同时出现这个项目的网页,且手机和电脑的网页是同步的。

如果是App 内嵌的H5页面,步骤和上面的第二种方法基本一致:手机usb连接电脑,在电脑的 chrome 浏览器中打开chrome://inspect ,然后在手机上打开测试版 App 想要测试的网页,在电脑上chrome 浏览器中点击网页下方的inspect,这样就可以在手机和电脑上同步看到App 内嵌的H5页面。
示例

评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值