USB 線很麻煩

這幾天測試工具時發現一個問題：每次都要插 USB 線連手機很麻煩。尤其是懶得起身去拿線的時候，就不想用工具了。

既然 ADB 支援無線連接，何不把這個功能加進來？

ADB 無線連接原理

ADB 無線連接很簡單，就是讓手機和電腦在同一個 WiFi 網路下通訊：

# 先用 USB 啟用無線模式
adb tcpip 5555

# 然後就可以無線連接
adb connect 192.168.1.100:5555

問題是要知道手機的 IP 位址。

自動掃描 IP

我寫了個函數來掃描區域網路，找出可以連接的 Android 裝置：

async scanForDevices() {
  const localIP = this.getLocalIP();
  const subnet = localIP.substring(0, localIP.lastIndexOf('.'));
  
  const promises = [];
  for (let i = 1; i <= 254; i++) {
    const ip = `${subnet}.${i}`;
    promises.push(this.tryConnect(ip));
  }
  
  const results = await Promise.all(promises);
  return results.filter(result => result.success);
}

雖然有點暴力，但很有效。

加入 QR Code 連接

Android 11 以後支援用 QR Code 配對，更方便：

generatePairingQR() {
  // 產生配對用的 QR Code
  const pairingCode = this.generateRandomCode();
  const qrData = `WIFI:T:ADB;S:${pairingCode};;`;
  
  // 顯示 QR Code 讓使用者掃描
  this.showQRCode(qrData);
}

使用者只要在手機的開發者選項裡掃描 QR Code 就能配對。

無線連接介面

在工具裡加了個無線連接的頁籤：

<mdui-tabs>
  <mdui-tab>USB 連接</mdui-tab>
  <mdui-tab>無線連接</mdui-tab>
</mdui-tabs>

<div class="wireless-panel">
  <mdui-button onclick="scanDevices()">掃描裝置</mdui-button>
  <mdui-button onclick="showPairingQR()">QR Code 配對</mdui-button>
  
  <div id="found-devices"></div>
</div>

實際測試

第一次測試無線連接：

1. 手機先用 USB 連接，啟用 tcpip 模式
2. 拔掉 USB 線
3. 工具自動掃描到手機 IP
4. 成功無線連接

哇，真的可以無線操作了！不用插線的感覺超爽。

遇到的問題

掃描太慢

掃描 254 個 IP 要好幾秒，使用者會等得不耐煩。

網路限制

有些公司或學校的 WiFi 會擋住設備間的連線。

初次設定麻煩

第一次還是要用 USB 啟用無線模式。

簡化流程

後來想到可以把初次設定自動化：

async enableWireless() {
  // 檢查是否有 USB 連接的裝置
  const usbDevices = await this.getUSBDevices();
  
  if (usbDevices.length > 0) {
    // 自動啟用無線模式
    await this.executeCommand('adb tcpip 5555');
    
    // 提示使用者可以拔掉 USB 線了
    mdui.snackbar({ message: '無線模式已啟用，可以拔掉 USB 線了' });
  }
}