Hello, I'm Luiz, a 26-year-old Software Engineer from São Paulo, Brazil. Today, I want to share some essential tips for debugging Android apps using React Native and ADB (Android Debug Bridge). Whether you're an experienced developer or just starting out, these tips will help make your debugging process more efficient. Let's dive in!
ADB
What is ADB? ADB, or Android Debug Bridge, is a versatile command-line tool that allows developers to communicate with and control Android devices. It facilitates a variety of device actions, such as installing and debugging apps, and provides access to a Unix shell that you can use to run various commands on a device.
Connect your device over WiFi to install or debug
ADB, has a feature that will allow us to connect our android device over wi-fi so this way we can debug without the need of a cable connected to the device.
To make this happen make sure that you follow the steps
Make sure that your device and your computer are under the same wi-fi network, ADB Debugging and Wireless Debugging are enabled in the Android Device's Developer options
Get the IP Address of the Device, Searching for IP address on the device settings or by connecting via USB and running this command
adb shell "ip addr show wlan0 | grep -e wlan0$ | cut -d\" \" -f 6 | cut -d/ -f 1"Now if you have any cables connected remove from the device and run
adb connect <ip_address>:5555
Redirecting ports
Sometimes, Android and React Native encounter issues fetching localhost URLs. What does this mean? It indicates that Android is unable to find the ports on your machine. To resolve this, you can use some commands to proxy the ports to your computer to the Android Device:
adb reverse tcp:PORT tcp:PORT
adb -d reverse tcp:PORT tcp:PORT
adb -e reverse tcp:PORT tcp:PORT
Typically, this issue arises with the React Native bundler. To fix it, you just need to replace PORT with 8081:
adb reverse tcp:8081 tcp:8081
adb -d reverse tcp:8081 tcp:8081
adb -e reverse tcp:8081 tcp:8081
Control your device with your computer
There is a Tool that you can install and control devices that are connected over ADB on your computer, called scrcpy:
To start the application just run type on your terminal
scrcpy
Thats all Folks
Debugging Android apps with React Native and ADB can make your life a lot easier. Using features like wireless debugging, port redirection, and tools like scrcpy helps you stay connected and fix issues without hassle. Keep experimenting and stay updated with new tools to make your debugging process smooth and efficient. Happy coding!
Top comments (0)