手机真机调试本地前端页面

1. 电脑上本地启动前端项目

若只是一个html文件，则需启动一个http服务运行该文件，在浏览器中会显示类似 http://127.0.0.1:5500/demo.html 的网址，具体操作方式如下：

webstrom

直接运行html文件即可，运行的方式有：

• 点击右上角的运行按钮
• 鼠标右键快捷菜单点运行
• 菜单【运行】中点运行
• 快捷键 Shift + F10

vscode

1. 安装插件 Live Server
2. 使用 Live Server运行html文件，运行的方式有：

• 鼠标右键快捷菜单点 open with live server
• 快捷键，按住Alt不放，先按L，再按O

2. 手机和电脑连上同一个wifi

3. 获取电脑的IP

以windows电脑为例，打开命令行，运行 ipconfig 命令，如下图所示的位置为当前电脑的ip地址 192.168.31.200

4. 使用电脑ip在手机上查看真机效果

此时电脑ip为192.168.31.200，电脑上访问 http://127.0.0.1:5500/demo.html 查看页面，则在手机上使用 http://192.168.31.200:5500/demo.html 查看页面