Wireless debugging Flutter Android application on Github Codespaces

Cloud development environment such as Github Codespaces or Gitpod is the emerging tool that help your developer life so much easier. The concept is that you don't need to install anything on your machine in order to boot up your application, but it is done on the cloud and accessible via Visual Studio Code IDE in the browser.

Flutter is also a fast growing SDK that allow developers to "write once, deploy everywhere" with native performance widgets. By the time of this writing, it has native support for most of popular platforms from mobile to desktop.

In this article, I will guide you through setting up a bridge between your Android devices and a Codespaces instance for mobile app debugging.

Before we start, make sure you have these items below checked:

Github account with Codespaces (it's not Generally Available yet, so you might need to register for its beta program)
ngrok.com account
An Android 11 device (I'm using Samsung S21+ for this tutorial)

Installing ngrok on local device

ngrok is a service that expose your local port to the Internet without complicated setup. They have a free tier account, so let's head over to ngrok.com to register and follow their onboarding guide.

Preparing your mobile device

We need to enable developer options to proceed further. Simply clicking multiple times on the build number in Settings > About Phone until the developer options notice appears.

With Developer options enabled, head over to the section of the same name and scroll down to Wireless debugging section and turn it on.

Preparing Github Codespaces

The Codespaces instance needs to use a specific container image in order to run Flutter. Create a folder named .devcontainer in the root of your Github repo. Add below lines into devcontainer.json which is inside the created folder.

{
  "image": "cirrusci/flutter:latest",
  "forwardPorts": [3000]
}

You might need to restart your instance if it's running

Installing adb on local device and Codespaces

ADB, a.k.a Android Debugging Bridge is a command line interface that manages the connection between development machine and a mobile device. Below are some quick scripts for installing on different platforms.

MacOS

 /bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
 brew install android-platform-tools

Linux

wget https://dl.google.com/android/repository/platform-tools-latest-linux.zip
unzip \platform-tools-latest-linux.zip
sudo cp platform-tools/adb /usr/bin/adb
sudo cp platform-tools/fastboot /usr/bin/fastboot

Windows

Follow this guide for more detailed steps.

Note: Make sure the adb versions on your device and Codespaces instance are the same. Run adb version for more information.

Pairing mobile device

Firstly, we need to establish a connection between our local device and mobile phone. Head over to Wireless debugging option that we enable earlier and hit Pair device with pairing code.

Open the Terminal and run below command with provided address and port:

adb pair <address>:<port>

On success, you should see some message like:

Successfully paired to 192.168.1.3:12345 [guid=xxx]

Now we need to connect our device to a Codespaces instance. Hit Pair device with pairing code again. Then run ngrok command:

ngrok tcp <address>:<port>

After getting the public address from ngrok, run this command in Codespaces Terminal:

adb pair <ngrok address>

On success, you should see some message like:

Successfully paired to 0.tcp.ngrok.io:12345 [guid=xxx]

Connecting device for debugging

In Terminal, run below command to spawn a new ngrok tunnel:

ngrok tcp <address>:5555

Replace the <address> with the address we use earlier. Then connect this new tunnel in Codespaces Terminal with:

adb connect <ngrok address>

Done! Now you can run flutter run to debug Android app on your physical device.

Some notes

If you couldn't access an Android 11 device, you can still use USB with this guide from Some Techy Website

Ralphilius