摘要

网页展示上的一些问题，直接在桌面端调试时发现是正常的，只有在移动端调试才能发现问题。本文记录在移动端进行 usb 调试和 无线调试的两种方式。

正文

先阅读官方文档远程调试 Android 设备 | Chrome DevTools | Chrome for Developers

环境

  1. Android 16 (小米)
  2. 移动端 Via 7.0.0
  3. 桌面端 Chrome 145

Via 打开设置——高级——允许调试网页。

image-20260314163711275

Chrome 输入 chrome://inspect 进入发现调试设备的界面，这里面有两种形式。

  • Discover USB devices
    • 寻找 usb 调试的设备
  • Discover network targets
    • 寻找网络调试的设备

一、usb 调试

先用第一种方式 usb 调试，打开 android 的开发者选项，打开 usb 调试，usb 数据线连入。此时保持 Via 前端的打开状态，Chrome 在 chrome://inspect 页面进行刷新。

有时候会一直检测不到设备，可能会提示类似 Device discovery is not responding. Please disconnect unresponsive devices.

这种情况，就去开发者模式里面，撤销所有 usb 授权，usb 重新连接，重新授权 usb 调试即可。

image-20260314164458269

如图有两种调试方式

  • inspect

    • 调试，优先使用

  • inspect fallback

    • 备用调试模式，当使用 inspect 失败时用该调试模式

inspect 之后的效果如图

image-20260314170641422

调试时，会发现比较卡顿，正常，因为琐碎的请求数据很多。

二、无线调试

本质上跟 usb 调试的流程是一样的。

首先，电脑通过 adb 配对、连接安卓设备，步骤参考这里。只要连接上之后，并且电脑端可以查看到设备时，刷新 chrome 的调试页即可。

image-20260314175934327