在手机上查看移动Web页

用户3880999

发布于 2023-04-13 08:54:02

1.5K00

代码可运行

文章被收录于专栏：meishadevs的前端专栏meishadevs的前端专栏

运行总次数：0

代码可运行

我最近在学习做移动端页面，当做好一个移动端页面后想使用手机查看一下移动端页面在手机上的效果，找了很久才找到一个比较好的方法，特意写这篇文章记录下在手机上查看移动端页面的方法

准备的硬件和软件

带有android系统的手机
数据线
Node.js
Browsersync
Chrome

配置环境

注意事项

需要提前在电脑中安装Chrome浏览器，在手机上安装移动版的Chrome浏览器，并且通过数据线将手机和电脑连接，手机必须和电脑连接在同一wifi下，并且电脑里需要提前安装好Node.js，因为下面的操作中有些步骤需要用到Node.js，Node.js的安装方法可以参考我前面写的博客使用NVM安装Node.js

第一步：全局安装Browsersync

npm install -g browser-sync

第二步：进入移动端页面中的index.html所在的文件路径下

第三步：运行Browsersync

browser-sync start --server

此时会自动使用默认的浏览器打开网页，并且在命令行窗口中会显示四个Url地址，其中上面两个表示当前网页的Url地址下面两个Url地址用于打开Browsersync管理页，在Browsersync管理页中可以控制网页

此时在手机浏览器上运行http://192.168.0.102:3000就可以在手机上看到这个网页，前提必须使手机和电脑连接在同一wifi下

第四步：在桌面版Chrome浏览器上查看连接到电脑上的手机

打开桌面版的Chrome浏览器，在地址框中输入chrome://inspect，此时在Chrome浏览器页面上可以查看到与电脑连接的移动设备的信息

第五步：将Url地址发送到手机上

在输入框中输入Url地址http://192.168.0.102:3000，并且单击Open按钮，此时会将Url地址发送到手机上的Chrom浏览器中，如果此时手机上启动了Chrome浏览器，Chrom浏览器会显示该Url地址的内容，如果没有启动Chrome浏览器，在启动Chrome浏览器时会自动显示该Url地址的内容