Flutter 튜토리얼 72편: DevTools 시작하기

Why#

NOTE

DevTools는 Flutter 팀이 공식 제공하는 디버깅 도구입니다. 별도 설치 없이 Flutter SDK에 포함되어 있으며, 다양한 분석 기능을 하나의 인터페이스에서 사용할 수 있습니다.

웹 브라우저에서 동작하므로 어떤 운영체제에서든 동일한 경험을 제공합니다.

What#

NOTE

DevTools는 여러 개의 전문 도구(탭)로 구성되어 있습니다.

탭	기능	사용 시점
Flutter Inspector	위젯 트리 검사, 레이아웃 분석	UI 문제 디버깅
Performance	프레임 렌더링 분석	화면 버벅임 해결
CPU Profiler	CPU 사용량 분석	느린 연산 찾기
Memory	메모리 할당/해제 추적	메모리 누수 탐지
Network	HTTP 요청 모니터링	API 통신 디버깅
Logging	로그 메시지 확인	일반 디버깅
App Size	앱 크기 분석	번들 최적화

graph TD A[Flutter DevTools] --> B[Inspector] A --> C[Performance] A --> D[CPU Profiler] A --> E[Memory] A --> F[Network] A --> G[Logging] A --> H[App Size] B --> B1[위젯 트리] B --> B2[레이아웃 탐색기] C --> C1[프레임 차트] C --> C2[타임라인]

How#

TIP

DevTools 실행 방법

DevTools를 실행하는 방법은 여러 가지가 있습니다.

방법 1: VS Code에서 실행

1. Flutter 앱을 디버그 모드로 실행합니다 (F5).
2. 명령 팔레트를 엽니다 (Cmd + Shift + P).
3. “Flutter: Open DevTools”를 입력하고 선택합니다.
4. 원하는 도구를 선택합니다 (Widget Inspector, Performance 등).

또는 상태 바의 “Dart DevTools” 버튼을 클릭해도 됩니다.

방법 2: Android Studio에서 실행

1. Flutter 앱을 실행합니다.
2. 메뉴에서 View > Tool Windows > Flutter DevTools를 선택합니다.
3. 또는 Run 패널의 “Open DevTools” 버튼을 클릭합니다.

방법 3: 커맨드라인에서 실행

1
# DevTools 서버 시작
2
dart devtools
3

4
# 특정 포트로 시작
5
dart devtools --port 9100
6

7
# 앱 연결 (앱이 이미 실행 중인 경우)
8
# 1. 앱 실행 시 출력되는 Observatory URL을 복사
9
# 2. DevTools에서 해당 URL 입력

앱을 실행하면 터미널에 다음과 같은 메시지가 출력됩니다.

1
Flutter DevTools debugging http://127.0.0.1:9100

이 URL을 브라우저에서 열면 DevTools에 접속할 수 있습니다.

방법 4: 브라우저에서 직접 접속

앱 실행 시 출력되는 DevTools URL을 브라우저에서 직접 열 수 있습니다.

Watch out#

WARNING

DevTools 사용 시 알아두어야 할 사항입니다.

빌드 모드에 따른 차이:

빌드 모드	사용 가능한 기능
Debug	모든 기능 사용 가능
Profile	성능 분석에 적합, 일부 기능 제한
Release	DevTools 연결 불가

정확한 성능 측정을 위해서는 Profile 모드를 사용하세요:

1
flutter run --profile

Debug 모드는 디버깅 정보가 포함되어 있어 실제 성능보다 느리게 동작합니다.

결론: DevTools는 Flutter 개발에 필수적인 디버깅 도구입니다.

Why#

NOTE

DevTools의 인터페이스를 이해하면 필요한 도구에 빠르게 접근할 수 있습니다. 각 탭이 어떤 문제를 해결하는지 알면 디버깅 시간을 단축할 수 있습니다.

What#

NOTE

DevTools 화면은 크게 세 영역으로 나뉩니다.

1
┌──────────────────────────────────────────────────┐
2
│  탭 바 (Inspector | Performance | Memory | ...)   │
3
├──────────────────────────────────────────────────┤
4
│                                                  │
5
│                 메인 콘텐츠 영역                   │
6
│         (선택한 탭의 내용이 표시됨)                 │
7
│                                                  │
8
├──────────────────────────────────────────────────┤
9
│  상태 바 (연결 상태, 버전 정보)                     │
10
└──────────────────────────────────────────────────┘

상단 탭 바의 주요 항목:

• Flutter Inspector: 위젯 트리와 레이아웃 분석
• Performance: 프레임 렌더링 타임라인
• CPU Profiler: CPU 사용량 상세 분석
• Memory: 메모리 할당 및 가비지 컬렉션²
• Network: HTTP 요청/응답 모니터링
• Logging: 앱 로그 메시지 확인

How#

TIP

각 탭의 기본 사용법

Flutter Inspector 탭

왼쪽에 위젯 트리가 표시되고, 오른쪽에 선택한 위젯의 상세 정보가 나타납니다.

1
┌─────────────────┬─────────────────┐
2
│   위젯 트리      │   위젯 상세      │
3
│                 │                 │
4
│ ▼ MyApp         │ Type: Center    │
5
│   ▼ MaterialApp │ Size: 300x200   │
6
│     ▼ Scaffold  │ Constraints:    │
7
│       ▼ Center  │   min: 0x0      │
8
│         Text    │   max: 300x200  │
9
│                 │                 │
10
└─────────────────┴─────────────────┘

Performance 탭

프레임 차트가 상단에 표시되고, 선택한 프레임의 상세 타임라인이 하단에 나타납니다.

1
┌──────────────────────────────────────────────────┐
2
│ 프레임 차트 (각 막대가 하나의 프레임)               │
3
│ ████ ████ ████ ████ ████ ████ ████ ████ ████    │
4
│ 16ms ─────────────────────────────────────────   │
5
├──────────────────────────────────────────────────┤
6
│ 타임라인 상세                                      │
7
│ ├─ Build: 3ms                                    │
8
│ ├─ Layout: 2ms                                   │
9
│ └─ Paint: 1ms                                    │
10
└──────────────────────────────────────────────────┘

Memory 탭

실시간 메모리 사용량 그래프와 할당된 객체 목록을 확인할 수 있습니다.

Network 탭

앱에서 발생한 모든 HTTP 요청을 시간순으로 보여줍니다.

열	설명
Method	GET, POST, PUT 등
Uri	요청 URL
Status	HTTP 상태 코드
Duration	요청 소요 시간
Size	응답 크기

연결 상태 확인하기

상태 바에서 현재 연결 상태를 확인할 수 있습니다.

• 녹색: 앱에 정상 연결됨
• 빨간색: 연결 끊김
• 회색: 앱 실행 대기 중

Watch out#

WARNING

DevTools 사용 시 주의사항입니다.

브라우저 탭 관리:

• 여러 DevTools 탭을 동시에 열면 혼란스러울 수 있습니다.
• 필요한 탭만 열어두세요.

앱 재시작 시 재연결 필요:

• 앱을 종료하고 다시 시작하면 DevTools 연결이 끊어집니다.
• 새로운 세션으로 다시 연결해야 합니다.

데이터 휘발성:

• DevTools에 표시된 데이터는 저장되지 않습니다.
• 필요한 정보는 스크린샷이나 내보내기 기능을 사용하세요.

결론: DevTools 인터페이스를 이해하면 효율적으로 디버깅할 수 있습니다.

Why#

NOTE

DevTools의 각 탭을 언제 사용해야 하는지 알면 문제 해결 시간을 단축할 수 있습니다. 문제 유형에 따라 적절한 도구를 선택하는 것이 중요합니다.

What#

NOTE

일반적인 문제와 사용해야 할 DevTools 탭의 매핑입니다.

문제 상황	사용할 탭	확인할 것
위젯이 보이지 않음	Inspector	위젯 트리에 존재하는지, 크기가 0인지
레이아웃이 깨짐	Inspector	Constraints, 오버플로우
화면이 버벅거림	Performance	16ms 초과 프레임
앱이 느려짐	CPU Profiler	오래 걸리는 함수
메모리 계속 증가	Memory	해제되지 않는 객체
API 응답 오류	Network	상태 코드, 응답 내용
예상치 못한 동작	Logging	에러 메시지, 스택 트레이스

How#

TIP

문제 해결 워크플로우 예시

예시 1: “화면이 버벅거려요”

graph LR A[문제 발생] --> B[Profile 모드로 실행] B --> C[Performance 탭 열기] C --> D[빨간 프레임 찾기] D --> E[타임라인 분석] E --> F[병목 구간 확인] F --> G[코드 수정]

1. flutter run --profile로 앱을 실행합니다.
2. Performance 탭을 엽니다.
3. 프레임 차트에서 빨간색(16ms 초과) 프레임을 찾습니다.
4. 해당 프레임을 클릭하여 타임라인을 분석합니다.
5. Build, Layout, Paint 중 어디서 시간이 오래 걸리는지 확인합니다.

예시 2: “위젯이 안 보여요”

1. Flutter Inspector 탭을 엽니다.
2. 위젯 트리에서 해당 위젯을 찾습니다.
3. 위젯이 트리에 없다면: 조건부 렌더링 로직 확인
4. 위젯이 트리에 있다면: 크기와 위치 확인
5. 크기가 0이면: Constraints 확인

1
// 흔한 실수: Expanded 없이 ListView를 Column에 넣음
2
Column(
3
  children: [
4
    ListView(...),  // 높이 제약 없음 → 에러 또는 안 보임
5
  ],
6
)
7

8
// 해결책
9
Column(
10
  children: [
11
    Expanded(
12
      child: ListView(...),
13
    ),
14
  ],
15
)

예시 3: “메모리가 계속 늘어나요”

1. Memory 탭을 엽니다.
2. 특정 작업(화면 전환 등)을 반복합니다.
3. 메모리 그래프가 계속 상승하는지 확인합니다.
4. “Take Heap Snapshot” 버튼을 눌러 현재 메모리 상태를 캡처합니다.
5. 해제되지 않은 객체를 분석합니다.

디버깅 단축키

동작	VS Code	Android Studio
DevTools 열기	Cmd + Shift + P → “Flutter: Open DevTools”	View > Tool Windows > DevTools
Hot Reload	Cmd + S	Ctrl + \
위젯 선택 모드	DevTools의 “Select Widget Mode” 버튼	동일

Watch out#

WARNING

디버깅 시 흔한 실수입니다.

Debug 모드에서 성능 측정:

• Debug 모드는 디버깅 정보 때문에 느립니다.
• 성능 문제는 반드시 Profile 모드에서 측정하세요.

증상만 보고 원인 추측:

• “느리다”고 해서 무조건 Performance 탭부터 보지 마세요.
• 네트워크 지연일 수도, 메모리 부족일 수도 있습니다.
• 여러 탭을 확인하여 실제 원인을 파악하세요.

한 번에 모든 것 분석하기:

• 한 번에 한 가지 문제에 집중하세요.
• 문제를 해결한 후 다음 문제로 넘어가세요.

결론: 문제 유형에 맞는 DevTools 탭을 선택하면 효율적으로 디버깅할 수 있습니다.