중급

Debugging과 DevTools

Flutter Inspector, Performance, Memory, Network 도구로 문제를 찾습니다.

핵심 개념

Debugging과 DevTools 주요 항목

DevTools 역할

Inspector는 위젯 트리와 레이아웃 문제를 확인하는 데 유용합니다.

언제 쓰나: Performance view는 프레임 렌더링과 jank를 추적합니다.

Flutter에서: Memory와 Network view는 메모리 사용과 네트워크 요청을 살펴볼 때 사용합니다.

flutter run
# DevTools에서 Performance와 Inspector를 확인합니다.

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter run
Launching lib/main.dart...
Flutter DevTools available.')
      ],
    )
    ],
  ),
)

디버깅 습관

문제를 추측으로 고치기보다 먼저 재현 조건과 측정 지표를 확인합니다.

언제 쓰나: 레이아웃 문제는 Inspector와 debug paint를 함께 사용하면 빠르게 찾을 수 있습니다.

Flutter에서: 릴리즈 빌드와 디버그 빌드의 성능 차이를 구분합니다.

flutter run
# DevTools에서 Performance와 Inspector를 확인합니다.

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter run
Launching lib/main.dart...
Flutter DevTools available.')
      ],
    )
    ],
  ),
)

확장 개념

DevTools 주요 화면

Flutter Inspector는 위젯 트리와 레이아웃 문제를 확인하는 데 유용합니다.
Performance view는 프레임 드롭과 렌더링 비용을 추적합니다.
Memory, Network, Logging 화면은 누수, 요청, 로그 흐름을 분석할 때 사용합니다.

코드

예제

flutter run
# 실행 중인 앱에서 DevTools 열기

Container(
  padding: const EdgeInsets.all(20),
  decoration: BoxDecoration(
    color: Colors.white,
    border: Border.all(color: const Color(0xFFDCE6EF)),
    borderRadius: BorderRadius.circular(8),
  ),
  child: Column(
    crossAxisAlignment: CrossAxisAlignment.start,
    children: [
      Container(
      padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
      decoration: BoxDecoration(
        color: const Color(0xFFEEF7FB),
        borderRadius: BorderRadius.circular(8),
      ),
      child: const Text(
        '실행 출력',
        style: TextStyle(fontSize: 20, fontWeight: FontWeight.w900),
      ),
    ),
      Column(
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text('$ flutter run
Launching lib/main.dart...
Flutter DevTools available.')
      ],
    )
    ],
  ),
)

다음 단계

실습 체크리스트

Inspector 열기Performance view 확인Network 요청 확인

출처세부 기준과 최신 변경 사항을 확인할 수 있습니다.
Flutter API Reference클래스, 메서드, 생성자 세부 정의를 확인합니다.
Dart languageDart 문법 자체가 궁금할 때 함께 봅니다.