Capacitor Android 使用 USB 调试和无线调试

之前写了 配置 Capacitor Android 开发环境 ，这里继续来写真机调试。

USB 调试需要依赖 adb 工具，前面的配置开发环境已经安装了 platform-tools，platform-tools 中就包含 adb 工具。

USB 调试

USB 调试就是使用数据线把 Android 设备连接到电脑，通过电脑把 App 直接安装到 Android 设备运行调试。

下面我为了方便会直接使用手机来指代 Android 设备，如果你使用平板，方式也是一样的。

首先需要开启开发者选项，如果你用的是小米的手机，可以参考我之前写的 记录一下 小米13Pro 从 MIUI14 刷到最新澎湃OS ，滚动到 刷机完成后 ，有详细的启用开发者选项说明，主要就是在设备信息页快速点击几次 OS 版本来启用开发者选项，如果是 MIUI 就点击 MIUI 版本。

如果是 OPPO 就打开设置，进入关于手机，快速点击几次版本信息，成功启用会显示提示。

Vivo 和 OPPO 差不多，进入设置，进入关于手机，快速点击几次软件版本号，启用后会显示提示。

启用开发者选项后进入开发者选项，大部分手机的开发者选项在设置 -> 更多设置 -> 开发者选项，开发者选项一般都在最下方。

开启 USB 调试 和 USB 安装 ，用数据线把手机连接到电脑，进入你的 Capacitor 项目目录，需要确保你的项目中已经安装了 @capacitor/core @capacitor/cli @capacitor/android，已经添加了 Android 工程，确保能打包 APK。

在项目目录执行：

npx cap run android

第一次执行可能会出现类似下面的授权信息：

选中 一律允许使用这台计算机进行调试 然后确定。

第一次安装的时候可能还会有一个安装程序的授权，点击允许，安装完成后会自动打开程序。

如果无法成功安装，可以拔掉手机重新连接试试，有时候第一次不一定能成功。

热重载

Android 项目从编译到成功安装到手机需要一段时间，不可能每次查看效果都重新编译安装。

Capacitor 可以让程序直接从服务器加载 Web，你可以在开发机上启动一个本地服务器，Capacitor App 可以直接从这个服务器加载 Web，当你更改了代码，可以直接在手机上查看效果。

打开项目目录下的 capacitor.config.json ，配置 server：

{
  "appId": "com.qr.mister.app",
  "appName": "QR",
  "webDir": "dist",
  "server": {
    "url": "http://192.168.2.130:8080",
    "cleartext": true
  }
}

上面的 appId appName webDir 都是初始化 Capacitor 时填写的，server 需要手动添加，url 就是服务器地址，cleartext 为 true 就是不使用 HTTPS。

设置完成后需要运行一次：

npx cap run android

把程序重新编译安装到手机，你也可以直接打包 APK 发送到手机安装。

当你从手机上启动 App 时，App 会直接访问 url 中的地址，不要忘了启动服务器，否则手机上无法显示内容。

你可以直接断开 USB 连接，不需要连接电脑，在电脑上更改了代码，可以立即在手机上看到效果。

如果你使用 npm 新安装了 Capacitor 插件，你需要运行：

npx cap sync

把插件和页面代码同步到 Android 工程，然后重新编译安装到手机。

如果你安装的是和 Android 无关的 Web 模块，比如 axios 之类的，可以不需要重新编译安装，你的构建工具应该会自动打包刷新，可以直接在手机上看到效果。

当你的 App 开发完成，准备打包发布时，别忘了删除 capacitor.config.json 中的 server 配置，否则 App 还会从 url 加载页面。

Chrome DevTools 调试

Capacitor 的界面使用的是 Web 网页，你可以直接使用电脑的浏览器查看效果，一些实现了 Web 功能的插件也可以在浏览器运行，但是大多数 Android API 功能还是只能在手机运行。

有时候你可能需要通过控制台，比如 console.log 输出一些调试信息，Capacitor 使用的 Android WebView 是无法使用控制台和开发者工具的。

如果你的手机和电脑在同一个局域网内，你可以使用 Chrome 的开发者工具来调试，不仅能使用控制台，连元素和样式面板也能使用。

手机上需要开启 USB 调试，通过数据线连接电脑，开启本地 Web 服务器，让手机的 Capacitor 来访问本地 Web 服务器。

在 Chrome 地址栏输入：

chrome://inspect

如果手机成功连接的话，在 Remote Target 下方可以看到你的 App 名称和访问的本地服务器：

我的程序名称就是 二维码扫描 ，点击 inspect 会打开一个调试窗口：

左侧就是程序界面，右侧控制台的 Hello 和 通过控制台输出内容 就是我用 console.log 输出的。

无线调试

无线调试就是不需要通过数据线连接电脑，也能实现和 USB 调试差不多的效果。

在手机的 开发者选项 中开启 无线调试 ，选择 使用配对码配对设备 ，手机上应该会显示一个 IP:端口 和配对码：

我这里的配对 IP 和端口是 192.168.2.123:43093 ，使用 adb 配对：

adb pair 192.168.2.123:43093

提示 Enter pairing code 就输入配对码：

Enter pairing code: 131661
Successfully paired to 192.168.2.123:43093 [guid=adb-9865ff4b-5FQ2Fk]

配对成功后可以查看 IP 地址和端口：

我的地址是 192.168.2.123:37467 ，使用 adb 连接：

adb connect 192.168.2.123:37467

查看一下是否连接成功：

adb devices

输出：

List of devices attached
192.168.2.123:37467     device
adb-9865ff4b-5FQ2Fk._adb-tls-connect._tcp

可以看到手机型号和连接的地址。

设备配对成功后，下次可以直接使用上面的 adb connect 连接，不需要再次配对。

现在电脑上已经连接了 Android 设备，可以使用同样的命令把 Capacitor 程序编译安装到手机运行：

npx cap run android

如果之前使用过 USB 调试的话，可能需要手动选择一下设备：

? Please choose a target device: » - Use arrow-keys. Return to submit.
>   Xiaomi 2210132C (192.168.2.123:37467)
    Xiaomi 2210132C (adb-9865ff4b-5FQ2Fk._adb-tls-connect._tcp)

可以看到上面无线连接使用的 IP 和端口，选择完成后程序就可以直接无线编译安装到手机。

无线连接也可以使用上面的 Chrome 开发者工具调试。

如果需要断开连接可以输入：

adb disconnect 192.168.2.123:37467

上面是断开指定的设备。

你也可以直接断开所有设备：

adb disconnect

如果长时间没有调试传输，手机可能也会自动断开。

手机重启或断开 WIFI 后，IP 可能会变，连接之前需要先在手机上的无线调试查看。