PC浏览器在线调试 Android 浏览器教程-chrome://inspect/#devices

使用 Chrome DevTools 远程调试 Android 设备上的网页

一、前置准备

1. 硬件准备

一台 PC（Windows / macOS / Linux）
一台 Android 手机或平板
一根 USB 数据线（确保支持数据传输，非纯充电线）

2. 软件准备

PC 端安装最新版 Google Chrome 浏览器
Android 设备安装 Chrome 浏览器（或其他基于 Chromium 的浏览器）
Windows 用户需安装对应手机的 USB 驱动（macOS 通常免驱）

二、Android 设备设置

1. 开启开发者选项

打开手机 设置 → 关于手机
连续点击 版本号 7 次（不同品牌位置略有不同）
看到提示「您已处于开发者模式」即可

常见路径：

小米：设置 → 我的设备 → 全部参数与信息 → MIUI 版本

华为：设置 → 关于手机 → 版本号

三星：设置 → 关于手机 → 软件信息 → 编译编号

OPPO/vivo：设置 → 关于手机 → 版本号

2. 开启 USB 调试

返回设置主页，找到 开发者选项（部分手机在「更多设置」中）
打开 USB 调试 开关
如果有 "仅充电"模式下允许 ADB 调试 选项，也建议开启

3. 连接 USB

用数据线将手机连接到电脑
手机上会弹出 「允许 USB 调试吗？」 的确认框
勾选 「始终允许来自这台计算机的调试」
点击允许

三、PC 端操作步骤

整体界面如图

1. 打开 Chrome 远程调试页面

在 PC 端 Chrome 浏览器地址栏输入：

复制代码

chrome://inspect/#devices

2. 确认设置

在页面中确保勾选了以下选项：

Discover USB devices --- 发现 USB 设备
Discover network targets --- 发现网络目标（可选）

3. 识别设备

如果一切正常，页面下方会显示你的 Android 设备名称以及设备上 Chrome 中已打开的标签页列表。

复制代码

设备名称: Xiaomi Mi 10
    Chrome (版本号)
        Tab: https://www.example.com
        Tab: https://www.google.com

4. 开始调试

对于已打开的标签页，点击对应条目下方的 inspect 链接，即可打开 DevTools 调试窗口。

你也可以在页面顶部的输入框中输入 URL，点击 Open 在手机上打开新页面并调试。

四、DevTools 调试功能

连接成功后，DevTools 提供与本地调试完全一致的能力：

功能	说明
Elements	查看和修改 DOM 结构与 CSS 样式，手机端实时预览
Console	执行 JavaScript，查看日志输出
Sources	查看源代码、设置断点、单步调试
Network	监控网络请求、查看请求/响应详情
Performance	性能分析、帧率监控
Application	查看 LocalStorage、SessionStorage、Cookie 等
Screencast	DevTools 窗口中实时投屏手机画面（可交互）

实用技巧

实时编辑样式：在 Elements 面板修改 CSS，手机端立即生效，适合调试移动端布局
模拟网络环境：在 Network 面板可以模拟 3G/慢速网络
远程控制台：在 Console 中可以直接执行代码，读取手机端页面变量
截图：使用 DevTools 的截图功能可以截取手机端页面

五、调试 WebView（App 内嵌网页）

除了 Chrome 浏览器，还可以调试 App 中的 WebView：

前提条件

App 必须开启了 WebView.setWebContentsDebuggingEnabled(true)
即 App 的开发者主动允许了 WebView 调试

操作方法

打开目标 App 中包含 WebView 的页面
在 PC 端 chrome://inspect/#devices 中，WebView 会单独列出
同样点击 inspect 即可调试

注意：正式发布的 App 通常会关闭 WebView 调试。如果看不到 WebView，说明 App 未开放此功能。

六、常见问题与排查

Q1: chrome://inspect 页面看不到设备

排查项	解决方案
USB 线问题	换一根确认支持数据传输的线
USB 调试未开启	重新检查开发者选项
未授权调试	查看手机是否有未处理的授权弹框
驱动缺失（Windows）	安装手机品牌官方驱动或通用 ADB 驱动
Chrome 版本过旧	更新 PC 和手机端 Chrome 到最新版本

Q2: 能看到设备但看不到标签页

确认手机端 Chrome 已打开网页
尝试关闭手机端 Chrome 后重新打开
拔掉 USB 重新连接

Q3: 点击 inspect 后白屏或加载失败

这通常是网络问题，DevTools 需要从 Google 服务器下载资源
解决方案：确保 PC 能正常访问 Google 服务，或使用科学上网
也可以尝试使用 chrome://inspect/?embedded=true 替代

Q4: ADB 端口被占用

如果你同时运行了 Android Studio 等工具，可能会出现 ADB 端口冲突：

bash 复制代码

# 查看 ADB 进程
adb devices

# 重启 ADB 服务
adb kill-server
adb start-server

七、无线调试（免 USB 线）

Chrome 91+ 和 Android 11+ 支持无线调试：

可以借助AndroidStudio中的插件，实现快速连接

在这里插入图片描述

步骤

在 Android 开发者选项 中开启 无线调试
点击进入，选择 使用配对码配对设备
手机上会显示一个 配对码 和 IP:端口
在 PC 终端执行：

bash 复制代码

# 先配对（使用手机上显示的配对端口和配对码）
adb pair <手机IP>:<配对端口>
# 输入配对码

# 再连接（使用手机上显示的连接端口）
adb connect <手机IP>:<连接端口>

连接成功后，chrome://inspect/#devices 中同样会显示设备

八、使用 Edge 调试（替代方案）

如果你使用 Microsoft Edge 浏览器，同样支持远程调试：

地址栏输入：edge://inspect/#devices
操作方式与 Chrome 完全一致

九、总结流程图

复制代码

手机开启开发者选项
        ↓
手机开启 USB 调试
        ↓
USB 连接电脑（手机点击"允许调试"）
        ↓
PC Chrome 打开 chrome://inspect/#devices
        ↓
看到设备和标签页列表
        ↓
点击 inspect → 开始调试

最后更新：2026-06-15