谷歌浏览器（Chrome）的远程调试功能非常强大，主要用于调试移动设备（如手机、平板）上的网页，或远程调试其他计算机上的浏览器。以下是详细步骤

远程调试安卓设备（通过USB）

这是最常见的场景，用于调试手机/平板上Chrome或WebView中的网页。

准备工作

1. 设备要求：

   • 安卓设备系统版本 ≥ 4.4（Chrome调试需 ≥ 5.0）。
   • 电脑已安装最新版Chrome浏览器。
   • 准备一根稳定的USB数据线。

2. 开启设备开发者选项：

   • 进入手机的 设置 → 关于手机 → 版本号，连续点击7次“版本号”开启开发者模式。
   • 返回设置，进入 系统 → 开发者选项，开启 “USB调试”。

调试步骤

1. 连接设备：

   • 用USB线连接手机和电脑。
   • 手机上弹窗提示“允许USB调试吗？”时，点击 确定。

2. 电脑端操作：

   • 打开电脑上的Chrome，输入地址栏：
     chrome://inspect 或 chrome://inspect/#devices。
   • 确保 “Discover USB devices” 选项已勾选。

3. 开始调试：

   • 在手机上用Chrome打开需要调试的网页。
   • 电脑的 chrome://inspect 页面会显示设备名称和网页列表，点击对应网页下方的 “inspect”。
   • 会弹出独立的 DevTools窗口（类似电脑端的调试工具），即可实时调试手机上的页面（修改DOM、CSS、查看Console等）。

常见问题

• 设备不显示：尝试更换USB线或端口，重新插拔,或在电脑上安装手机驱动。
• 无法识别：在开发者选项中关闭再开启USB调试。
• 需注意：首次连接可能需要在手机上安装Chrome远程调试驱动。

远程调试（通过网络）

适用于调试同一局域网内其他电脑/设备上的Chrome。

被调试端（远程设备）设置

1. 启动Chrome时添加命令行参数：

   chrome.exe --remote-debugging-port=9222 --user-data-dir="C:\temp\chrome_debug"

   （--user-data-dir 可避免影响现有浏览器数据）

2. 确保防火墙允许该端口（如9222）。

调试端（本地电脑）操作

1. 打开本地Chrome，访问：
   http://远程设备IP:9222（如 http://192.168.1.100:9222）。
2. 页面会显示可调试的标签页列表,点击即可打开DevTools进行调试。

远程调试iOS设备（需Mac）

1. 在Mac上打开Safari，进入 偏好设置 → 高级 → 勾选“在菜单栏中显示开发菜单”。
2. iOS设备进入 设置 → Safari → 高级 → 打开“Web检查器”。
3. 用USB连接iPhone和Mac,在iPhone上打开Safari浏览网页。
4. 在Mac的Safari菜单栏点击 “开发” → 选择设备名称 → 点击网页名称,即可调试。

注：Windows/Linux无法直接调试iOS Safari，可通过第三方工具（如Remotedebug-ios-webkit-adapter）桥接到Chrome DevTools。

使用Chrome DevTools Protocol（CDP）进行高级控制

适用于自动化测试或自定义调试工具（如Puppeteer）：

• 通过WebSocket连接到 ws://localhost:9222/devtools/browser/ 直接发送CDP命令。
• 工具推荐：Puppeteer、Playwright。

注意事项

1. 安全：远程调试端口不要暴露在公网。
2. 版本匹配：Chrome浏览器版本尽量保持一致。
3. HTTPS问题：若手机网页为HTTPS,电脑需访问相同域名避免混合内容错误。

通过以上方法，你可以灵活调试移动端页面、PWA应用或跨设备网页问题。