电脑连接手机进行h5网络调试

已于 2022-07-08 16:46:21 修改
阅读量1.1k 收藏 1
点赞数
CC 4.0 BY-SA版权
文章标签： macos xcode ide
于 2022-05-11 15:25:26 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/wangshang1320/article/details/109304812
本文详细指导如何在局域网内通过Charles抓包工具，配置手机手动代理，查看手机发送的未加密网络请求。包括设置步骤、端口配置及注意事项。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

1. 保证在同一个局域网里面，手机电脑连接同一个wifi

2.下载并打开Charles抓包软件 进行端口号配置，端口配置在下面

3.设置手机wifi代理 改成手动代理，填写电脑端的ip地址，端口填charles里面配置的端口

 Charles中的端口配置：   Proxy->Proxy Setting

4.手机操作。电脑上面就能看到相应的地址请求的network或者console

注： 网站请求没有加密的才能看到，有些做了保护的就看不到了

wangshang1320
关注
政务钉钉 H5项目PC端手机端同步调试（前端）
m0_46554818的博客
11-29 2641
可能写的有些乱，大家包含 后端给了我一个代理啥的，重定向路由。 根据自己电脑打开 windows_64文件，cmd运行 .\ding.exe -config=.\ding.cfg -subdomain=ip(根据后台给的来) 端口(80,根据自己项目启动的端口来) 运行成功后是这样的 这里启动好以后就需要去前端配置了 由于pc和手机 登录返回值不一样 点击专有钉钉 浏览器头部是这样的 拿到auth_code 后用于请求接口 pc接口返回值： 手机端返回值 这里可以看到手机返回值和pc返回值不一
iOS Safari移动端H5页面调试全攻略：利用ios-webkit-debug-proxy进行内嵌H5页面调试
Cuckoosai的博客
05-25 2502
它充当了一个桥接器，将WebKit的远程调试协议转换为WebSocket协议，使得我们可以通过标准的Web调试工具（如Chrome DevTools）对iOS Safari和WebView进行调试。通过使用ios-webkit-debug-proxy工具，我们可以轻松地对iOS Safari移动端内嵌H5页面进行调试。在Devices页面，你应该能看到你的iOS设备，并且列出了设备上所有可以调试的Web页面。需要注意的是，由于iOS设备的限制，某些功能可能无法在调试时正常使用，如摄像头、麦克风等。
如何限制电脑PC端访问Web页面只能手机端才能访问
04-21
这个是我开发中用到的，就引用了，喜欢的拿走
通过inspect在电脑的Chrome上查看手机上的H5,以及通过vConsole调试移动端的h5
热门推荐
榴莲不好吃的专栏
05-24 1万+
通过inspect调试 首先打开手机的开发者模式，（在连续点击7次版本号，系统会提示已经打开开发者模式） 然后打开一个手机浏览器。 然后在电脑上打开chrome://inspect/#devices。这是就会出现手机上浏览器相应的链接，点击inspect弹出一个新窗口就可以查看代码了。还有就是电脑要可以翻墙的。 如果chrome://inspect/#devices调试H5的时候一直是一片...
PC端本地运行的H5 网页如何真机调试
weixin_54656536的博客
06-12 2198
PC端本地运行的H5 网页如何真机调试
h5项目手机端进行调试
h960822的博客
03-09 1434
1：ctrl/window+r输入cmd回车，打开。1：在项目的配置环境中将host改为上面的Ip地址。2：搜索启动项目之后NetWork的地址便可以了。,查看本地ip， 选择IPv4地址。1：将手机与电脑连接同一无线。
Vue移动端项目实现使用手机预览调试操作
11-20
1.电脑和手机连接到同一个WIFI a.台式电脑和手机同时链接一个路由器，使用同一个wifi； b.笔记本也可以直接启用一个wifi，手机链接笔记本wifi也可以； 2.查询本地IP地址 WIN+R，输入cmd回车，打开命令提示符，输入...
uniapp项目连接手机调试
m0_71933813的博客
04-01 2966
一.修改手机选项 1.打开开发者模式 在手机更多设置里的最下面找到“开发者选项”【若没有这个，则先在更多设置里找到“关于手机”——>“软件版本号”，连续点击“软件版本号”若干次】 出现“您已处于开发者模式，无需进行此操作”就已经打开开发者模式 2.找到手机设置，选择其他设置 5.设置手机与电脑属于同一个网 手机连接电脑热点，然后看到HBuilderX中“运行到手机或模拟器(N)”下显示有运行设备等字样，就说明成功了，就可以运行你的uni-app项目啦。 电脑连接手机热点 二.使用HBuilderX运
H5抓包——Android 使用电脑浏览器 DevTools调试WebView
麦小洛
03-27 2151
1、电脑通过数据线连接手机，开启USB调试（打开手机开发者选项） 2、打开待调试的H5 App，进入H5界面 3、打开电脑浏览器，调试界面入口 如果用edge浏览器 访问：edge://inspect/#devices
安卓手机联调Chrome调试H5页面
王工头的博客
04-16 5527
欢迎访问我的博客https://qqqww.com/，祝码农同胞们早日走上人生巅峰，迎娶白富美~~~ 文章目录1 前言2 debugx5.qq.com3 手机连接电脑并打开开发者选项和USB调试4 Chrome设置5 参考文章 1 前言 由于最近调试H5，客户那边只有一个链接，得想办法重现bug并且还要能调试，就用了这个方法，而且因为有点忙，此文档只做记录，所以没有配很详细的图，有原始参考...
h5远程调试
qq_37833745的博客
11-09 3060
H5开发远程调试篇 由于部分同学对远程调试不太了解，了解远程调试后，可以直接避免打alert来看数据的变化，直接在chrome浏览器内打断点，然后查看每一步数据的变化，可提高开发效率，定位问题快等优点，H5发布生产后也可通过debug调试来定位问题，快快来看看我们在各个平台是如何debug，加入我们吧！ 以下调试方式包括：微信内安卓、浏览器android和IOS的4种调试 1、微信----安卓远程调试 1、TBS studio调试（第二代）推荐使用 1.移动调试链接：404 2、微...
H5 移动端调试全攻略
我本可以容忍阳光，如果我不曾见过太阳，然而阳光已使我荒凉，成为更新的荒凉。
10-11 420
文章来源：http://jartto.wang/2018/11/01/mobile-debug/随着移动设备的高速发展，H5 开发也成为了 F2E 不可或缺的能力。而移动开发的重中之重就...
H5无法在移动端调试
DJIASHAOYE的博客
06-25 400
可能会出现以下问题 1.首先找到ipv4的地址（电脑和手机要连接同一个wifi）。可以在cmd输入 ipconfig就可以找到。 2.在项目里面的config里面找到index.js，修改里面的host地址，把ipv4的地址输入进去。 3.重启项目，把重启后的地址 例如：http://192.168.20.8888 生产一个二维码，手机扫码就可以在手机上进行查看了 ...
用手机调试h5项目
像鱼的博客
01-11 1867
手机调试vue项目，手机调试h5项目
用pc电脑调试安卓真机
m0_61476911的博客
07-19 1076
使用Edge浏览器调试安卓手机
手机usb连接电脑调试微信(WX)和H5,app
weixin_45433667的博客
09-25 1188
2.USB连接电脑进入调试模式，USB连接方式要选择为将设备作MIDI输入设备（如果没有这个选项可以先选择传文件，然后点击通知栏再进行切换）3.chrome需要翻墙， 如果不想翻墙使用edge浏览器打开 edge://inspect/#devices。2.usb连接过程中可能会有一个usb调试同意类似的弹窗，必须点击允许再用手机访问需要调试的页面。3.用chrome浏览器打开chrome://inspect/#devices。1.浏览器必须是最新版本，手机可以尝试重启usb开关和开发者模式，
兼容浏览器，切换PC端显示PC端，切换H5端显示H5端
最新发布
L_C_sunny的博客
07-24 980
浏览器H5端 (在浏览器H5端，切换PC端兼容显示PC端页面)PC端 （在浏览器PC端，切换H5端兼容显示H5端页面）兼容浏览器，切换PC端显示PC端，切换H5端显示H5端。中获取是否是那个端的。
手机连接电脑调试页面
weixin_30597269的博客
03-25 422
一、调试ios页面 用系统自带的Safari浏览器调试iOS的web页面，即电脑和手机都要有safari浏览器。 二、调试android页面 用google Chrome浏览器调试Android的web页面，即电脑和手机都要有chrome浏览器。 三、微信分享 dddd 转载于:https://www.cnblogs.com/camille666/p/mobile_pc_debug_we...
PC端兼容h5的新标签的方法
SenZendao的博客
09-08 1132
PC端兼容h5的新标签的方法，在页面中引入以下js文件: <script type="text/javascript" src="//cdn.bootcss.com/html5shiv/r29/html5.js"></script> 也可以下载到本地从本地导入...
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、付费专栏及课程。

余额充值