下面以最常见的 Android 手机 Windows/Mac 电脑为例，详细介绍两种方法

准备工作（必须完成）

1. 在手机上开启“开发者选项”和“USB调试”：
   • 打开“开发者选项”：进入手机的 设置 > 关于手机，连续点击 “版本号” 7次，直到出现提示“您已处于开发者模式”。
   • 开启“USB调试”：返回 设置 > 系统和更新 > 开发人员选项（或直接在设置中搜索“开发人员选项”），找到并开启 “USB调试”，在弹出的安全提示中点击“确定”。

USB 连接调试（推荐，最稳定）

这是最传统且可靠的方式。

步骤：

1. 连接手机：使用原装或高质量的数据线将手机与电脑连接。
2. 授权连接：此时手机会弹出“允许USB调试吗？”的提示，勾选“始终允许”，然后点击“确定”，这是关键一步。
3. 打开 Chrome 开发者工具：
   • 在电脑的 Chrome 浏览器中，打开你想要调试的网页（可以在地址栏输入 chrome://inspect 快速进入调试页面）。
   • 按 F12 或右键点击页面选择“检查”，打开开发者工具。
4. 找到并检查手机页面：
   • 点击开发者工具右上角的“更多”菜单（三个点竖排 ⋮ 或一个下拉箭头）。
   • 选择 “远程设备” （较新版本）或直接在地址栏访问 chrome://inspect/#devices。
5. 发现设备：
   • 确保 Discover USB devices 选项已开启，你的手机型号应该会出现在列表中。
   • 在手机上,使用 Chrome 或任何基于 Chromium 的浏览器（如 Edge、三星浏览器等） 打开你想要调试的网页。
6. 开始调试：
   • 几秒钟后,你刚刚在手机上打开的网页URL会出现在电脑 Chrome 的设备列表下方。
   • 点击该 URL 下方的 “inspect” 按钮。
   • 此时会弹出一个新的开发者工具窗口,这个窗口的内容就是你手机上的页面，你可以像调试电脑网页一样，查看元素、修改CSS、运行Console命令、监控网络请求等，在手机上的操作会实时同步到调试窗口。

无线连接调试（Wi-Fi，方便但可能有延迟）

无需数据线,但要求手机和电脑处于同一局域网（连接同一个Wi-Fi）。

步骤：

1. 首次仍需 USB 连接：先用USB线完成上述“方法一”的 步骤1-3，确保电脑能识别到手机。
2. 设置端口监听：
   • 在电脑 Chrome 的 chrome://inspect/#devices 页面，勾选 Discover network targets 并点击 Configure。
   • 添加你手机的端口,通常是 localhost:9222 （或其他指定端口，手机调试App可能会提供）。
3. 在手机上启动无线调试（不同手机路径略有不同）：
   • 进入手机的 开发人员选项。
   • 找到并进入 “无线调试” 或 “网络ADB调试”。
   • 开启它,并记下显示的 IP地址和端口号（168.1.100:40315）。
4. 在电脑上连接：
   • 打开电脑的命令行终端（CMD、PowerShell 或终端）。
   • 输入命令进行连接（使用你手机显示的IP和端口）：

     adb connect 192.168.1.100:40315

   • 如果看到 connected to 192.168.1.100:40315 表示成功。
5. 拔掉USB线，开始无线调试：
   • 现在可以拔掉数据线。
   • 刷新电脑 Chrome 的 chrome://inspect/#devices 页面，你的手机应该会以网络设备的形式出现。
   • 后续操作与方法一第6步完全相同,点击 inspect 即可。

针对 iOS 设备（iPhone / iPad）

由于系统限制,无法直接在 Chrome 中调试 Safari，你需要使用 苹果的 Safari 浏览器 进行调试：

1. 在 iOS 上：设置 > Safari浏览器 > 高级，开启 “网页检查器”。
2. 在 Mac 上：打开 Safari 浏览器，在菜单栏 Safari > 设置 > 高级，开启 “在菜单栏中显示‘开发’菜单”。
3. 用USB连接iPhone和Mac,在iPhone的Safari中打开网页。
4. 在Mac的Safari中,点击 开发 菜单，你会看到你的iPhone名称，选择你要调试的网页标签页，即可打开调试工具。

对于 Windows 用户，可以使用第三方商业软件（如 Weinre 的古老方案，或一些付费工具），但体验不佳，更推荐使用虚拟机安装MacOS，或直接使用iOS模拟器进行开发调试。

常见问题与技巧

• 找不到设备？
  • 检查数据线是否仅能充电,换一根线试试。
  • 重新插拔USB线,并在手机上重新授权。
  • 在电脑上安装手机品牌的官方驱动（如小米、华为的USB驱动）。
  • 重启电脑的 ADB 服务：在命令行输入 adb kill-server adb start-server。
• “inspect”按钮点击后白屏？
  • 通常是因为网络问题,可以尝试科学上网工具，因为Chrome DevTools的一些资源可能被墙。
  • 为Chrome设置代理或使用Hosts文件。
• 调试手机上的微信内置浏览器？
  • 原理相同,在手机上用微信打开网页（例如通过聊天框发链接）。
  • 在电脑 Chrome 的 chrome://inspect 中，找到 com.tencent.mm 之类的进程，点击其下的 inspect 即可，注意，微信可能对页面有一定限制。
• 实时屏幕投影：在 chrome://inspect 页面，除了 inspect，还有一个 “Screencast” 按钮，点击后可以将手机屏幕实时投影到电脑的调试窗口中，非常方便。

对于安卓用户,优先使用 USB 连接调试，一旦设置好无线调试，日常开发会非常便捷，iOS 用户则需依赖 Safari 的开发工具。

标签： Android手机 电脑连接