Flutter Multiple Device Debugging

Backstory

When I first did a hot reload in flutter it felt like magic. I made a change to some of my view code, saved the file, and instantly I saw the change running on the device. Previously I had been building iOS apps in Swift using Xcode or AppCode. Every time I made a change I had to rebuild the app which could take several seconds. What was even worse, was that the app I was working on didn’t preserve and restore its state. So after every rebuild I would get kicked back to the initial screen and have to navigate my way back through to the screen I was changing. This led to so much lost time! Time that I no longer had to lose by using flutter and hot reloading.

Multiple Device Debugging

I have been using flutter for about four months now. The magic of hot reload in flutter has rubbed off. Don’t get me wrong it is still amazing, but I have gotten so use to it that I take it for granted. This week I have been working on making a flutter app look slightly differently on phone vs tablet. I had to do some of this work on the iOS app that I mentioned before. The wasted time that I mentioned before was doubled because I had to check what my changes looked like on an iphone and ipad seperately with different builds each time. I was not looking forward to having to do this again. That was until I learned about multiple device debugging in flutter.

Multiple device debugging in flutter is like hot reloading on steroids. This takes advantage of VS Codes’s Multi-target debugging. When setup correctly, a build will be kicked off for each configuration and loaded on each device at the same time. Once the build is complete it will run like any other flutter app, hot reloading included. This means that a change can be made in the code, and it will be hot reloaded onto all devices at once. I could make tweaks to the views and instantly see what it looked like on a phone and tablet. I began to feel the magic again after doing this the first time.

Debugging also works too. Breakpoints can be set in your code like normal and you can switch the debugger to what device you would like to see when the breakpoint is hit. Everything works like normal with the call stack, variables, etc.

On top of this you can even run your flutter tests while in the multi debug without having to stop it. In other words, I could make a change to the code, see what it looked on a phone and tablet, and run my tests to make sure they still passed. All without having to wait for the app to rebuild. This was a game changer. I don’t think I can ever go back to iOS development with XCode or AppCode again.

Even better is this feature works for any combination of multiple devices. You can run a phone or tablet, or an android device and ios device, or any combination that you desire.

How To Setup

To setup in VS Code you must define different build configurations for each device that you want to run at once. Then you define a compound build configuration that will run them all at once. Your launch.json for VS Code might look something like this:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Phone",
      "request": "launch",
      "type": "dart",
      "deviceId": "phone"
    },
    {
      "name": "Tablet",
      "request": "launch",
      "type": "dart",
      "deviceId": "tablet"
    }
  ],
  "compounds": [
    {
      "name": "All Devices",
      "configurations": ["Phone", "Tablet"]
    }
  ]
}

The flutter devices command can be ran to help get the device id. First your devices must be running. These can be simulators or actual devices. After running the command, you will see output like the following:

Android SDK built for x86 • emulator-5554                        • android-x86 • Android 8.1.0 (API 27) (emulator)
Android SDK built for x86 • emulator-5556                        • android-x86 • Android 9 (API 28) (emulator)
iPad Pro (9.7-inch)       • 10AC17D8-DA22-4038-9511-E872C4A1E883 • ios         • com.apple.CoreSimulator.SimRuntime.iOS-13-3 (simulator)
iPhone Xʀ                 • 0B50AC92-FFDB-41DD-B11D-4BAEFC01EF22 • ios         • com.apple.CoreSimulator.SimRuntime.iOS-12-2 (simulator)

The first column is the device name and the second is device id. Either of these can be used. For iOS devices it is usually easier to use the name such as “iPhone Xʀ”. For android simulators it is usually easier to use the device id such as emulator-5556.