如何用手机调试web、H5项目（访问localhost）

最新推荐文章于 2024-05-14 10:48:31 发布
最新推荐文章于 2024-05-14 10:48:31 发布
阅读量2.4k 收藏 2
点赞数 1
分类专栏： 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_39897978/article/details/104207838
版权

一、先确保在一个局域网下
二、打开cmd（Windows+R）输入ipconfig，找到WiFi的IP地址（192.168.XXXX.XXXX）每个人的不一样
在这里插入图片描述
三、如果是vue，直接输入提示行的network那一行就可以
在这里插入图片描述
就可以访问了！！

洳娅
关注
  • 1
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
手机端web调试打印控制台
04-27
标题"手机端web调试打印控制台"指的就是使用Chrome浏览器的开发者工具来对手机端的Web应用进行调试，包括查看和控制JavaScript的控制台输出，检查DOM结构，跟踪网络请求，以及性能分析等。这一功能极大地提高了...
h5 移动端空白项目 模板
10-09
"h5 移动端空白项目 模板"是一个为开发者准备的基础框架，它提供了一个干净、可定制的起点，方便快速构建H5应用程序。本文将详细讲解H5移动项目的构建基础、模板结构以及如何利用这个空白模板进行开发。 首先，了解...
如何配置项目访问地址为localhost:8080/
长镜头
03-18 1万+
1、修改conf目录下的server.xml配置 <Host appBase="webapps" autoDeploy="true" name="localhost" unpackWARs="true" xmlNamespaceAware="false" xmlValidation="false"> <!-- path留空代表访问域名
H5移动端调试
晓风
01-18 1万+
使用chrome的devToolsApp需要翻墙而且不稳定，这里提供两种在PC上调试移动端H5项目的方式给大家 方式1 win10系统可以直接使用edge浏览器调试： 1、在手机设置里将“开发人员选项”打开，一般是连续7次点击系统版本号，不同品牌打开方式有小差异 2、将手机通过USB连接电脑后，将usb设置为可传输文件 3、在浏览器打开需要调试的界面 4、在edge浏览器搜索栏输入edge://inspect 第1、2、3步没有问题的话，在界面上会显示出移动设备名以及可以调试的界面​​​​​​​ 5、点
手机端 H5 浏览器同频调试 (chrome://inspect)
最新发布
05-14 424
点击PC端 inspect 打开同步调试窗口 (示例)
关于H5 更改localhost为 IP地址后无法访问
weixin_49186680的博客
09-26 914
nginx部署h5项目 1. nginx部署h5项目 此为windows部署，liunx也类似的 1.1. 前言 部署h5项目还是很简单的，不过对小白来讲一开始可能也是一脸懵逼，这个简单教程针对的是从未部署过前后端分离前端项目的小白 1.2. 步骤 1.2.1. 下载nginx 1.如下图目录 1.2.2. 放入经过编译的h5项目 1.把经过编译的h5项目放入html文件夹下，可以在html里面创建一个单独文件夹，把内容放进去 2.如下图 1.2.3. 修改conf 1.进入conf目录，打开nginx
web前端h5真机调试
qq_26889291的博客
11-02 447
手机和电脑连接统一wifi（也就是同一个局域网） 本地跑起自己的项目，比如http://localhost:3333/是你项目运行起来的项目，并且输入链接可以在浏览器里访问 查看自己的电脑ip地址比如是10.1.225.55 在手机输入http://10.1.225.55:3333/就可以访问自己的项目了 ...
超简单手机连接 vue 项目 localhost
cimo的博客
03-08 418
1 启动你的 vue 项目 2 手机和电脑在同一局域网 3 输入 vue 项目启动时的网址
web/H5前端的简历模板
04-25
在进入Web/H5前端开发领域时，一份精心设计的简历是至关重要的，它不仅展示了你的专业技能，也是向潜在雇主展示个人风格和职业素养的重要工具。以下是对标题、描述和标签所涉及知识点的详细说明： 1. **前端开发**...
手机h5项目相关代码图片段
12-15
6. 测试与调试：在手机H5项目开发过程中，测试和调试至关重要。开发者可以借助Chrome开发者工具的移动模拟器，或者使用Safari的Web检查器在真实设备上进行测试，确保各功能在不同浏览器和设备上的兼容性。 7. 性能...
Android离线webview调试工具,开发H5混合应用必备
05-14
然而，对于H5页面的调试工作，开发者通常依赖于Chrome浏览器的开发者工具（Chrome DevTools），其中的`chrome://inspect`功能可以远程调试连接到同一网络的设备上的WebView。但在中国，由于网络限制，`chrome://...
Android Studio localhost访问不成功，需要改成IP
xiangduixuexi的博客
05-23 1432
1. 使用AVD（安卓虚拟机） https://blog.csdn.net/ll136078/article/details/11637461 2. 使用自己的手机 https://blog.csdn.net/u013125680/article/details/43890451
手机端访问本地服务的方式
ling的专栏
09-22 742
比如本地服务地址是 192.168.1.88，绑定的域名是a.com 1.在路由器上配置dnsserver 绑定解析：a.com 192.168.1.88 2.在手机的无线网络中，选择当前连接到wifi，并进入设置，把dns 222.222.222.222删除，写上路由器地址 192.168.1.1 即可。 ...
如何在小程序中调用本地接口，即localhost
m0_74317779的博客
10-12 2207
小程序调用本地接口
如何用手机访问电脑本地的localhost
你，若盛开的专栏
08-12 6579
手机访问电脑本地的localhost
h5项目手机端进行调试
h960822的博客
03-09 717
1：ctrl/window+r输入cmd回车，打开。1：在项目的配置环境中将host改为上面的Ip地址。2：搜索启动项目之后NetWork的地址便可以了。,查看本地ip， 选择IPv4地址。1：将手机与电脑连接同一无线。
手机访问电脑上的localhost网址以调试项目
分享--------留住生活
07-03 3666
当手机访问电脑上项目部署的路径时，出现长时间无法响应，访问失败的情况，可以试试以下几步： 一、首先检查手机的访问路径，将localhost替换为电脑的ip地址，win+R，输入cmd，打开命令提示符，然后输入ipconfig，找到本机电脑的ip地址。我的电脑ip是192.168.0.59。 二、检查电脑防火墙是否关闭，控制面板-->右上角查看方式改为大图标-->防火墙，如下图所......
如何用手机访问电脑本地localhost网页, 以调试项目?
热门推荐
zxxzxx23的博客
07-30 6万+
方法很简单:1. 先确保你的手机和电脑连在同一个局域网内. 2. Window + R, 然后输入 ipconfig,然后获取ip地址, 长这样: 192.168.XX.XX 3. 手机浏览器里输入这个地址: http://192.168.XX.XX:8080, it works注意: 如果上面方法仍然不行. 关掉360一类的杀毒软件, 再试下,还不行的话关掉防火墙, 因为这问题跟防火墙有
chrome浏览器调试手机端h5页面
05-08
随着移动互联网的发展，越来越多的网站和应用程序选择开发手机端H5页面以适应市场需求。但是开发手机端H5页面在不同的手机浏览器上会出现不同的问题，例如页面不兼容、加载速度慢等等。因此，我们需要使用Chrome浏览器来调试手机端H5页面。 首先，我们需要在chrome浏览器上安装“谷歌chrome浏览器开发者工具”，然后在手机端打开该页面，并且把手机的USB数据线连接在电脑上，然后在chrome浏览器上打开手机页面的调试界面，进行页面调试工作。 在调试界面里，我们可以通过“Elements”（元素）选项卡来检查页面源代码，查找页面中的元素标签、样式以及JavaScript代码等等。 在“Network”（网络）选项卡中，我们可以查看手机页面上所有请求和响应的详细信息，包括请求头、响应头、请求时间、响应时间等等。同时，我们还可以模拟缓慢的网络环境来测试页面的加载时间和响应时间。 在“Console”（控制台）选项卡中，我们可以使用JavaScript控制台来检查JavaScript代码的执行情况，编写JavaScript代码以及调试JavaScript代码等等。在控制台中，我们可以使用console.log()来输出信息，简单的代码调试问题基本可以在控制台中解决。 总之，chrome浏览器调试手机端H5页面是非常重要的。通过chrome浏览器的开发者工具，我们可以方便地检查和调试页面的源代码、网络请求、JavaScript代码以及其他相关内容，从而解决页面的兼容性、加载速度等问题。使用这些工具可以大大提高我们的开发效率，减少开发中的问题，保证H5页面的质量。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值