谷歌浏览器（Chrome）可以通过 Chrome DevTools 的远程调试功能 连接 Android 手机进行网页调试。以下是详细步骤

准备工作

1. 电脑端：

   

   • 安装最新版 Google Chrome。
   • 如需无线调试,建议安装 Android SDK Platform-Tools（包含 ADB 工具）。

2. 手机端：

   • 安装最新版 Chrome for Android。
   • 启用 开发者选项 和 USB 调试：
     • 进入手机「设置 → 关于手机」，连续点击「版本号」7 次开启开发者选项。
     • 返回「设置 → 系统 → 开发者选项」，打开 USB 调试。

USB 有线连接调试

1. 用 USB 数据线连接手机和电脑。
2. 在手机上允许 USB 调试授权（弹出提示时点击确认）。
3. 打开电脑 Chrome，输入地址栏：

   chrome://inspect/#devices

4. 确保 Discover USB devices 选项已开启。
5. 稍等片刻,页面会显示已连接的手机型号，下方列出手机中 Chrome 打开的网页或 WebView。
6. 点击对应网页下的 「Inspect」 按钮，即可打开 DevTools 进行调试。

提示：若未看到设备，尝试重新插拔 USB 线，或更换数据线（确保能传输数据）。

无线网络调试（无需 USB 线）

通过 ADB 连接

1. 确保手机和电脑连接同一局域网。
2. 首次设置仍需 USB 连接：
   • 用 USB 连接手机和电脑。
   • 在电脑终端执行：

     adb devices  # 确认设备已连接
     adb tcpip 5555  # 切换到 TCP/IP 模式

   • 断开 USB 线。
3. 获取手机 IP 地址（通常在「设置 → WLAN → 当前网络」中查看）。
4. 在电脑终端执行：

   adb connect 手机IP地址:5555

5. 在 chrome://inspect 中即可看到无线连接的设备。

Chrome 自带无线调试（Android 11+）

1. 在手机开发者选项中开启 「无线调试」。
2. 点击无线调试 → 配对码配对，记录 IP 地址和端口号。
3. 在电脑 Chrome 的 chrome://inspect 中点击 「Configure」，添加对应 IP 和端口。
4. 刷新后即可看到设备。

调试功能示例

• 实时修改：修改手机网页的 HTML/CSS，实时预览效果。
• 控制台输出：查看手机端 Console 日志。
• 模拟移动设备：在电脑 DevTools 点击切换设备图标，可模拟触摸、传感器等。
• 网络分析：监控手机网页的网络请求、加载性能。

常见问题

1. 设备不显示：

   • 检查 USB 调试是否开启。
   • 在开发者选项中尝试启用 「USB 安装」、「USB 调试（安全设置）」 等选项。
   • 重启电脑 Chrome 和手机 Chrome。

2. 「Inspect」按钮灰色/无法点击：

   • 关闭手机 Chrome 的省电模式。
   • 在手机 Chrome 中访问 chrome://flags，搜索并启用 「Developer Tools」 相关选项。

3. 无线连接不稳定：

   确保电脑和手机在同一 Wi-Fi 下，网络延迟较低。