Skip to content

在安卓手机上使用 chrome://inspect 进行真机调试网页,可以按照以下步骤操作:


一、前提条件

  1. 安装 Chrome 浏览器

    • 在电脑上安装最新版的 Google Chrome 浏览器。
    • 在手机上也安装 Chrome 浏览器(或基于 Chromium 的浏览器)。
  2. 启用开发者模式 & USB 调试

    • 在手机上 设置关于手机 → 连续点击 版本号 7 次,开启 开发者模式
    • 进入 开发者选项,找到 USB 调试 并开启。

二、开始调试

1. 连接手机到电脑

  • 使用 USB 数据线 连接手机和电脑(建议使用原装数据线)。
  • 在手机弹出的 “允许 USB 调试” 窗口中选择 允许

2. 在 Chrome 浏览器打开调试页面

  • 电脑 的 Chrome 浏览器中打开:
    chrome://inspect
  • Devices(设备) 面板中,可以看到已连接的安卓设备及其打开的网页。

3. 允许调试

  • 在手机 Chrome 中打开 要调试的网页
  • 在电脑端 chrome://inspect 界面中,找到该页面并点击 Inspect(检查)

4. 使用开发者工具

  • 进入调试界面后,可以使用 Chrome 开发者工具 进行:
    • 调试 JavaScript 代码
    • 查看 DOM 结构
    • 调整 CSS
    • 模拟移动端设备

三、常见问题

1. 电脑 Chrome 识别不到手机?

  • 尝试重新插拔 USB 线
  • 更换数据线或 USB 端口(部分数据线仅供充电,无法传输数据)。
  • 检查手机是否信任此电脑(删除已连接的设备,重新连接)。

2. 设备显示 "No Devices Detected"?

  • 确保手机开启了 USB 调试
  • 在手机 开发者选项 中,开启 USB 调试(安全设置)
  • 在命令行运行:
    sh
    adb devices
    确保设备已被 ADB 识别。

3. 手机网页无法 inspect?

  • 试试在 Chrome 地址栏输入:
    about:debugging
  • 确保手机端的 Chrome 版本与 PC 端兼容。

这样,就可以成功在手机 Chrome 上进行真机调试了! 🚀