플러터 데브툴즈

플러터 데브툴즈(Flutter DevTools)

다음처럼 파란 다트 아이콘을 누르면 데브툴즈를 열 수 있다.

 

데브툴즈는 플러터 앱을 디버깅할 때 유용한 툴들을 제공한다.
Flutter Inspector : 위젯 트리를 탐색하고 디버깅한다.
Timeline : 앱의 프레임 레이트와 CPU 성능을 보여준다.
Memory : 다트의 객체들의 메모리 할당 상태를 보여주고, 메모리 누수를 찾는 것을 돕는다.
Performance : 플러터 앱 세션을 기록하고 보여준다.
Debugger : 콜 스택에서 브레이크포인트와 변수 검사를 지원한다.
Network : 플러터 앱 내부의 HTTP, HTTPS, 웹 소켓 트래픽 등을 검사한다.
Logging : 다트 런타임에서 발생한 이벤트와 앱 레벨 로그 이벤트를 보여준다.
App Size : 앱의 총 크기를 분석하는 것을 돕는다.

플러터 검사기(Flutter Inspector)

우선은 플러터 검사기(Flutter Inspector)에 대해서만 다루기로 하고, 좀 더 자세한 정보는 다음 링크를 참고한다.flutter.dev/docs/development/tools/devtools/overview

플러터 검사기는 4가지 이점이 있다.
위젯 트리를 시각화한다.
트리의 특정 위젯의 프로퍼티들을 검사한다.
레이아웃 탐색기를 통해 여러 다른 레이아웃들을 실험할 수 있다.
트랜지션이 어떻게 보이는지 보여주는 슬로우 애니메이션을 제공한다.

플러터 검사기를 사용할 때 몇 가지 중요한 툴들이 있다.

Select Widget Mode : 활성화되면, 특정 위젯을 탭했을 때 그 프로퍼티를 검사할 수 있게 한다.

위젯 트리의 아무 엘리먼트를 클릭하는 것으로도 위젯을 강조할 수 있다.

Refresh Tree : 현재 위젯의 정보를 리로드한다.

Slow Animation : 애니메이션을 느리게 하여 UI 트랜지션을 시각적으로 검사할 수 있다.

Debug Paint : 시각적인 디버깅 힌트를 보여준다. 이는 위젯의 테두리, 패딩, 정렬 등을 체크할 수 있게 한다.

 

Paint Baselines : 활성화되면, RenderBox가 각 텍스트의 baseline에 밑줄을 치도록 한다.

 

Repaint Rainbow : 플러터가 위젯을 다시 페인트할 때마다 위젯에 랜덤 테두리를 추가한다.
다음처럼 디스코 모드도 가능하다.

 

Debug Banner : 앱 우측 상단의 디버그 배너를 활성화/비활성화할 수 있다. 스크린샷을 찍을 때에는 이 배너를 끄는 게 필요하다.

 

디테일 트리(Detail Tree)와 레이아웃 탐색기(Layout Explorer)

플러터 검사기에서는 위젯 트리와 디테일 트리, 레이아웃 탐색기를 이용할 수 있다.
왼쪽 패널에 있는 위젯 트리에서는 root부터 시작해서 현재 앱에서 보여지는 화면에 따른 위젯 트리를 확인할 수 있다.
각 위젯을 누르면 오른쪽에 디테일 트리를 통해 서브트리를 검사할 수 있고, 위젯을 구성하는 중요한 프로퍼티들을 확인할 수 있다. 렌더 오브젝트를 참조하는 것 또한 확인할 수 있다.
디테일 트리는 위젯의 프로퍼티가 작동하는 것을 검사하고 실험할 수 있다.

 

레이아웃 탐색기는 Expanded, Row, Column 등과 같은 Flex-based 위젯들만 지원한다.
레이아웃 탐색기는 플렉스 위젯의 레이아웃을 실시간으로 수정하는데 유용하다.
탐색기는 다음 3가지의 수정을 지원한다.
mainAxisAlignment, crossAxisAlignment, flex

 

Main Axis와 Cross Axis의 start를 누르면 start를 다른 옵션으로 변경할 수 있다.
또한 간단하게 row나 column 등을 만들 수도 있다.
이것으로 실시간으로 레이아웃을 변경할 수 있다.