Multi Device Debugging with Flutter and VS Code

Want to debug your Flutter applications on multiple devices at the same time? Sure, you can use the terminal and flutter CLI tool to start multiple instances, but we can also do this inside of VS Code and take advantage of the debugger.

Setup

Make a folder inside the root of your project named .vscode (if it doesn't already exist) and then create/edit a file named launch.json to be the following:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Current Device: Debug",
      "request": "launch",
      "type": "dart",
      "flutterMode": "debug"
    },
    {
      "name": "Current Device: Profile",
      "request": "launch",
      "type": "dart",
      "flutterMode": "profile"
    },
    {
      "name": "Current Device: Release Mode",
      "request": "launch",
      "type": "dart",
      "flutterMode": "release"
    },
    {
      "name": "Android: Debug",
      "request": "launch",
      "type": "dart",
      "deviceId": "android",
      "flutterMode": "debug"
    },
    {
      "name": "Android: Profile",
      "request": "launch",
      "type": "dart",
      "deviceId": "android",
      "flutterMode": "profile"
    },
    {
      "name": "iPhone: Debug",
      "request": "launch",
      "type": "dart",
      "deviceId": "iphone",
      "flutterMode": "debug"
    },
    {
      "name": "iPhone: Profile",
      "request": "launch",
      "type": "dart",
      "deviceId": "iphone",
      "flutterMode": "profile"
    },
    {
      "name": "Chrome: Debug",
      "request": "launch",
      "type": "dart",
      "deviceId": "chrome",
      "flutterMode": "debug"
    },
    {
      "name": "Chrome: Profile",
      "request": "launch",
      "type": "dart",
      "deviceId": "chrome",
      "flutterMode": "profile"
    },
    {
      "name": "Chrome: Release",
      "request": "launch",
      "type": "dart",
      "deviceId": "chrome",
      "flutterMode": "release"
    },
    {
      "name": "Tests",
      "type": "dart",
      "request": "launch",
      "program": "test/",
    }
  ],
  "compounds": [
    {
      "name": "Debug: All Mobile",
      "configurations": ["Android: Debug", "iPhone: Debug"],
    },
    {
      "name": "Debug: All Devices",
      "configurations": ["Android: Debug", "iPhone: Debug", "Chrome: Debug"],
    },
    {
      "name": "Debug: Web and iPhone",
      "configurations": ["Chrome: Debug", "iPhone: Debug"],
    },
    {
      "name": "Debug: Web and Android",
      "configurations": ["Chrome: Debug", "Android: Debug"],
    },
  ]
}

Selecting the Debug menu inside of VS Code will now give us the ability to either run debug mode on all devices or alternatively, run on a single device with a particular mode (such as release or profile).