H5 在 Android 真机调试：从 Android Studio 到 chrome://inspect
在模拟器或桌面浏览器里写 H5，经常会出现「真机上才复现」的问题：刘海、键盘、WebView 内核差异、触摸滚动都不一样。最稳的做法，是直接把 Android 手机接到电脑上，用 Chrome 做远程调试。
下面按顺序走完四步，每一步都配了对应截图。
1）下载 Android Studio
先到官网下载并安装 Android Studio。它会带上 Android SDK、平台工具（含 adb）等，后面 USB 连接和调试都靠它们。
安装时保持默认勾选 SDK 相关组件即可。若之前只装过精简 adb，也可以继续用；新手直接装 Studio 最省事。
（Android Studio 下载/安装界面）
📝 补充说明：电脑需要能稳定用上 USB 数据线；尽量用原装或能传数据的线，充电线有时识别不到设备。
2）先打开 Android Studio
安装完成后，先打开 Android Studio，让它完成首次 SDK 检查与必要更新。很多人连上手机却搜不到设备，往往是 SDK / 平台工具还没准备好。
（打开 Android Studio，等待 SDK 就绪）
打开 Studio 并等到界面可用，再插手机。顺序搞反了，有时会出现驱动或 adb 还没起来、设备一直离线的情况。
可选验证：打开系统终端执行 adb version，能输出版本号即可继续。
3）用 USB 连接到手机
用 USB 线连接手机和电脑，然后在手机上完成这些设置：
1. 打开开发者选项
一般在「设置 → 关于手机」连续点击「版本号」多次，直到提示已进入开发者模式。
2. 打开 USB 调试
回到「设置 → 系统 → 开发者选项」，打开「USB 调试」。部分机型还要打开「USB 调试（安全设置）」或允许通过 USB 安装。
3. 授权这台电脑
插上后手机弹出「允许 USB 调试吗？」时，勾选始终允许并点确定。换线口或换电脑会再次询问。
（手机端开启 USB 调试并授权电脑）
电脑侧确认设备：在 Android Studio 打开 Device Manager（设备管理器）。真机连上且授权成功后，列表里会出现你的手机，类型为 Physical，状态为在线（图标带绿点即可）。没有设备、或一直离线时，重插线并确认手机已点「允许 USB 调试」。
（Device Manager 中看到 Physical 真机，即已连上）
手机用 Chrome（或可调试的 WebView / 内置浏览器）打开你的 H5 页面地址，保持页面在前台。
4）浏览器打开 chrome://inspect/#devices
在电脑上打开 Chrome，地址栏输入：
chrome://inspect/#devices
勾选 Discover USB devices。稍等片刻，页面会出现已连接的 Android 设备，以及设备上打开的网页/WebView 列表。找到你的 H5，点 inspect，就会弹出跟本机类似的开发者工具。
（chrome://inspect/#devices 中看到设备与 inspect 入口）
点开 inspect 后，左侧是手机画面镜像，右侧是 DevTools（Elements / Console / Network 等），可以像调试桌面页一样看 DOM、请求和报错。
（注入调试后的页面：真机画面 + DevTools）
可以做什么
Elements 看真机 DOM / 样式，Console 看报错，Network 看请求，Sensors/设备工具栏可辅助模拟尺寸与网络。
常见踩坑
列表为空：重插 USB、重开 USB 调试、重启 adb（adb kill-server 再 adb start-server）。仍不行就再确认 Android Studio / SDK 已打开，以及 Chrome 已勾选 Discover USB devices。
至此，你的 H5 就可以在 Android 真机上边点边看控制台了——比只靠模拟器放心得多。
❓ FAQ：看不到调试信息怎么办
chrome://inspect/#devices 里没有设备、没有页面，或点不了 inspect 时，先按下面两条排查。
1. 切换数据线的「用途 / 连接模式」
很多手机插上后默认是「仅充电」。下拉通知栏或弹窗里，把 USB 用途改成「文件传输 / MTP」或「传输文件」（部分机型写作 MIDI 之外的数据模式）。改完再回到 Android Studio 的 Device Manager 看真机是否仍在线，然后刷新 inspect 页面。
2. App 禁用了 WebView 调试
如果线、模式、adb 都正常，但列表里始终没有对应 WebView / 页面，也可能是应用本身关闭了调试：生产包常未调用 WebView.setWebContentsDebuggingEnabled(true)，或公司包通过配置禁用了远程调试。这时需要换可调试的 Debug 包、开发者包，或让原生侧临时打开 WebView 调试后再连 inspect。
📝 补充说明：系统 Chrome 打开的普通网页通常更容易出现在 inspect 里；嵌在 App 里的 H5 更依赖 WebView 调试开关，和「只开 USB 调试」不是一回事。
继续阅读
👇 同标签更多，或返回文章列表
上一篇：为什么需要 App 注入 --safe-area-inset-top 给 H5·下一篇：把系统做简单，而不是做完整