后端写了个 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 一行搞定：
brewinstallandroid-platform-tools# 验证adb version# Android Debug Bridge version 1.0.41Windows 去 Android 官网 下载，解压加 PATH 即可。
2.2 手机开启 USB 调试
- 设置 → 关于手机→ 连续点「版本号」7 次→ 出现"您已进入开发者模式"
- 设置 → 开发者选项→ 打开「USB 调试」
- USB 线连接手机和电脑
- 手机弹窗「允许 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:5173adb 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 serveradb 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可以把手机屏幕投到电脑上操作。调试不是必须的，但适合以下场景：
- 给同事演示/截图时不想举手机
- 需要录屏存档
- 手机屏幕太小看不清
# 安装brewinstallscrcpy# 启动（USB 连接）scrcpy常用参数：
scrcpy --max-size1024# 限制分辨率，减少延迟scrcpy --stay-awake# 投屏期间不息屏scrcpy --turn-screen-off# 关掉手机屏幕（省电，只看电脑）scrcpy--recordfile.mp4# 同时录屏⚠️scrcpy 只是投屏 + 操控，不能替代 Chrome DevTools。看日志、抓请求、断点调试还得用chrome://inspect。
六、实战场景：调试 Google Pay 集成
这是一个典型的"必须在手机上调试"的场景。Google Pay JS SDK 的isReadyToPay()在电脑浏览器上直接返回 false，按钮根本不渲染。
完整调试流程
# 1. 启动 Vite dev server（电脑上）cdfront-h5npmrun 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 步：
adb reverse tcp:5173 tcp:5173- 手机 Chrome 打开
localhost:5173/... - 电脑
chrome://inspect→ inspect
改代码即时生效、DevTools 全功能调试、Google Pay 正常唤起——这不比每次 build 部署再手机刷新强一万倍？
一根 USB 线 + 两条命令，手机就是你的真机调试器。别再对着电脑模拟器猜了——真机上跑一遍，10 分钟顶 1 小时。
