플러터 vscode 멀티 디바이스 디버깅

플러터로 앱 개발시 여러 디바이스에서 동시에 디버깅을 하는 것은 매우 유용하다.

 

플러터가 크로스 플랫폼 프레임워크인 만큼 여러 개의 플랫폼에 출시할 가능성이 높고, 이 때문에 안드로이드 / ios 두 개의 시뮬레이터를 동시에 띄워놓고 각각 플랫폼 별 상태를 확인한다던지, 아니면 시뮬레이터와 실제 기기의 경험이 분명 다르기 때문에 시뮬레이터 / 실제 기기를 동시에 띄워놓고 작업한다면 굉장히 효율적이다.

 

여러개의 디바이스에서 디버깅하는 방법은 아래와 같다.

1. 실행을 원하는 deviceId 구하기

2. vscode launch.json 작성하기

3. 실행하기

 

방법이 굉장히 쉽고 간단하다.

1. 실행을 원하는 deviceId 구하기

flutter devices

터미널에 명령어를 입력하면 현재 연결된 기기들의 device id를 구할 수 있다.

아래와 같은 형식으로 deviceId가 나온다.

{기기이름} • {deviceId} • ios • iOS
  17.5.1 21F90
{기기이름} • {deviceId} • ios • iOS
  17.5.1 21F90

 

2. vscode launch.json 작성하기

프로젝트 폴더에 최상단에 .vscode 폴더를 만들어주고 launch.json 파일을 만들어 아래와 같이 작성해준다.

{
	"version": "0.2.0",
	"configurations": [
		{
			"name": "Current Device",
			"request": "launch",
			"type": "dart"
		},
		{
			"name": "{설정하고 싶은 별명 ex) Android}",
			"request": "launch",
			"type": "dart",
			"deviceId": "{deviceId}"
		},
		{
			"name": "{설정하고 싶은 별명 ex) iPhone}",
			"request": "launch",
			"type": "dart",
			"deviceId": "{deviceId}"
		},
	],
	"compounds": [
		{
			"name": "All Devices",
			"configurations": ["Android", "iPhone"],
		}
	]
}

 

3. 실행하기

vscode 에서 사진 상 1번에 해당하는 RUN AND DEBUG 탭으로 가준 뒤 

2번에서 목록을 펼쳐보면 실행 가능한 설정이 나온다.

목록에서 All Devices 를 선택하게 된다면 launch.json 기준으로 Android, iPhone 에 해당하는 기기들이 실행된다.

초록색 버튼을 누르게 되면 해당 설정으로 바로 실행된다.

 

4. 끝

이렇게 각각 기기를 선택하여서 핫리로드나 핫리스타트를 할 수 있고,

각 기기에 해당하는 debug console 을 확인할 수 있다.

 

참고자료

https://github.com/flutter/flutter/wiki/Multi-device-debugging-in-VS-Code

Multi device debugging in VS Code