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

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.mfbz.cn/a/767547.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

7.2、指针变量的定义和使用

代码 #include <iostream> using namespace std; #include <string>int main() {//定义指针int a 10;//指针定义语法&#xff1a;数据类型 * 指针变量名int * p;//让指针记录变量a的地址p &a;cout << "a的地址为&#xff1a;" << &am…

恶意软件是什么意思?常见的恶意软件类型

您可能听说过很多有关恶意软件感染和运行服务器的危险的信息。但是&#xff0c;您可能还不清楚这在现实生活中意味着什么&#xff0c;或者该如何处理。让我们来了解一下&#xff1a;当人们谈论恶意软件时&#xff0c;他们真正指的是什么&#xff1f; 恶意软件是恶意软件的缩写&…

热网无线监测系统 SystemManager.asmx SQL注入漏洞复现

0x01 产品简介 热网无线监测系统是一种先进的热力管网监测解决方案,它通过无线通信技术实现对热力管网各项参数的实时监测和数据分析,以提高供热效率、降低能耗、保障管网安全。系统利用先进的传感器技术和无线通信技术,对热力管网中的温度、压力、流量等关键参数进行实时监…

【JAVA多线程】JDK中的各种锁,看这一篇就够了

目录 1.概论 1.1.实现锁的要素 1.2.阻塞队列 1.3.Lock接口和Sync类 2.各种锁 2.1.互斥锁 2.1.1.概论 2.1.2.源码 1.lock() 2.unlock() 2.2.读写锁 2.3.Condition 2.3.1.概论 2.3.2.底层实现 1.概论 1.1.实现锁的要素 JAVA中的锁都是可重入的锁&#xff0c;因为…

Google 发布了最新的开源大模型 Gemma 2,本地快速部署和体验

Gemma 2 是 Google 最新发布的开源大语言模型。它有两种规模&#xff1a;90 亿&#xff08;9B&#xff09;参数和 270 亿&#xff08;27B&#xff09;参数&#xff0c;分别具有基础&#xff08;预训练&#xff09;和指令调优版本&#xff0c;拥有 8K Tokens 的上下文长度&#…

Akamai+Noname强强联合 | API安全再加强

最近&#xff0c;Akamai正式完成了对Noname Security的收购。本文我们将向大家介绍&#xff0c;经过本次收购后&#xff0c;Akamai在保护API安全性方面的后续计划和未来愿景。 Noname Security是市场上领先的API安全供应商之一&#xff0c;此次收购将让Akamai能更好地满足日益增…

【C语言】extern 关键字

在C语言中&#xff0c;extern关键字用于声明一个变量或函数是定义在另一个文件中的。它使得在多个文件之间共享变量或函数成为可能。extern关键字常见于大型项目中&#xff0c;通常用于声明全局变量或函数&#xff0c;这些变量或函数的定义位于其他文件中。 基本用法 变量声明…

智能语音门锁:置入NV170D语音芯片ic 打造便捷生活新体验

一、智能门锁语音芯片开发背景 随着科技的飞速发展&#xff0c;传统门锁的局限性日益凸显&#xff0c;无法满足现代人对高效、安全生活的需求。在这样的时代背景下&#xff0c;智能门锁应运而生&#xff0c;它不仅继承了传统门锁的基本功能&#xff0c;更通过融入先进的科技元素…

YOLOv8改进 | 卷积模块 | SAConv可切换空洞卷积

秋招面试专栏推荐 &#xff1a;深度学习算法工程师面试问题总结【百面算法工程师】——点击即可跳转 &#x1f4a1;&#x1f4a1;&#x1f4a1;本专栏所有程序均经过测试&#xff0c;可成功执行&#x1f4a1;&#x1f4a1;&#x1f4a1; 专栏目录 &#xff1a;《YOLOv8改进有效…

市场规模5万亿,护理员缺口550万,商业护理企业如何解决服务供给难题?

干货抢先看 1. 据统计&#xff0c;我国失能、半失能老人数量约4400万&#xff0c;商业护理服务市场规模达5万亿。然而&#xff0c;当前养老护理员缺口巨大&#xff0c;人员的供需不匹配是很多养老服务企业需要克服的难题。 2. 当前居家护理服务的主要市场参与者分为两类&…

儿童无语言是否等同于自闭症?全面解析与认识自闭症

在探讨自闭症与儿童语言发展之间的关系时&#xff0c;我们首先需要明确的是&#xff0c;自闭症并非单一由语言缺失所定义&#xff0c;而是一个复杂的神经发育障碍&#xff0c;其核心特征包括社交互动和沟通能力的显著受损&#xff0c;以及重复、刻板的行为模式、兴趣或活动。 …

基于SpringBoot高校体育运动会管理系统设计和实现(源码+LW+调试文档+讲解等)

&#x1f497;博主介绍&#xff1a;✌全网粉丝10W,CSDN作者、博客专家、全栈领域优质创作者&#xff0c;博客之星、平台优质作者、专注于Java、小程序技术领域和毕业项目实战✌&#x1f497; &#x1f31f;文末获取源码数据库&#x1f31f; 感兴趣的可以先收藏起来&#xff0c;…

【HICE】基于httpd下的web服务器搭建

1.下载httpd&#xff1a; dnf install httpd -y 2.进入httpd中&#xff1a; cd /etc/httpd cd conf.d 3.编辑一个新的vhost.conf 4.重启httpd服务 systemctl restart httpd 5.关闭防火墙 systemctl stop firewalld setenforce 0 6.文本写入&#xff08;网页编辑&…

第6章:结构化开发方法

第6章&#xff1a;结构化开发方法 系统设计基本原理 1、抽象 抽象是一种设计技术&#xff0c;重点说明一个实体的本质方面&#xff0c;而忽略或者掩盖不是很重要或非本质的方面。 模块化 模块化是指将一个待开发的软件分解成若干个小的、简单的部分一模块&#xff0c;每个模…

尝试修改苍穹外卖为”李小罗餐厅“

学习苍穹外卖后&#xff0c;将其修改为自己所需要的项目&#xff0c;也是对苍穹外卖项目的加深理解 对项目之间的连接等关系进一步清晰&#xff0c;那么便开始吧 d1_开始修改 修改名字为”李小罗餐厅“ src\views\login\index.vue src\router.ts 结果展示 修改进来之后的展示…

从0到1手写vue源码

模版引擎 数组join法(字符串) es6反引号法(模版字符串换行) mustache (小胡子) 引入mustache 模版引擎的使用 mustache.render(templatestr,data)

【linux学习---1】点亮一个LED---驱动一个GPIO

文章目录 1、原理图找对应引脚2、IO复用3、IO配置4、GPIO配置5、GPIO时钟使能6、总结 1、原理图找对应引脚 从上图 可以看出&#xff0c; 蜂鸣器 接到了 BEEP 上&#xff0c; BEEP 就是 GPIO5_IO05 2、IO复用 查找IMX6UL参考手册 和 STM32一样&#xff0c;如果某个 IO 要作为…

ctfshow sql注入

开启其他注入 web221 limit注入 给出查询语句 以及过滤逻辑为空 获取数据库名即可 limit 用于控制返回结果行数 limit后面似乎只能跟PROCEDURE ANALYSE( ) 函数了 PROCEDURE ANALYSE( ) 函数用于分析查询结果的函数 参数是用来控制函数的 这个参数的位置 可以放入报错函数 原…

centos7.9 python3环境(virtualenv)搭建及所遇错误

人望山&#xff0c;鱼窥荷&#xff0c;真正喜欢想要的&#xff0c;没有一样可以轻易得到。 目录 # 1. 解决版本冲突问题--建议不要跳过(一定要查看软链接是否链接正确) # 2. python3(virtualenv)环境搭建 # 3. virtualenv常用命令 # 4. 所遇错误解析 ## 4.1 遇到 No modul…