플러터(Flutter) VSCode 디버깅하기

이 글은 플러터 (Flutter) Sample 앱 분석에서 이어집니다.

플러터의 기본 프로젝트인 카운터를 실행했다면, 이번에는 VSCode의 디버거를 사용합니다.

우선, VSCode의 디버그 탭을 실행합니다. 단축키는 컨트롤 + 쉬프트 + D 입니다

VSCode의 디버거를 위한 설정이 끝났습니다. 이제 DEBUG 메뉴에서 Flutter를 선택하고 시작을 위한 초록색 버튼을 누르세요.

정상적으로 시작했다면 위 아이콘들을 볼 수 있을 것 입니다. Gradle 설정 및 디버그 모드 앱 설치 등이 끝나면 에뮬레이터 혹은 실제 디바이스에 앱이 실행됩니다.

DEBUG CONSOLE에서 작업하는 과정을 볼 수 있습니다.

main.dart 파일에서 _MyHomePageState의 _incrementCounter 메소드에 print("counter를 증가합니다"); 를 추가합니다. 아마 hot reload가 자동으로 실행되었을 것입니다. 아니라면 위 디버거 메뉴 아이콘의 재실행 버튼을 누르세요.

DEBUG CONSOLE에서 로그를 볼 수 있습니다. 이번에는 브레이크 포인트를 걸어 코드가 작동하는 곳까지만 실행하고 멈춰봅니다.

빨간 점이 있는 위치를 확인하세요. main.dart 파일의 53번째 줄에 브레이크포인트를 추가했습니다.

다시 Hot Reload가 되었다면, 카운터 숫자를 올리기 위해 FAB 버튼을 눌러봅니다.

사이드바에 브레이크포인트로 멈춘 위치의 로컬 변수와 _counter의 현재 값 그리고 콜스택을 확인할 수 있습니다. 스크린샷 우측 상단에 Step Over, Step Into, Step Out 버튼을 눌러보세요.

기본적인 VSCode를 이용한 플러터 앱 디버깅을 알아보았습니다.