真机远程代码调试
约 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 |
最佳实践
- 优先使用真机: 模拟器无法完全替代真机测试
- 无线调试: 减少插拔操作,提高效率
- 远程调试: 便于测试不同设备、网络环境
- 断点调试: 在 Sources 面板设置断点,逐步执行
