You've successfully subscribed to developer.school
Great! Next, complete checkout for full access to developer.school
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Success! Your billing info is updated.
Billing info update failed.

Multi Device Debugging with Flutter and VS Code

Paul Halliday
Paul Halliday

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).

FlutterVisual Studio Code

Paul Halliday

πŸ‘‹ Want to see more content? Head over to the YouTube channel: https://youtube.com/c/paulhalliday!