移动端如何调试本地运行的前端项目

1.问题场景

        本地通过Live Server开启服务，http://127.0.0.1:5500/html/test.html，调试移动端兼容性问题

2.解决办法

要在手机上访问电脑本地运行的服务http://127.0.0.1:5500/html/test.html，需要确保手机和电脑处于同一局域网内，并且进行一些配置，因为127.0.0.1是一个特殊的IP地址，它仅指向本机（即电脑本身），所以无法在局域网中的其他设备（如手机）上直接访问。以下是详细步骤：

2.1 获取电脑的局域网IP地址

        需要在电脑上找到其局域网（LAN）的IP地址

• Windows系统：
  • 打开命令提示符（CMD），可以通过按Win + R键，然后输入cmd并按回车打开
  • 在命令提示符中输入ipconfig并按回车
  • 在显示的输出中，找到“以太网适配器”或“无线局域网适配器”部分下的“IPv4 地址”。这将是你的电脑的局域网IP地址，类似于192.168.x.x
• Mac系统：
  • 打开终端（Terminal）
  • 输入ifconfig命令并按回车（对于macOS Catalina及更新版本，可能需要先安装net-tools或使用ipconfig getifaddr en0命令来获取WiFi接口的IP地址，其中en0是WiFi接口的默认名称，可能会因系统配置而异）
  • 在输出中找到类似inet的条目，其后面的IP地址即为你的电脑的局域网IP地址

2.2 确保手机和电脑在同一局域网

        确保你的手机和电脑都连接到同一个Wi-Fi网络，或者你可以通过电脑创建一个Wi-Fi热点，然后让手机连接这个热点

2.3 访问服务

• 打开手机上的浏览器
• 在浏览器的地址栏中输入 http://[电脑的局域网IP地址]:5500/html/test.html，其中[电脑的局域网IP地址]应替换为你之前找到的电脑的IP地址

2.4 注意事项

• 防火墙和安全设置：确保你的电脑的防火墙或安全软件没有阻止来自局域网的连接。某些情况下，可能需要在防火墙中设置规则以允许访问特定的端口（本例中为5500端口）
• 端口占用：确保5500端口没有被其他服务占用。可以使用网络工具（如Windows的netstat -an | findstr 5500命令）来检查端口占用情况
• 静态IP地址：如果你的电脑的IP地址是动态分配的，并且经常变化，你可以考虑将其设置为静态IP地址，以便更容易地记住和访问