Remote debugging a Web App over Wi-fi without USB.
I went through blood, sweat and tears to figure this out. I hope that by sharing what I’ve learnt, it can save you and future me, the hassle.
This is my first real article on a major platform, like Medium. When I started my full-stack development journey circa 2–3 years ago, I got the sense that it would inevitably lead to some knowledge-sharing. Well here we are at last, let’s get to it…
Learning Objectives:
- Understand the use case(s) for remote debugging without USB.
- Install Android Studio, along with the SDK platform tools.
- Activate Developer mode on your Android Phone.
- Configure your Android Developer settings to connect to your debugging Mac/PC.
- Run commands on the terminal to connect your devices.
- Setup and access your Android phone from your Mac/PC using Chrome Dev Tools.
- Have a better appreciation of folks who generate all the good content that helps to make us better developers (or better people, in general). It’s not an easy process.
The Use Case(s)
- Basic use case: making sure your app works correctly on your phone.
I first encountered the urge (I wouldn’t call it ‘need’, because you can still get away with not using it) to connect my phone (I use a OnePlus) to my computer, when I deployed my very first Web App. Initially, I thought there was an equivalent ‘inspect’ button (hidden away nicely), that would take me to the mobile equivalent of a browser developer view. I soon realised that was not the case. I have searched the internet extensively and all the articles I found, like this one, refers back to ‘Using Google Chrome Console On Any Mobile Device!’. Then there’s this official article from Chrome on the subject: https://developer.chrome.com/docs/devtools/remote-debugging/, which definitely dashed any remaining hopes I had of being able to debug directly from my phone. This official article, is the best place to start (once you abandon all hope, like I did). If your phone and Mac/PC have USB ports, then the instructions there should be enough to get you connected via USB— if not, then my advanced use case (which is the point of this whole article) should help you achieve the same result.
2. Advanced use case: making sure your app works correctly on your phone and connecting your phone to your desktop wirelessly, because your desktop (in my case a MacBook Pro) doesn’t have a USB port and you can’t be bothered buying an extension 😊.
Remember how I mentioned that my first use case emerged when I deployed my first Web App, well I didn’t go through with it then because of one particular reason — I didn’t need to. My first App, didn’t have any device dependencies. I simply accessed it on my desktop browser and debugged using Chrome developer tools. The situation changed with my most recent app, which includes sending push notifications from a server (in my case server-less) to my phone. In the dev environment, I was logging a unique key generated for each device, to the console. And I needed to use the key on the server side, to trigger the push to each device. Of course in prod, I’m sending the key to the backend and retrieving from the backend to send to the devices. However, in that dev scenario, the need to remotely debug my phone’s version of the app, became unavoidable.
Step 1: Install Android Studio, which includes the SDK platform tools on your desktop.
As you may have guessed, the scenario we are working with in this article, is specific to using an Android phone with a MacBook Pro. The principle should be applicable to other OS, but I’d leave that to you to figure out, or you can wait for me to come up with another article.
You don’t have to be familiar with or need to learn how to use Android Studio in order to utilise it for this solution, although such knowledge will be a bonus.
The key feature that you will need for your wireless connection, is the ADB(Android Debug Bridge). ADB is a tool (part of the SDK platform tools) that is automatically included when you download and install Android Studio. You can find out more about how ADB works here.
Step 2: Activate Developer mode on your Android phone.
The official documentation on this, is straight forward, so no need to reinvent the wheel. Here’s an excerpt of that is most relevant:
The most important part of the instruction, is navigating to the ‘Build Number’ on your Android phone, and tapping the option 7 times. It feels like a rite-of-passage of sort. Good thing it does include genuflecting and bowing. Anyway, once you tap the option 7 times, you will automatically become an elite member of the geek squad of developers. You can ignore the rest of the instructions about turning on ‘USB debugging’. Instead, if you have Android 11 (and later), you should see an option like the screenshoot from step 3 (Image 3.1), below.
Step 3: Configure your Android Developer settings. You must have guessed it, you should turn on the ‘Wireless ADB debugging’.
Next, turn on ‘Wireless debugging’ as shown on Image 3.2 below:
When you turn on ‘Wireless debugging’, you will get a dialogue prompting you to ‘allow wireless debugging on this network?’, click ‘Allow’ per Image 3.3 below.
Next, select ‘Pair device with pairing code’ as shown on Image 3.4 below:
Next, you should note down the pairing code, the IP address and Port from Image 3.5 below:
Step 4: Run commands on your Mac/PC terminal to connect your Android phone, using the pairing code from Image 3.5 above. You can also checkout Official documentation here.
Essentially, you need to access the Android sdk platform tools, you installed earlier and run two adb commands within its path.
First, cd to your parent or root directory, which may look like this:Foo-MacBook-Pro ~ %
then, run the following command: Library/Android/sdk/platform-tools/adb pair <Your IP Address and Port>
You should end up with: Foo-MacBook-Pro ~ % Library/Android/sdk/platform-tools/adb pair <Enter Your IP Address:Port here>
Next, the terminal will return: Enter pairing code: You should then enter the pairing code from Image 3.5 above:Enter pairing code:XXXXXX and hit enter.
then, the terminal should return: Successfully paired to Your IP Address:Port [guid=adb-xxxxxxxx-xxxxxxx]
That’s the setup complete. Now you can access the browser and start debugging.
Step 5: Access your Android phone from the Chrome Dev Tools in your Mac/PC browser. Go to: chrome://inspect/#devices You should see you device (paired Android phone) displayed, along with all the current open tabs in your phone browser. You can select to inspect any tab and watch the magic unfold.
And that’s a wrap. You should now be wirelessly connected to your device.
I hope this has been useful. Cheers.