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

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地址,以便更容易地记住和访问

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/40394.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Android手机拍照或从本地相册选取图片设置头像-高版本适配

GitHub传送门 问题点 Android 7.0 新增FileProvider 参考链接 图片裁减需要的临时权限 intent.setFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION | Intent.FLAG_GRANT_WRITE_URI_PERMISSION);Android 10 只能读取自己APP目录下的文件 Unable to open /storage/emulated…

三、Prometheus监控Tidb

1.下载node_exporter https://download.pingcap.org/node_exporter-v1.3.1-linux-amd64.tar.gz将其配置为系统服务: vim /usr/lib/systemd/system/node_exporter.service[Unit] Descriptionnode_exporter Documentationhttps://prometheus.io [Service] ExecStart…

单片机软件架构连载(1)-枚举(enum)

今天跟大家讲一下我在产品开发时,用枚举(enum)的一些骚操作,都是实战经验,不难,但开发经验尚浅的话,不一定能把它灵活应用。 为什么要讲枚举呢? 因为我发现它是一个容易被遗忘,同时又非常重要的…

RK3568驱动指南|第十六篇 SPI-第195章 实践:移植官方mcp2515驱动

瑞芯微RK3568芯片是一款定位中高端的通用型SOC,采用22nm制程工艺,搭载一颗四核Cortex-A55处理器和Mali G52 2EE 图形处理器。RK3568 支持4K 解码和 1080P 编码,支持SATA/PCIE/USB3.0 外围接口。RK3568内置独立NPU,可用于轻量级人工…

顶顶通呼叫中心中间件(mod_cti基于FreeSWITCH)-http话术接口测试流程

文章目录 前言联系我们部署http话术PHP例子Java例子 登录ccadmin-web配置拨号方案创建与注册分机创建分机注册分机 测试 前言 用户一直想体验机器人话术的效果,但却找不到门路。本文提供了配置机器人话术接口的配置流程,供用户体验。用户可以根据本文的…

springboot交流论坛网站-计算机毕业设计源码00304

Springboot交流论坛网站 摘要 随着信息技术在管理上越来越深入而广泛的应用,管理信息系统的实施在技术上已逐步成熟。本文介绍了交流论坛网站的开发全过程。通过分析交流论坛网站管理的不足,创建了一个计算机管理交流论坛网站的方案。文章介绍了交流论坛…

Excel 宏录制与VBA编程 ——VBA编程技巧篇三 (未初始化Range判断、遍历工作表方法、工作表多行重复内容剔除)

未初始化Range的判断 有时候需要对已定义未初始化的range对象做判断 dim curRange as range If curRange Is Nothing Thendebug.print("未初始化的..") End If遍历工作表方法 Chr(10):ASCII码中的换行键,相当于vbLF。 …

如何在Android Studio中查看APP客户端日志

测试Android应用时,日志查看是一个至关重要的调试工具,它帮助测试人员快速定位问题。幸运的是,Android Studio为我们提供了一个强大的工具——Logcat,使得查看运行时日志变得直接且简单。本文将引导你如何在Android Studio中使用L…

【鸿蒙学习笔记】@Prop装饰器:父子单向同步

官方文档:Prop装饰器:父子单向同步 [Q&A] Prop装饰器作用 Prop装饰的变量可以和父组件建立单向的同步关系。Prop装饰的变量是可变的,但是变化不会同步回其父组件。 [Q&A] Prop装饰器特点 1・Prop装饰器不能在Entry装饰的…

银行批处理包括公共,合同,贷后,评级,押品,业务审批,贸易融资,授信管理,保理,贴现详细的业务逻辑和这些模块之间的相互联系

银行批处理系统是银行业务运作的核心,涵盖了从客户信息管理到风险控制的多个方面。以下是一些常见的银行批处理模块,以及它们的业务逻辑和相互联系: 1. **公共模块**: - 包含银行业务所需的共用数据和工具,如客户信…

MySQL数据库增删改查示例

一、 1、登陆数据库 2、创建数据库zoo 3、修改数据库zoo字符集为gbk 4、选择当前数据库为zoo 5、查看创建数据库zoo信息 6、删除数据库zoo 二、创建俩张表 先创建一个数据库并使用: 创建员工表 创建员工绩效表 三、修改表 1.在员工表的基本上增加一个image系列&a…

从新手到高手:Scala函数式编程完全指南,Scala 访问修饰符(6)

1、Scala 访问修饰符 Scala 访问修饰符基本和Java的一样,分别有:private,protected,public。 如果没有指定访问修饰符,默认情况下,Scala 对象的访问级别都是 public。 Scala 中的 private 限定符&#xff…

设计模型 - 学习笔记

学习参考: https://blog.csdn.net/m0_65346405/article/details/136994128 《系统分析师教程》 《设计模式之禅》 一. 设计模式的5大原则 1. 单一职责原则 一个类应该只有一个变化因子。 就是说,一个类要变化,比如增加功能,那么引…

C语言 | Leetcode C语言题解之第205题同构字符串

题目&#xff1a; 题解&#xff1a; struct HashTable {char key;char val;UT_hash_handle hh; };bool isIsomorphic(char* s, char* t) {struct HashTable* s2t NULL;struct HashTable* t2s NULL;int len strlen(s);for (int i 0; i < len; i) {char x s[i], y t[i]…

盘点一波国际上最具挑战性的11个IT认证,你有几个证书?

在信息技术领域&#xff0c;获得认证不仅是对专业知识和技能的认可&#xff0c;更是提升职业竞争力的重要手段。 随着技术的发展和行业的需求&#xff0c;IT认证的种类越来越多&#xff0c;难度也越来越大。 你可能听说过一些知名的认证&#xff0c;比如思科的CCIE、华为的HCIE…

自闭症儿童:探索症状背后的多彩内心世界

在星启帆自闭症康复中心&#xff0c;我们每天与一群独特而珍贵的孩子相遇——他们&#xff0c;是自闭症谱系障碍的患儿。自闭症&#xff0c;这一复杂的神经发育障碍&#xff0c;以其多样化的症状表现&#xff0c;为每个孩子的生活轨迹绘上了不同的色彩。 自闭症孩子的症状各异…

微信小程序-组件样式隔离

一.isolated isolated是自定义组件.js的options对象字段styleIsolation的默认值&#xff0c;表示自定义组件和组件使用者之间的样式相互独立&#xff0c;互不影响。 写法&#xff1a; options:{//isolated默认值&#xff0c;开启样式隔离&#xff0c;使用者和自定义组件的样式…

go语言并发编程1-Gouroutine

参考文档&#xff1a;www.topgoer.com 使用方法 直接包装成函数&#xff0c;go关键字触发即可 注意事项 1 main方法结束后&#xff0c;main方法内启动的子协程会立即结束&#xff0c;无论是否执行完毕&#xff1b; 启动多个groutine 使用sync包的WaitGroup来控制&#xf…

springboot的非物质文化遗产管理系统-计算机毕业设计源码16087

目录 摘要 1 绪论 1.1 选题背景与意义 1.2国内外研究现状 1.3论文结构与章节安排 2系统分析 2.1 可行性分析 2.2 系统流程分析 2.2.1系统开发流程 2.2.2 用户登录流程 2.2.3 系统操作流程 2.2.4 添加信息流程 2.2.5 修改信息流程 2.2.6 删除信息流程 2.3 系统功能…

微信小程序 typescript 开发日历界面

1.界面代码 <view class"o-calendar"><view class"o-calendar-container" ><view class"o-calendar-titlebar"><view class"o-left_arrow" bind:tap"prevMonth">《</view>{{year}}年{{month…