在电脑上的 Chrome 浏览器中，通过开发者工具远程连接和控制手机浏览器中打开的网页，实现实时查看、修改代码、监控网络请求等操作

第一部分：Android 设备调试（标准且最流畅的方式）

这是 Google 官方支持的原生方案，体验最好。

准备工作：

1. 一条 USB 数据线（最好是手机原装线，传输稳定）。
2. 电脑上安装最新版 Chrome 浏览器。
3. 手机上安装最新版 Chrome 浏览器（或任何基于 Chromium 的浏览器，如 Edge、Brave）。
4. 打开手机的 USB 调试模式（这是关键步骤）：
   • 进入手机 设置 > 关于手机，连续点击 “版本号” 7次，直到出现“您已处于开发者模式”的提示。
   • 返回设置,进入新出现的 “开发者选项”。
   • 找到并开启 “USB 调试”。
   • （部分手机可能需要额外开启“允许通过USB调试修改权限”等选项）。

连接与调试步骤：

1. 物理连接：

   • 用 USB 线将手机连接到电脑。
   • 手机屏幕上可能会弹出 “允许USB调试吗？” 的提示，务必勾选“始终允许”并点击“确定”。

2. 电脑端 Chrome 设置：

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

3. 建立连接：

   • 在 chrome://inspect 页面，你应该会在左侧看到你的手机型号。
   • 第一次连接时,可能需要点击旁边的 “Inspect” 按钮上方的 “允许” 或 “授权” 提示。
   • 在手机上打开 Chrome，访问你想要调试的网页（可以是本地服务器地址，如 http://192.168.1.100:8080，也可以是线上网址）。

4. 开始调试：

   • 回到电脑的 chrome://inspect 页面，在下方列表中，你会看到手机 Chrome 中打开的网页标签页。
   • 点击对应网页下方的 “inspect” 按钮。
   • 一个全新的 开发者工具窗口 将会弹出，这个窗口就是你手机页面的“镜像”！你可以在这里：
     • 查看和修改 HTML/CSS（Elements 面板）。
     • 运行 JavaScript 命令（Console 面板）。
     • 查看网络请求（Network 面板）。
     • 模拟手机触摸事件等。
     • 实时看到修改在手机上的效果。

第二部分：iOS 设备调试（借助 Safari）

由于 iOS 的限制，无法直接用 Chrome 调试 Safari，需要使用 macOS 上的 Safari 浏览器进行调试。

准备工作：

1. 一条 USB 数据线。
2. 一台 Mac 电脑（这是必须的，Windows/Linux 无法使用官方方案）。
3. iPhone/iPad 上：进入 设置 > Safari 浏览器 > 高级，开启 “网页检查器”。
4. Mac 电脑上：打开 Safari 浏览器，进入 偏好设置 (Preferences) > 高级，勾选 “在菜单栏中显示‘开发’菜单”。

连接与调试步骤：

1. 用 USB 线将 iOS 设备连接到 Mac。
2. 在 iOS 设备的 设置 > Safari 浏览器 > 高级 中，确保连接的电脑被列出并已启用。
3. 在 iOS 的 Safari 中打开要调试的网页。
4. 在 Mac 的 Safari 中，从顶部的 “开发” (Develop) 菜单中，你会看到你的设备名称，其子菜单里会列出设备上 Safari 所有打开的标签页。
5. 点击想要调试的网页,就会弹出一个 Safari 开发者工具窗口，功能与 Chrome DevTools 类似。

对于 Windows/Linux 用户调试 iOS：

你需要使用第三方工具,最流行的是：

• Remotedebug-ios-webkit-adapter：一个开源适配器，它可以将 Safari 的调试协议转换成 Chrome 可理解的协议，从而让你能在 Windows/Linux 的 Chrome 中调试 iOS Safari。
  • 需要安装 iTunes（用于驱动）和 Node.js。
  • 配置过程相对复杂,建议查阅其 GitHub 主页的详细说明。

第三部分：无线调试（无需数据线，Android 11+）

如果你觉得连线麻烦,Android 11 及以上版本支持完全的无线调试。

步骤：

1. 确保手机和电脑在 同一个 Wi-Fi 网络 下。
2. 在手机上进入 开发者选项，找到 “无线调试” 并开启。
3. 点击 “无线调试” 进入详情页，选择 “使用配对码配对设备”。
4. 在电脑 Chrome 的 chrome://inspect 页面，点击 “Discover network targets” 旁的 “Configure…” 按钮。
5. 在弹出的窗口中,添加手机屏幕上显示的 IP 地址和端口号（如 168.1.100:40357）。
6. chrome://inspect 页面会显示一个 “Pair with QR code/ Pairing code” 的按钮，点击它。
7. 输入手机上显示的 6位数配对码，完成配对。
8. 之后,只要手机和电脑在同一网络，并且手机上的无线调试处于开启状态，你就可以在 chrome://inspect 中像使用 USB 一样无线调试了，非常方便。

常见问题与技巧

• 设备连接不上？
  • 检查 USB 线（尝试换一根原装线）。
  • 检查手机是否授权了 USB 调试。
  • 在电脑上重新安装手机驱动程序（对于某些安卓品牌如华为、小米，可能需要安装对应的手机助手或驱动）。
  • 重启电脑端的 Chrome 和手机。
• 看不到 inspect 按钮？
  • 确保手机上 Chrome 访问的页面不是 Chrome 的内部页面（如 chrome:// 开头的）。
  • 如果是本地开发服务器（如 localhost:3000），手机无法直接访问 localhost，你需要使用电脑的局域网 IP 地址（如 http://192.168.x.x:3000）在手机上访问。
  • 可以尝试关闭再重新打开手机 Chrome 的标签页。
• 调试混合应用（Hybrid App）或 WebView？
  • 在 chrome://inspect 页面，你不仅能看到 Chrome 标签页，还能看到 App 内嵌的 WebView。
  • 前提是 App 的 WebView 已启用调试（通常需要在开发者选项中开启，或由 App 开发者配置）。

对于绝大多数 Android 前端调试，USB 连接 + chrome://inspect 是最直接高效的方案，掌握这个技能将极大提升你的移动端开发与排错效率。

标签： Chrome远程调试 移动端调试