Setting up wireless debugging for an Android app

· 2 min read · #wireless-debugging #debugging #react-native #android-app

When building a React Native application, one may wish to test it on a physical device rather than only the Android simulator. To do so, one can use USB debugging or wireless debugging. In this note, the latter is described.

Note that the phone must be on the same network as the PC; therefore, both must be connected to the same Wi‑Fi network.

On the Android device, open Settings, select About phone, scroll down to Build number, and tap it seven times to enable developer options.

Enable Wireless debugging to allow adb connect.

Subsequently, tap Pair device with QR code. Scan the QR code (e.g. from Android Studio or the terminal) to pair. Pairing is required only the first time.

Navigate to the Device Identifier section and make a note of the IP address, which is of the type 192.168.X.XX.

For the Android used in this project, the IP information was located in the About phone settings. The IP details may be in a different location on different Android phones.

In the local terminal, run:

ipconfig

Under Wireless LAN adapter Wi-Fi, note the IPv4 address; this is the PC IP address.

Run $env:REACT_NATIVE_PACKAGER_HOSTNAME="<IPv4_ADDRESS>" to set the metro bundler host to the PC IP address.

Ensure the Metro bundler runs on the PC at PC_IP_ADDRESS:8081 so that the app on the device can connect to it.

In a new terminal, run:

adb connect 192.168.X.XX:<port>

where 192.168.X.XX is your device IP address and <port> is the port displayed in the Wireless debugging.

Finally, in the same terminal where REACT_NATIVE_PACKAGER_HOSTNAME was set, run npx react-native run-android to start the app on the device. The phone screen can also be mirrored in Android Studio via Device mirroring (e.g. View → Tool Windows → Device Manager and the device mirroring option).