Flutter & Dart DevTools 사용하기

📊 Flutter & Dart DevTools 정리

Flutter와 Dart DevTools는 앱의 동작을 분석·디버깅·최적화하는 데 특화된 웹 기반 툴입니다.
아래는 DevTools에서 제공하는 주요 기능과 사용 방법입니다.

---

◆ 설치 방법

1단계. DevTools 준비하기

1. Flutter SDK 설치
   • Flutter SDK를 설치하면 Dart SDK도 같이 들어있습니다.
   • SDK 안에 DevTools도 포함되어 있으므로 따로 다운로드할 필요는 없습니다.
2. VS Code 또는 Android Studio 설치
   • 두 IDE 모두 Flutter 플러그인을 제공하며, DevTools와 연동됩니다.
3. 환경 확인
   • 모든 체크가 초록 ✅ 이 나오면 준비 완료입니다.
4. flutter doctor

---

2단계. DevTools 실행하기

1. 터미널에서 실행
   • 실행하면 브라우저에서 http://127.0.0.1:9100 주소로 DevTools가 열립니다.
2. flutter pub global activate devtools devtools
3. VS Code에서 실행
   • Flutter 프로젝트 실행 후 → Run and Debug 탭에서 앱 실행
   • Debug Console에 "Dart DevTools" 버튼이 나타남 → 클릭하면 브라우저로 DevTools 열림
4. Android Studio에서 실행
   • 앱 실행 후 상단 메뉴에서 View > Tool Windows > Flutter DevTools 선택

---

3단계. DevTools 주요 화면

DevTools에는 여러 탭이 있습니다. 초보자가 가장 많이 쓰는 건 아래 4개예요.

1. Inspector
   • 위젯 트리 확인, 위젯 선택 및 레이아웃 구조 파악
   • "Select Widget Mode" 활성화 → 앱 화면에서 특정 위젯 클릭하면 코드 위치까지 바로 연결
2. Performance
   • 앱 프레임 드롭 여부, 렌더링 속도 확인
   • CPU 프로파일링 가능
3. Memory
   • 메모리 사용량 모니터링
   • 메모리 누수(Leaking) 확인
4. Logging / Debug Console
   • print() 로그 확인
   • 오류 메시지와 함께 Stack Trace 제공

---

4단계. 자주 쓰는 시나리오

1. 위젯 구조 확인
   • 앱 UI가 의도대로 안 보일 때 → DevTools의 Inspector로 위젯 계층 구조 확인
2. UI 성능 튜닝
   • 스크롤할 때 버벅임 → Performance 탭에서 프레임 드롭 원인 확인
3. 메모리 관리
   • 장시간 실행 시 앱이 무거워짐 → Memory 탭에서 객체 누적 현상 확인

---

✅ 정리

• Flutter SDK에 DevTools가 포함됨
• VS Code/Android Studio에서 바로 실행 가능
• Inspector, Performance, Memory를 가장 많이 사용
• 디버깅뿐만 아니라 앱 최적화에도 큰 도움

---

 

◆ 사용하기

1. Flutter Inspector (플러터 검사기)

✅ 개요

• 위젯 트리를 시각적으로 보여주는 도구
• 앱 UI를 구성하는 위젯 구조를 실시간 확인

⚙️ 사용 방법

1. DevTools에서 Inspector 탭 열기
2. Select Widget Mode 버튼 클릭
3. 앱 화면에서 원하는 UI 요소 클릭 → 해당 위젯 코드로 자동 연결

💡 활용 예시

• UI가 어긋날 때 정확히 어느 위젯에서 문제인지 확인
• Padding, Margin, Constraints 디버깅

---

2. Debugger (디버거)

✅ 개요

• 코드 실행 흐름을 멈추고, 변수 값이나 로직 확인 가능

⚙️ 사용 방법

1. 코드에 breakpoint(중단점) 추가
2. 앱 실행 후 디버깅 시작
3. 실행이 중단되면 변수 값, 호출 스택(Call Stack) 확인 가능

💡 활용 예시

• 특정 조건에서 함수가 제대로 호출되는지 확인
• Null 값이나 잘못된 데이터 추적

---

3. Logging View (로깅 보기)

✅ 개요

• print()나 debugPrint()로 출력한 로그 확인
• 네트워크 요청, 프레임워크 이벤트 등 다양한 로그 표시

⚙️ 사용 방법

• DevTools의 Logging 탭에서 로그 실시간 모니터링
• 검색창에서 키워드로 필터링 가능

💡 활용 예시

• API 호출 응답값 확인
• 특정 이벤트 발생 시점 추적

---

4. Performance View (성능 보기)

✅ 개요

• 앱이 60fps/120fps를 유지하는지 확인
• 프레임 빌드/렌더링 시간 분석

⚙️ 사용 방법

1. DevTools → Performance 탭
2. 앱 실행 후 "Record" 버튼 클릭
3. 앱에서 동작 수행 → 기록된 성능 데이터 분석

💡 활용 예시

• 스크롤할 때 버벅임 원인 찾기
• 프레임 드롭 발생 구간 분석

---

5. CPU Profiler (CPU 프로파일러)

✅ 개요

• CPU가 어떤 함수 실행에 시간을 많이 쓰는지 분석

⚙️ 사용 방법

1. Performance 탭 → CPU Profile Record 시작
2. 앱 동작 수행 → 기록 종료
3. 함수 호출 그래프(Call Tree) 확인

💡 활용 예시

• 비효율적인 연산이 어디에서 발생하는지 확인
• 루프, JSON 파싱, DB 쿼리 최적화

---

6. Memory View (메모리 보기)

✅ 개요

• 앱의 메모리 사용량 확인
• 객체가 계속 쌓이는 메모리 누수(Leak) 파악

⚙️ 사용 방법

1. DevTools → Memory 탭
2. 힙 스냅샷(Heap Snapshot) 찍기
3. 객체 증가/감소 추적

💡 활용 예시

• 화면 이동 시 객체가 해제되지 않고 쌓이는 문제 확인
• 메모리 최적화 필요 구간 찾기

---

7. Network View (네트워크 보기)

✅ 개요

• HTTP 요청/응답 모니터링
• API 호출, 응답 코드, 응답 속도 확인

⚙️ 사용 방법

1. DevTools → Network 탭
2. 앱에서 네트워크 요청 발생
3. 요청 URL, Method(GET/POST), 응답 시간, Body 확인

💡 활용 예시

• API 요청이 정상적으로 이루어졌는지 확인
• 느린 네트워크 응답 원인 파악

---

8. App Size Tool (앱 크기 도구)

✅ 개요

• 앱 빌드 결과물의 크기를 분석
• 어느 패키지나 라이브러리가 용량을 차지하는지 확인

⚙️ 사용 방법

1. 앱 빌드 후 flutter build apk --analyze-size 실행
2. DevTools에서 App Size 탭 열기
3. 패키지별 크기, 압축 전/후 용량 확인

💡 활용 예시

• 앱 크기 최적화 (불필요한 패키지 제거)
• 릴리즈 빌드 사이즈 줄이기

---

✨ 마무리

정리하면 DevTools는 단순 디버깅을 넘어서
👉 UI 확인(Inspector),
👉 실행 흐름 추적(Debugger, Logging),
👉 성능·CPU·메모리 분석(Performance, Profiler, Memory),
👉 네트워크 모니터링(Network),
👉 빌드 사이즈 관리(App Size)

까지 앱 품질 개선에 필요한 모든 도구를 제공합니다.