Chrome DevTools 远程调试需设备正确连接并开启调试通道：Android 要开启 USB 调试、信任电脑、安装 ADB 驱动（Windows）、确保 adb devices 显示 device 状态；Chrome 需启用远程调试且页面须用 Chrome for Android 通过 http/https 协议打开；iOS 则依赖 macOS Safari 的 Web Inspector，需两端分别开启对应选项并用数据线连接。
Chrome DevTools 远程调试是排查移动端 HTML 页面问题最直接的方式，前提是设备已正确连接且调试通道打开——否则 chrome://inspect 页面永远显示为空或“Discovering devices…”。
Android 设备需开启 USB 调试并信任电脑
这是整个链路的起点，跳过或配置错误会导致 Chrome 完全识别不到设备：
- 在 Android 设置中进入「关于手机」，连续点击「版本号」7 次激活开发者选项
- 返回设置主菜单，进入「开发者选项」，开启「USB 调试」
- 用 USB 线连接电脑后，手机弹出「允许 USB 调试吗？」对话框，务必勾选「始终允许来自这台计算机」再点确定；若忽略此步，每次重连都要手动确认，且部分机型（如小米、华为）会因未信任而静默拒绝调试端口
- Windows 用户还需安装对应厂商的 ADB 驱动（仅首次需要），Mac/Linux 一般免驱
Chrome 必须启用 adb 并确认设备在线
Chrome 依赖系统级 adb 工具发现和通信设备，不是插上线就自动可用：
- 确保已安装
adb（可通过终端运行adb version验证） - 运行
adb devices，输出应包含一行类似XXXXXX device的状态（不是unauthorized或空） - 若无响应，尝试
adb kill-server && adb start-server重置服务 - Chrome 启动时需带
--remote-debugging-port=9222参数（桌面版默认不启用远程调试接口），但更稳妥的做法是：直接在已打开的 Chrome 中访问chrome://flags/#enable-devtools-experiments，启用实验功能后再打开chrome://inspect
真机访问页面后，chrome://inspect 不显示目标标签页
常见于页面未在 Chrome for Android 中打开，或启用了干扰调试的配置：
立即学习“前端免费学习笔记（深入）”；
- 必须使用 Chrome for Android 打开页面（非系统浏览器、微信内置浏览器、QQ 浏览器等均不可见）
- 确保 Chrome for Android 设置中「开发者工具」已开启（路径：设置 → 高级 → 开发者工具 → 启用）
- 页面 URL 必须为
http://或https://协议；file://本地 HTML 文件默认被屏蔽，需启动本地 HTTP 服务（如python3 -m http.server 8000）后用http://localhost:8000/xxx.html访问 - 某些企业 MDM 或家长控制软件会禁用调试接口，可临时关闭测试
iOS Safari 远程调试需 macOS + Safari 技术栈配合
苹果生态不走 ADB，而是通过 Safari Web Inspector 实现，且仅限 macOS 主机：
- iOS 端：设置 → Safari → 高级 → 开启「Web 检查器」
- macOS 端：Safari → 偏好设置 → 高级 → 勾选「在菜单栏中显示“开发”菜单」
- 用数据线连接 iPhone，iOS 上打开 Safari 并访问目标页面，macOS Safari 的「开发」菜单中会出现设备名，下拉即可看到当前页面标签，点击即可唤起 Web Inspector
- 注意：iOS 16+ 对本地
localhost页面支持不稳定，建议用局域网 IP（如http://192.168.1.100:8000）替代；HTTPS 页面需证书信任，HTTP 页面才可直连调试
真正卡住人的往往不是步骤本身，而是某处“已开启”的开关其实没生效——比如 Android 上点了 USB 调试却忘了点「允许」弹窗，或者 iOS 开了 Web 检查器但 macOS Safari 没开「开发」菜单。调试通道是端到端的信任链，断一环，chrome://inspect 就只是个空页面。
