在安卓手机上使用 chrome://inspect
进行真机调试网页,可以按照以下步骤操作:
一、前提条件
安装 Chrome 浏览器
- 在电脑上安装最新版的 Google Chrome 浏览器。
- 在手机上也安装 Chrome 浏览器(或基于 Chromium 的浏览器)。
启用开发者模式 & 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 识别。
adb devices
3. 手机网页无法 inspect?
- 试试在 Chrome 地址栏输入:
about:debugging
- 确保手机端的 Chrome 版本与 PC 端兼容。
这样,就可以成功在手机 Chrome 上进行真机调试了! 🚀