手机网页如何抓包？用 USB 连接电脑实现真机调试
约 944 字大约 3 分钟...
在排查用户反馈的“功能异常”时，很多时候问题并非出在工具本身，而是网络环境的差异所致。
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 的方案更轻量：保持手机的真实网络环境，同时获得完整的请求信息，是快速复现问题的首选。