根据不同的场景，主要有以下几种方法，我将从最常见到最复杂进行介绍

调试移动设备上的浏览器（最常见）

这是在电脑上调试手机网页（H5页面）的标准方法。

准备工作：

1. 电脑端：安装最新版 Chrome 浏览器。
2. 手机端：安装 Chrome 浏览器（Android）或 Safari（iOS，Mac电脑调试）。
3. 连接线：一条可传输数据的 USB 线（仅Android需要，iOS不需要线但需要Mac）。
4. Android 额外步骤：在手机上开启“开发者选项”和“USB调试”。
   • 进入“设置” -> “关于手机”，连续点击“版本号”7次，激活开发者选项。
   • 返回“设置” -> “系统” -> “开发者选项”，找到并开启 “USB调试”。

操作步骤（以 Android 为例）：

1. 连接设备：用 USB 线将手机连接到电脑。
2. 授权连接：在手机弹出的“允许USB调试吗？”对话框中，点击 “确定”。
3. 启动电脑端Chrome：在电脑上打开 Chrome。
4. 打开DevTools：按 F12 或 Ctrl+Shift+I 打开开发者工具。
5. 进入远程调试：
   • 在 DevTools 中，点击右上角的 三个点 (⋮) 或 齿轮图标。
   • 选择 “更多工具” -> “远程设备”。
   • 或者,直接在地址栏输入 chrome://inspect/#devices 并访问。
6. 发现设备：
   • 确保顶部的 “Discover USB devices” 已开启。
   • 你的手机型号应该会出现在“Remote Target”列表中，第一次可能需要等待几秒。
7. 开始调试：
   • 在手机上打开 Chrome，访问你想调试的网页。
   • 在电脑的 chrome://inspect 页面，你会看到该网页的URL和一个 “inspect” 按钮。
   • 点击 “inspect”，会弹出一个独立的 DevTools 窗口，这就是你手机的页面！现在你可以像调试电脑网页一样，查看元素、网络请求、控制台日志等。

无线调试（Android 11+）

避免使用USB线,通过Wi-Fi进行调试。

操作步骤：

1. 首次连接：仍需先用 USB 线按照 方法一 的步骤连接手机和电脑。
2. 启用无线调试：
   • 在电脑的 chrome://inspect 页面，找到你的设备。
   • 勾选设备旁的 “Discover USB devices” 下方可能会出现 “Port forwarding” 设置，但更简单的方法是使用 Android 系统自带的无线调试：
     • 在手机的“开发者选项”中，找到 “无线调试” 并开启它。
     • 选择“使用配对码配对设备”，记下配对码、IP地址和端口。
3. 在Chrome中配对：
   • 在 chrome://inspect 页面，点击 “Pair devices over network”。
   • 输入手机上的 IP 地址和端口号，点击“Pair”。
   • 在弹出的对话框中输入配对码。
4. 断开USB，开始无线调试：
   • 配对成功后,就可以拔掉 USB 线。
   • 只要手机和电脑在同一局域网下,你的手机就会出现在“Remote Target”的 “Network devices” 列表中，之后点击“inspect”即可。

调试远程计算机/无头浏览器

这用于调试运行在服务器、虚拟机或另一台电脑上的 Chrome 实例（常用于自动化测试、爬虫调试）。

核心原理：启动 Chrome 时开启远程调试端口。

在需要被调试的机器上（远程主机），以特殊命令启动 Chrome：

命令行启动示例：

chrome --remote-debugging-port=9222 --user-data-dir=/tmp/chrome-profile

• --remote-debugging-port=9222：指定调试端口（9222是默认端口）。
• --user-data-dir=...：建议使用新的用户数据目录，避免影响你常用的浏览器。

操作步骤：

1. 在远程主机上：执行上面的命令启动 Chrome。
2. 在本地电脑上：
   • 打开你的 Chrome 浏览器。
   • 访问 chrome://inspect。
   • 点击 “Configure…” 按钮。
   • 在弹出的对话框中,添加远程主机的地址和端口，168.1.100:9222（如果是本机可用 localhost:9222）。
   • 点击 “Done”。
3. 开始调试：
   • 如果网络和防火墙设置正确（确保9222端口可访问），远程主机上打开的标签页会出现在 chrome://inspect 的列表中。
   • 点击对应的 “inspect” 即可开始远程调试。

常见问题与技巧

• 设备不显示？
  • 检查USB线：确保线可以传输数据，不只是充电。
  • 检查驱动：Windows可能需要安装手机驱动程序。
  • 重新授权：拔掉USB线，在手机上关闭再重新开启“USB调试”，然后重连。
  • 检查Chrome版本：确保手机和电脑的 Chrome 都是较新版本。
• iOS 设备如何调试？
  • 需要使用 Mac 电脑 和 Safari 浏览器。
  • iPhone 上：设置 -> Safari -> 高级 -> 开启“Web检查器”。
  • Mac上：打开 Safari，在“偏好设置” -> “高级”中开启“在菜单栏中显示‘开发’菜单”。
  • 用USB连接iPhone和Mac,在Safari的“开发”菜单中就能看到你的iPhone和设备上打开的Safari页面。
• “inspect”窗口空白或无法连接？
  • 可能是网络问题（无线调试时），或防火墙/安全软件阻止了端口连接。
  • 尝试关闭所有Chrome实例,重新启动。
  • 对于远程调试,确保目标端口（如9222）已在防火墙中放行。

总结表格

选择最适合你场景的方法,开始你的远程调试吧！

标签： 场景 方法