디버깅과 성능 분석 도구

앱을 개발하면서 내가 개발한 앱의 퍼포먼스가 어느정도이며 메모리 사용량은 어느정도 되는지에 대해 궁금할 수 있습니다. 여러 방면에서 사용할 수 있지만 이런 경우에는 저는 Flutter DevTools를 이용하여 확인합니다. 오늘은 이 방법에 대해 간단히 소개하도록 하겠습니다.

 

- Flutter DevTools란

Flutter DevTools는 Flutter 팀에서 공식 제공하는 디버깅 및 성능 분석 도구입니다.

 

- DevTools 실행 방법

저는 vscode를 사용하기 때문에 vscode 기준으로 작성하겠습니다.

1. VS Code

• 디버깅 중일 때 자동으로 DevTools 아이콘 표시
• 클릭 한 번으로 웹 브라우저에서 실행

2. 터미널에서 실행

flutter pub global activate devtools
flutter pub global run devtools

• 이후 http://127.0.0.1:9100 접속

 

- 주요 기능 소개

1. Inspector (위젯 트리 탐색기)

• 위젯 구조 시각화
• 레이아웃 문제 확인 (overflow, 크기 등)
• Select Widget Mode로 UI 클릭 시 위젯 트리 자동 포커스

2. Performance (성능 분석)

• 프레임 드롭 탐지
• GC (Garbage Collection) 로그 확인
• Timeline 분석으로 렌더링 병목 현상 파악

3. Memory

• 메모리 사용량 그래프 확인
• 객체 할당 추적
• 메모리 누수 분석에 유용

4. CPU Profiler

• 코드 실행 시간 분석
• 함수 단위 성능 분석

5. Network

• HTTP 요청/응답 기록 확인
• 응답 시간, 헤더, 상태코드 등 추적 가능

6. Logging / Console

• debugPrint, print 등 출력 확인
• 로그 필터링 가능

 

- 사용 팁

제가 주로 사용했던 기능들에 대해 정리해봤습니다.

 

• 오버플로우 디버깅: Inspector 탭에서 빨간 박스로 표시
• 버벅이는 UI 분석: Performance 탭에서 각 프레임의 FPS 확인
• 메모리 점검: Memory 탭에서 실시간 사용량 체크 및 GC 주기 확인
• 빌드 타이밍 분석: CPU Profiler로 어떤 함수가 오래 걸리는지 추적
• 조건부 로그: 디버깅 중 debugPrint()로 값 조건 출력

 

- DevTools를 잘 활용하면 좋은 이유

• UI디버깅 속도 향상
• 크로스 플랫폼 대응(Android/iOS 공통 분석 가능)
• 라이브 리로드 연동으로 빠른 피드백 루프 제공

 

- 추천 워크플로우

1. 기능 개발 후 Hot Reload로 확인
2. UI 이상 발생 시 Inspector 활용
3. 느려지는 부분이 있다면 Timeline 분석
4. 주기적으로 Memory/CPU Profiler로 앱 상태 체크
5. QA 테스트 전 Performance 그래프 점검