ZhenYu's 知识库

外观

真机远程代码调试

约 764 字大约 3 分钟

调试远程调试Chrome DevTools

2026-04-15

概述

真机远程调试是指在真实设备上调试网页或应用，通过电脑上的开发者工具进行问题排查。

Chrome 远程调试

安卓设备调试

前提条件

  • Chrome 浏览器（电脑和手机）
  • USB 数据线
  • 安卓设备开启开发者选项和 USB 调试

连接步骤

# 1. 使用 USB 连接手机和电脑

# 2. 在手机端弹出的对话框中授权 USB 调试

# 3. 电脑端 Chrome 打开 chrome://inspect

# 4. 点击 "Port forwarding" 端口转发
#    添加: 8080 -> localhost:8080

# 5. 手机端用 Chrome 打开要调试的页面

# 6. 电脑端看到设备后点击 "inspect"

调试界面

┌─────────────────────────────────────┐
│  Elements    Sources    Network     │
├─────────────────────────────────────┤
│                                     │
│   [手机页面预览]                      │
│                                     │
├─────────────────────────────────────┤
│  Console                           │
│  > element.addEventListener...      │
└─────────────────────────────────────┘

iOS 设备调试

前提条件

  • macOS 系统
  • Safari 浏览器（电脑和手机）
  • 数据线连接

连接步骤

# 1. macOS Safari 偏好设置
#    勾选 "开发" 菜单

# 2. iOS 设备: 设置 → Safari → 高级 → Web 检查器 开启

# 3. USB 连接后，macOS Safari 开发菜单看到设备

# 4. 点击设备名称，选择要调试的页面

VS Code 调试

launch.json 配置

{
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "Launch Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/src"
    },
    {
      "type": "chrome",
      "request": "attach",
      "name": "Attach to Chrome",
      "port": 9222,
      "url": "http://localhost:3000/*"
    },
    {
      "type": "node",
      "request": "launch",
      "name": "Launch Node",
      "program": "${workspaceFolder}/server.js",
      "runtimeExecutable": "node"
    }
  ]
}

调试 Vue 项目

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug Vue",
  "url": "http://localhost:5173",
  "webRoot": "${workspaceFolder}",
  "sourceMaps": true,
  "sourceMapPathOverrides": {
    "webpack://src/.*": "${webRoot}/src/.*"
  }
}

调试 React 项目

{
  "type": "chrome",
  "request": "launch",
  "name": "Debug React",
  "url": "http://localhost:3000",
  "webRoot": "${workspaceFolder}/src",
  "reactReduxTools": true
}

无线调试

Android 无线调试

# 1. 手机通过 USB 连接电脑

# 2. 开启无线调试模式
adb tcpip 5555

# 3. 拔掉 USB，通过 IP 连接
adb connect <手机IP地址>:5555

# 4. 验证连接
adb devices

# 5. 打开 Chrome 访问 chrome://inspect

获取手机 IP

设置 → 关于手机 → 状态 → IP 地址
或
设置 → WLAN → 点击已连接网络 → IP 地址

Weinre 调试

适用于无法使用原生调试工具的场景：

# 1. 全局安装 weinre
npm install -g weinre

# 2. 启动服务
weinre --httpPort 8080 --boundHost -all-

# 3. 在要调试的页面添加脚本
# <script src="http://电脑IP:8080/target/target-script-min.js#anonymous"></script>

# 4. 浏览器打开 http://电脑IP:8080

常见问题

设备不显示

原因解决方案
USB 调试未开启设备设置中开启开发者选项和 USB 调试
授权未确认手机上确认授权弹窗
驱动问题Windows 安装 Google USB 驱动
端口被占用更换端口或关闭占用程序

页面不显示

原因解决方案
localhost 访问使用电脑 IP 地址
网络不通确认手机和电脑在同一网络
端口未转发Chrome 开启 Port forwarding

最佳实践

  1. 优先使用真机: 模拟器无法完全替代真机测试
  2. 无线调试: 减少插拔操作，提高效率
  3. 远程调试: 便于测试不同设备、网络环境
  4. 断点调试: 在 Sources 面板设置断点，逐步执行