手机 Chrome 远程调试实战：adb + DevTools，localhost 就是你的测试服

后端写了个 H5 支付页，电脑上看得好好的，一扔到手机上------Google Pay 按钮没了。

打开手机浏览器 → 右键检查？没有右键。F12？手机没有 F12。

这时候你需要的不是一台新手机，而是一根 USB 线。

---

一、为什么要在手机上调试？

📱 本文只覆盖 Android（基于 adb）。iOS 用 Safari 的 Web Inspector（设置→Safari→高级→Web 检查器 + Mac Safari 开发者菜单），原理类似但工具完全不同。

不是所有功能都能在电脑浏览器上测试：

• Google Pay / Apple Pay：必须在移动端安全上下文中才能唤起
• 触摸事件 ：touchstart、touchmove、滑动手势，鼠标模拟不了真实体验
• WebView 适配：APP 内打开 H5 页面，布局、字体、键盘弹出行为都可能不同
• 真机性能：低端机上的卡顿、白屏，电脑上根本复现不了

电脑上 F12 调半天觉得完美，手机一看------"怎么长这样？"

---

二、准备工作

2.1 安装 adb

adb（Android Debug Bridge）是 Android 官方的命令行调试工具，Mac 一行搞定：

brew install android-platform-tools

# 验证
adb version
# Android Debug Bridge version 1.0.41

Windows 去 Android 官网 下载，解压加 PATH 即可。

2.2 手机开启 USB 调试

1. 设置 → 关于手机 → 连续点「版本号」7 次 → 出现"您已进入开发者模式"
2. 设置 → 开发者选项 → 打开「USB 调试」
3. USB 线连接手机和电脑
4. 手机弹窗「允许 USB 调试吗？」→ 点「允许」（建议勾选"始终允许"）

# 验证连接
adb devices

# 正常输出：
List of devices attached
1A2B3C4D    device

如果显示 unauthorized，解锁手机点允许；如果什么都没有，换根 USB 线试试------有些线只能充电不能传数据（别问我怎么知道的 😅）。

---

三、Chrome 远程调试（核心操作）

3.1 手机打开目标页面

手机 Chrome 浏览器输入你的 H5 页面 URL，打开。

3.2 电脑连接 DevTools

Mac 的 Chrome 地址栏输入：

chrome://inspect/#devices

等几秒，页面会列出手机上所有 Chrome 标签页 。找到你的目标页面，点 inspect：

弹出的 DevTools 窗口跟本地调试一模一样 ：Console 看日志、Elements 改样式、Network 抓请求、Sources 打断点------该有的全有。

---

四、让手机访问电脑的 dev server（杀手锏 🔥）

这是最实用的技巧。你不需要把代码部署到测试服务器，手机直接访问电脑上跑的 Vite dev server：

# 把电脑的 5173 端口"反向映射"到手机的 localhost:5173
adb reverse tcp:5173 tcp:5173

然后手机 Chrome 访问：

http://localhost:5173/pay.html?orderId=TEST

为什么这么香？

优势	说明
改代码实时生效	Vite HMR 热更新，改完保存手机自动刷新
不需要部署	省掉 build → scp → 解压 → 刷新的循环
Google Pay 可用	localhost 是安全上下文，不需要 HTTPS 证书
配合 DevTools	改代码 + 看手机效果 + 查日志，三屏联动

常用 adb reverse 命令

# 映射 Vite dev server
adb reverse tcp:5173 tcp:5173

# 映射后端 API（手机页面需要直连后端时）
adb reverse tcp:7000 tcp:7000

# 查看所有映射
adb reverse --list

# 清除所有映射
adb reverse --remove-all

💡 原理 ：adb reverse 把手机上 localhost:5173 的请求，通过 USB 隧道转发到电脑的 5173 端口。手机以为在访问自己，实际访问的是你电脑上的 dev server。

---

五、scrcpy 投屏（锦上添花）

scrcpy 可以把手机屏幕投到电脑上操作。调试不是必须的，但适合以下场景：

• 给同事演示/截图时不想举手机
• 需要录屏存档
• 手机屏幕太小看不清

# 安装
brew install scrcpy

# 启动（USB 连接）
scrcpy

常用参数：

scrcpy --max-size 1024         # 限制分辨率，减少延迟
scrcpy --stay-awake            # 投屏期间不息屏
scrcpy --turn-screen-off       # 关掉手机屏幕（省电，只看电脑）
scrcpy --record file.mp4       # 同时录屏

⚠️ scrcpy 只是投屏 + 操控 ，不能替代 Chrome DevTools。看日志、抓请求、断点调试还得用 chrome://inspect。

---

六、实战场景：调试 Google Pay 集成

这是一个典型的"必须在手机上调试"的场景。Google Pay JS SDK 的 isReadyToPay() 在电脑浏览器上直接返回 false，按钮根本不渲染。

完整调试流程

# 1. 启动 Vite dev server（电脑上）
cd front-h5
npm run dev

# 2. 映射端口
adb reverse tcp:5173 tcp:5173

# 3. 手机 Chrome 打开
http://localhost:5173/pay.html?orderId=TEST

# 4. 电脑 Chrome 打开
chrome://inspect/#devices

# 5. 找到手机页面，点 inspect
# 6. Console 里就能看到 [GPay] 相关日志了

常见问题

问题	原因	解决
Google Pay 按钮不显示	不是安全上下文	用 localhost（✓）或 https（✓），别用 http://域名（✗）
报 DEVELOPER_ERROR	HTTP 协议	同上，localhost 不需要 HTTPS
Console 没有日志	代码里有 host === 'localhost' 之类的开关	确认页面访问域是 localhost，否则相关日志可能被静默
chrome://inspect 看不到设备	USB 调试没开 / 线不对	先 adb devices 检查，重插线

---

七、调试工作流总结

┌──────────────┐     USB      ┌──────────────┐
│   Mac/PC     │◀────────────▶│  Android 手机 │
│              │              │              │
│ Vite :5173 ──┼─ adb reverse─┼──▶ localhost │
│              │              │   :5173      │
│ Chrome       │   inspect    │   Chrome     │
│ DevTools  ◀──┼──────────────┼── 目标页面    │
│              │              │              │
│ scrcpy    ◀──┼── 投屏(可选)  │              │
└──────────────┘              └──────────────┘

日常调试只需要 3 步：

1. adb reverse tcp:5173 tcp:5173
2. 手机 Chrome 打开 localhost:5173/...
3. 电脑 chrome://inspect → inspect

改代码即时生效、DevTools 全功能调试、Google Pay 正常唤起------这不比每次 build 部署再手机刷新强一万倍？

---

一根 USB 线 + 两条命令，手机就是你的真机调试器。 别再对着电脑模拟器猜了------真机上跑一遍，10 分钟顶 1 小时。