很高兴为您介绍谷歌浏览器连接手机进行调试的详细方法。这是前端开发和移动网页调试的必备技能

USB 连接和无线连接，推荐使用 USB 连接，因为它更稳定、安全且设置简单。

USB 连接调试（最常用、最推荐）

这种方式通过数据线将手机与电脑直接相连,稳定可靠。

准备工作：

1. 电脑上：安装最新版的 Google Chrome 浏览器。
2. 手机上：
   • 安装最新版的 Chrome 或 Edge 浏览器（用于调试网页）。
   • 如果是调试安卓 App 的 WebView，则需要安装该 App。
3. 开启手机开发者选项和 USB 调试（这是关键步骤）：
   • 开启开发者选项：进入手机 设置 > 关于手机，连续点击 “版本号” 7次，直到出现“您已处于开发者模式”的提示。
   • 开启 USB 调试：返回设置，进入 “系统” 或 “更多设置”，找到 “开发者选项”，打开 “USB 调试” 开关，弹出的警告框选择“确定”。
   • 注意：不同品牌手机（小米、华为、三星等）的菜单名称可能略有差异,但路径基本一致。

连接与调试步骤：

步骤 1：物理连接 用数据线将手机连接到电脑，在手机弹出的 “USB 用途” 或 “充电模式” 提示中，选择 “传输文件” 或 “MTP 模式”。

步骤 2：在电脑 Chrome 中调试

1. 在电脑上打开 Chrome，进入需要调试的网页（或让手机打开该网页）。

2. 按下快捷键 F12 或 Ctrl+Shift+I 打开 Chrome 开发者工具。

3. 点击开发者工具左上角的 “设备切换” 图标，或点击右上角的三个点 ⋮ > More tools > Remote devices。

4. 此时会打开一个 chrome://inspect/#devices 的新标签页，确保 “Discover USB devices” 选项已启用。

5. 在左侧 “Devices” 列表中，应该能看到您的手机型号，第一次连接时，需要在手机上授权电脑进行调试（弹出窗口点“确定”）。

6. 在下方会列出手机 Chrome 浏览器中打开的页面或 App 中的 WebView，点击您想调试的页面旁边的 “inspect” 按钮。

步骤 3：开始调试 点击 inspect 后，会弹出一个独立的开发者工具窗口,您就可以：

• 实时查看和修改 手机页面的 HTML、CSS。
• 运行 JavaScript 控制台命令。
• 模拟移动设备 触摸、网络状态（如 3G/离线）。
• 查看网络请求、性能分析 等,所有操作都会实时同步到手机屏幕上。

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

适用于手机不便连线或需要频繁切换的场景，要求手机和电脑在同一局域网（连接同一个 Wi-Fi）。

设置步骤：

步骤 1：准备工作

1. 确保手机和电脑连接同一个 Wi-Fi。
2. 完成上述 “USB 连接调试” 中的所有准备工作（安装 Chrome、开启 USB 调试）。

步骤 2：通过 USB 完成初始配对（关键步骤） 这是无线调试的关键，首次设置仍需 USB 线。

1. 用 USB 线连接手机和电脑,并完成授权。
2. 在电脑 Chrome 的 chrome://inspect/#devices 页面中，找到并启用 “Discover USB devices”,确保能看到手机。
3. 在同一页面，找到 “Port forwarding” 设置，勾选 “Enable port forwarding”，可以添加一个端口映射（8080:8080），但对于常规网页调试，通常不需要手动设置端口。
4. 更简单的方法是：在 “Network targets” 下方，点击 “Configure” 按钮，确保已勾选 “Enable network discovery”。

步骤 3：断开 USB 线，进行无线连接

1. 在手机端，进入 “开发者选项”，找到 “无线调试” 或 “Network ADB debugging” 并启用它。
2. （对于安卓 11+） 启用“无线调试”后，点击进入，选择 “使用配对码配对设备”，记下显示的 IP 地址、端口号和配对码。
3. 在电脑上，打开命令提示符或终端，使用以下命令配对（替换为您的信息）：

   adb pair <手机显示的IP地址:端口号>
   # adb pair 192.168.1.100:38473

   按提示输入配对码。

4. 配对成功后，再使用连接命令：

   adb connect <手机显示的IP地址:端口号>
   # adb connect 192.168.1.100:42429

5. 回到 Chrome 的 chrome://inspect/#devices 页面，稍等片刻，您的手机应该会出现在 “Remote Target” 列表中，之后的操作就和 USB 调试完全一样了。

常见问题与技巧

• 手机不显示在列表中？
  • 检查 USB 调试是否已开启。
  • 更换一条可靠的数据线,劣质线只能充电。
  • 在电脑上检查是否安装了手机驱动（Windows 用户可尝试安装小米助手、华为手机助手或通用 ADB 驱动）。
  • 重启电脑端的 ADB 服务：在开发者工具的 chrome://inspect 页面点击 “Restart adb”。
• 点击 “inspect” 空白或打不开？
  • 通常是网络问题，确保电脑能访问 Chrome 开发者工具的在线资源,有时需要科学上网。
  • 尝试在电脑 Chrome 中访问 chrome://flags，搜索并启用 “Developer Tools experiments”，然后重启 Chrome。
• 调试微信内置浏览器？
  • 原理相同，但需要打开微信的调试模式（在微信任意聊天窗口输入 debugx5.qq.com 并访问，进入信息页面开启“TBS 调试”），然后在 chrome://inspect 中查找 “微信” 或 “TBS” 相关目标。
• 保持手机屏幕常亮：在手机开发者选项中，开启 “保持唤醒状态”,防止调试时锁屏断开连接。

总结建议

• 新手和日常使用，强烈推荐 USB 连接方式，简单直接,成功率高。
• 无线调试更适合需要灵活移动设备或没有合适数据线的场景,但设置稍显复杂。
• 核心在于 chrome://inspect 这个页面,它是连接电脑与移动设备的桥梁。

按照以上步骤操作，您应该能顺利开始调试，如果在具体步骤中遇到问题，可以提供您的手机型号和电脑操作系统,以便获取更具体的帮助。