手机网页如何抓包?用 USB 连接电脑实现真机调试

在排查用户反馈的“功能异常”时,很多时候问题并非出在工具本身,而是网络环境的差异所致。

PC 端的网络往往充满了变数:公司内网策略、代理软件、Hosts 修改、DNS 污染等等。这些因素都可能导致请求失败,而在开发者自己的电脑上却难以复现。

为了排除这些干扰,我通常会选择使用手机(蜂窝数据)来进行测试。这是一个相对“纯净”、独立的网络环境。但随之而来的痛点是:手机浏览器虽然环境纯净,却缺乏 PC 浏览器那样强大的 Network 面板,无法直观看到具体的请求细节和报错信息。

本文介绍一种我常用的方案:让手机走纯净的网络环境,通过 USB 连接电脑,在 PC 端的 DevTools 中查看手机上的网络请求。

Android + Chrome DevTools适用于 Android 手机 + Windows / Mac 电脑。

手机端设置进入设置 → 关于手机,连续点击「版本号」7 次,开启开发者模式返回设置,进入开发者选项,启用「USB 调试」连接与调试用数据线连接手机和电脑

手机端切换 USB 模式为「传输文件(MTP)」或「传输照片(PTP)」

电脑端打开 Chrome,地址栏输入:

chrome://inspect/#devices勾选 Discover USB devices,等待设备出现

在手机 Chrome 打开目标页面,电脑端点击 Inspect

现在你可以在 DevTools 的 Network 标签页中,实时查看手机发出的所有请求。

iPhone + Safari Web Inspector适用于 iPhone + Mac 电脑(Windows 暂不支持)。

iPhone 设置进入设置 → Safari → 高级开启「网页检查器(Web Inspector)」Mac 设置打开 Safari,进入设置 → 高级勾选「在菜单栏中显示"开发"菜单」连接与调试用数据线连接 iPhone 和 Mac在 iPhone Safari 中打开目标页面Mac Safari 菜单栏点击开发 → [你的 iPhone 名称]选择当前正在浏览的网页,即可打开 Web Inspector 查看 Network常见问题排查Chrome Inspect 看不到设备USB 调试是物理连接行为,与网络无关。如果设备未显示,按以下顺序排查:

问题解决方法USB 模式为「仅充电」切换为「传输文件」或「传输照片」模式未授权调试拔线 → 解锁手机 → 重新插入 → 点击授权弹窗授权弹窗不出现电脑端运行 adb devices 触发授权请求数据线只能充电换用支持数据传输的数据线没有 adb 命令下载 Android Platform Tools解压到任意目录(如 C:\adb)在该目录下 Shift + 右键,选择「在此处打开终端」执行 adb devices,手机会弹出授权确认为什么不在手机上直接抓包?手机端抓包工具(如 Charles、Surge)需要安装证书、配置代理,操作成本高,还容易引入额外变量。

相比之下,USB 调试 + PC DevTools 的方案更轻量:保持手机的真实网络环境,同时获得完整的请求信息,是快速复现问题的首选。