使用Chrome DevTools调试手机页面：USB和Wi-Fi两种方式详解

使用Chrome DevTools调试手机页面：USB和Wi-Fi两种方式详解

在前端开发过程中，调试手机页面是一个常见的需求。本文将详细介绍如何使用Chrome DevTools通过USB和Wi-Fi两种方式连接手机进行调试，帮助开发者更高效地完成移动端页面的开发和测试工作。

要在Chrome中通过chrome://inspect/#devices查看并调试手机上的网页，可以按照以下步骤操作：

确保设备连接

• 使用USB线将手机连接到电脑。
• 在手机上启用开发者选项和USB调试模式。通常可以在手机的“设置” -> “关于手机”中连续点击版本号几次以开启开发者选项，然后在“开发者选项”中找到并启用“USB调试”。

打开Chrome并进入Inspect页面

• 在电脑上打开Chrome浏览器。
• 输入chrome://inspect/#devices并回车。

查看已连接设备

• 如果手机成功连接并且USB调试已启用，你应该能在Remote target discovery部分看到你的设备。
• 该部分会列出所有正在运行的Web页面或应用，包括Chrome浏览器中的标签页和其他支持WebView的应用。

选择要调试的页面

• 找到你想要调试的页面（例如，手机浏览器中的某个标签页）。
• 点击页面旁边的inspect按钮，这将打开一个新的DevTools窗口，允许你查看和调试该页面的代码、网络请求等信息。

使用Wi-Fi进行调试（可选）

• 如果不想通过USB连接，也可以通过Wi-Fi进行调试。需要确保手机和电脑在同一网络下，并且在手机上启用“无线调试”选项（部分设备可能需要Android 11或更高版本）。
• 在chrome://inspect/#devices页面中点击“配置”，添加手机的IP地址和端口号进行连接。

注意事项

• 确保手机和电脑的时间同步，避免由于时间差异导致连接失败。
• 如果遇到问题，尝试重启ADB服务或者重新插拔USB线。

在chrome://inspect/#devices页面中通过Wi-Fi进行设备调试时，添加手机的IP地址和端口号进行连接的具体步骤如下：

前提条件

• 确保手机和电脑在同一Wi-Fi网络下。
• 手机已启用开发者选项和USB调试。
• 手机已启用无线调试（Wireless Debugging）（适用于Android 11及以上版本）。

步骤

1. 在手机上启用无线调试

• 打开手机的“设置”。
• 进入“开发者选项”。
• 启用“无线调试”。
• 如果有提示，选择“使用配对码配对设备”，并记下配对码和IP地址及端口（例如：192.168.1.100:5555）。

2. 使用USB连接进行初始配对（仅首次需要）

• 将手机通过USB线连接到电脑。
• 在电脑上打开命令行工具（Windows的CMD或PowerShell，macOS/Linux的终端）。
• 输入以下命令进行配对：

  adb pair <IP地址>:<端口号>
  

  例如：

  adb pair 192.168.1.100:5555
  

• 手机会弹出一个确认对话框，输入配对码并确认。

3. 断开USB并通过Wi-Fi连接

• 断开USB线。
• 在命令行中输入以下命令连接到设备：

  adb connect <IP地址>:<端口号>
  

  例如：

  adb connect 192.168.1.100:5555
  

4. 在Chrome中配置无线调试

• 打开Chrome浏览器，输入chrome://inspect/#devices并回车。
• 点击页面中的“配置”按钮。
• 在弹出的窗口中点击“添加网络位置”。
• 输入手机的IP地址和端口号（例如：ws://192.168.1.100:5555），然后点击“确定”。

5. 查看和调试设备

• 如果配置成功，你应该能在Remote target discovery部分看到你的设备。
• 找到你想要调试的页面或应用，点击旁边的inspect按钮，即可打开DevTools进行调试。

注意事项

• 保持Wi-Fi稳定：Wi-Fi连接可能会不如USB稳定，确保网络环境良好。
• 防火墙设置：确保电脑和手机的防火墙允许ADB和Chrome的调试流量。
• 断开USB后仍可调试：一旦通过USB成功配对，后续可以通过Wi-Fi直接连接，无需再次使用USB。

通过这些步骤，你可以方便地通过Wi-Fi在chrome://inspect/#devices页面中查看和调试手机上的网页。