Get to Know Flutter Multi-Device Debugging

As Flutter developers tasked with developing and deploying our app into a multi-platform app, we might have some problems in common, such as ensuring our apps can run on all devices without problems. We have to check each device one by one, debug our app on each device, and also perform checks on so many other things, such as layouts, features, gestures, and others. Tiring? Absolutely.

Have you ever wondered

whether the process of ensuring apps can run in some variants of devices could be easier?

I have been there, and the answer is yes. To put it simply, we just have to configure our connected devices then debug the apps to multiple devices only with the press of a button.

Configuration

There are two ways to configure this setup, first with bash or command line, and then generate from Visual Studio Code. Let’s hop to bash/command line’s view first.

Bash or Command line

You only need to run this line on your command line or terminal:

flutter run -d all

There’s also another option: register this line to a shell or bash script. Let me explain it using Android Studio as my IDE.

First, create a .sh file on your root project. You can name it according to your preferences. In this example, I named mine runalldevices.sh .

Then, write down the same code as before into your shell:

flutter run -d all

Next, register your shell file from Android studio. Go to the Run menu and then go to Edit Configurations.

Now, you will see a dialog menu, go to the + button on your left. Then, choose bash or shell script depending on what you have on your command line. After that, add your configurations, like this:

• Insert your name (will be shown at configuration dropdown)
• Insert your script path
• Make sure your interpreter path is set to /bin/bash or /bin/zsh depending on the interpreter you use. I use zsh so I put /bin/zsh

After applying your configurations, you can see them at the configuration drop-down as shown here:

If you click it and run your app, it will run your command to all of your devices.

Visual Studio Code

For Visual Studio Code, it’s a bit different. First, you have to open Run and Debug from your menu bar located on the left. Then click create a launch.json file to set up the configuration in json file.

You will now have a launch.json file at the .vscode folder located in your root project. The .json file will look like this:

Based on the existing json file, we can gather that your app has 2 available configurations to launch. The first one is your default and the second one is your profile setup. The configuration doesn’t seem like it has our device(s) there, which means it can only run on one device by default. Let’s edit the config like this:

The names can be adjusted to whatever you prefer. If you wonder how to get the deviceId, you may run this line on your command line

flutter devices

It will inform you how many devices are connected to your computer, including your emulator and your connected devices. If you got a port problem, don’t worry, you may connect them through a wireless connection.

Then, go back to the Run and Debug menu on your VS Code and you will have the dropdown containing options to pick devices.

And voila, you can run all your devices from VS Code.

Let’s Try This Out!

I will demonstrate it using Visual Studio Code. First off, let's pick Run All Devices

Next up, run your app by pressing F5 or the green play button next to your device’s name. Then wait until your app runs to your devices like this:

Running perfectly here :)

Conclusion

For Android Studio users, it seems that debugging your app in multi-devices will be very easy. But with that configuration, keep in mind that it would run to all your connected devices. You need extra conditions for your shell command to separate them if you need to.

On the other hand, VS Code might seem more complicated, but it lets you compound your devices there. You might make more than one group of devices and run them based on what you categorized them as.

These steps are used to simplify and shorten your debugging time so you don’t need to debug-then-stop-then-move-to-other-device-and-repeat. But then again, with more devices connected and debugs running together, they will consume more of your computer resources. Make sure to just connect or run your app by considering how much your computer can handle. For physical devices, they will run separately, but remember your computer consumes its resources while running the parallel debugs. For emulator devices, just running the emulator itself consumes a lot of resources so make sure your computer can handle it. Since an emulator runs on your computer and gets energy from there too, it will cause a performance drop when your computer can’t handle the strain.

Hope this article helps you to shorten your debugging time and increase your productivity in coding!