准备工作（两种方式都需要）

1. 在电脑上：确保你使用的是 Google Chrome 85 或更高版本。
2. 在手机上：
   • 安装 Chrome 浏览器（Android）或 Safari（iOS，但调试方式不同，下文会说明）。
   • 对于 Android：进入「设置」>「关于手机」，连续点击「版本号」7次以启用「开发者选项」，然后返回「设置」>「系统」>「开发者选项」，找到并开启 「USB 调试」。
   • 对于 iOS：需要在电脑上使用 Safari 进行调试,详见文末说明。

USB 连接调试（最稳定、最常用）

这种方式通过数据线连接，延迟低,非常可靠。

步骤：

1. 用 USB 数据线将手机连接到电脑，在手机上弹出的「允许 USB 调试吗？」提示框中，选择允许。
2. 在电脑上打开 Chrome 浏览器。
3. 在地址栏输入 chrome://inspect/#devices 并访问。
4. 确保 「Discover USB devices」 选项已勾选。
5. 稍等片刻，你的设备名称会出现在「Remote Target」列表中，下方会显示你手机 Chrome 浏览器中打开的页面，或者可以调试的 WebView 应用。
6. 找到你想调试的页面，点击其下方的 「inspect」 链接。
7. 此时会弹出一个独立的 DevTools 开发者工具窗口，这个窗口中的内容就是你手机页面的实时镜像，你可以：
   • 查看和修改 HTML/CSS。
   • 运行和调试 JavaScript。
   • 查看网络请求、控制台输出等。
   • 模拟手机传感器（如触摸、地理位置、横竖屏）。

常见问题：

• 设备不显示？ 检查 USB 调试是否已开启，数据线是否支持数据传输，或尝试重新插拔，可能需要安装手机对应的 USB 驱动（Windows 上较常见）。
• 页面不显示？ 确保手机上的 Chrome 正在运行你要调试的网页。

无线连接调试（无需数据线）

适用于不方便连线,或需要远程调试的场景。

步骤：

1. 连接同一网络：确保手机和电脑连接到同一个 Wi-Fi 网络。
2. 在电脑 Chrome 中：打开 chrome://inspect/#devices。
3. 开启远程调试：勾选 「Discover network targets」，然后点击其下方的 「Configure...」 按钮。
4. 添加端口：在弹出的对话框中，添加你手机的 IP 地址和端口号（168.1.100:9222），如何获取：
   • IP 地址：在手机的 Wi-Fi 设置中,查看当前连接网络的详细信息即可找到。
   • 端口号：默认为 9222,你也可以在手机端设置其他端口。
5. 在手机 Chrome 中启用调试：
   • 在手机 Chrome 地址栏输入：chrome://inspect 或 chrome://devices。
   • 点击 「Discover USB devices」 下方的 「Configure...」。
   • 输入你电脑的 IP 地址和端口号（168.1.50:9222），然后点击「完成」。
   • 你也可以在手机 Chrome 的 chrome://flags 中搜索并启用 「Developer tools remote debugging」 标志,然后重启浏览器以获得更稳定的连接。
6. 开始调试：回到电脑 Chrome 的 chrome://inspect/#devices 页面，你的手机和打开的页面应该会出现在列表中，点击 「inspect」 即可开始无线调试。

针对 iOS（iPhone/iPad）的调试说明

由于 iOS 系统的限制，无法使用 Chrome 直接调试 iOS 设备上的网页，必须使用 Safari 浏览器进行调试：

1. 在 iPhone/iPad 上：进入「设置」>「Safari」>「高级」，开启 「网页检查器」。
2. 在 Mac 电脑上：打开 Safari 浏览器，进入「Safari」>「设置」>「高级」，勾选「在菜单栏中显示“开发”菜单」。
3. 用数据线连接 iOS 设备到 Mac。
4. 在 iOS 设备的 Safari 中打开要调试的网页。
5. 在 Mac 的 Safari 中，点击顶部菜单栏的「开发」，你会看到你的设备名称，其子菜单中会显示打开的网页,点击即可弹出调试工具。

（对于 Windows/Linux 电脑，调试 iOS 需要借助第三方工具，如付费的 RemoteDebug iOS WebKit Adapter，过程较为复杂。）

总结与选择

建议：

• 对于 Android 日常开发，首选 USB 调试。
• 想摆脱线缆束缚或进行演示时，使用 无线调试。
• 调试 iOS 设备，必须使用 Mac 上的 Safari。

希望这个详细的指南能帮助你顺利连接手机进行调试！

标签： 准备工作 两种方式