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

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地址,以便更容易地记住和访问
相关推荐
twins352014 分钟前
解决Vue应用中遇到路由刷新后出现 404 错误
前端·javascript·vue.js
qiyi.sky34 分钟前
JavaWeb——Vue组件库Element(3/6):常见组件:Dialog对话框、Form表单(介绍、使用、实际效果)
前端·javascript·vue.js
煸橙干儿~~38 分钟前
分析JS Crash(进程崩溃)
java·前端·javascript
安冬的码畜日常1 小时前
【D3.js in Action 3 精译_027】3.4 让 D3 数据适应屏幕(下)—— D3 分段比例尺的用法
前端·javascript·信息可视化·数据可视化·d3.js·d3比例尺·分段比例尺
l1x1n01 小时前
No.3 笔记 | Web安全基础:Web1.0 - 3.0 发展史
前端·http·html
昨天;明天。今天。2 小时前
案例-任务清单
前端·javascript·css
zqx_73 小时前
随记 前端框架React的初步认识
前端·react.js·前端框架
惜.己3 小时前
javaScript基础(8个案例+代码+效果图)
开发语言·前端·javascript·vscode·css3·html5
什么鬼昵称3 小时前
Pikachu-csrf-CSRF(get)
前端·csrf
长天一色4 小时前
【ECMAScript 从入门到进阶教程】第三部分:高级主题(高级函数与范式,元编程,正则表达式,性能优化)
服务器·开发语言·前端·javascript·性能优化·ecmascript