[플러터]Flutter / Flutter Performance 에서 새롭게 바뀐 Flutter Inspector 사용법 (Flutter DevTools)

안드로이드 스튜디오에서 최근 플러터 플러그인 버전부터 DevTools와 관련되어서 업데이트가 진행되었다.

업데이트 내용을 살펴보면 원래 우리가 쓰던 기존의 Flutter Performance는 삭제가 되고 새롭게 Flutter DevTools에 병합이 되었다. 오늘은 원래 Flutter Performance에 있던 기능이 어디로 병합됐는지 알아보고 사용해 볼 것이다.

 

https://plugins.jetbrains.com/plugin/9212-flutter

Flutter - IntelliJ IDEs Plugin | Marketplace

 

우선 기본적으로 Tool Window에서 flutter performance가 삭제가 되었다. 쉬프트 두 번 눌러서 검색을 해도 나오지 않을 것인데 그렇다면 원래 있던 그 기능이 어디로 갔냐 하면 Tool Window에 있는 Flutter DevTools 랑 Flutter Inspector로 나눠져서 들어갔다. 오늘은 그중에서도 Flutter Inspector로 들어간 기능을 살펴볼 것이다.

Flutter Inspector 사용하기

https://docs.flutter.dev/tools/devtools/inspector

Use the Flutter inspector

 

순서대로 알아볼 것인데 첫 번째로 알아볼 것은 select Widget Mode이다.

 

Select widget mode

이 버튼은 우리가 흔히 웹사이트에서 사용하는 F12에 들어가 있는 셀렉트 버튼이다.

이름에서도 알 수 있듯이 이걸 활성화한 후 위젯을 클릭하면 그 위젯이 선택되고 그 위젯의 코드로 이동된다.

(진짜 겁나 편하고 좋다.)

Select widget mode 를 사용하는 모습

 

Slow animation

이름에서도 알 수 있듯 느리게 보이게 해 준다. 이걸로 움직이는 애니메이션이 어떻게 움직이는지 더욱 자세히 관찰할 수 있고 내비게이션 같은 걸로 이동할 때 창이 열리는 것도 볼 수 있다. 

Slow animation 적용전

Slow animation 적용후

Show guidelines

원래 Flutter Performance에 있던 기능으로 그대로 계승된 것 같다. 

말 그대로 얼마나 패딩이 먹혀있는지, 크기가 어느 정도인지 가이드라인을 시각적으로 제공한다.

 

가이드라인이 어떻게 보이는지 공식문서에 나와있는 대로 간단히 설명해 주겠다.

 

Render boxes

 

화면에 그려지는 위젯은 파란색 렌더박스로 표시된다.

 

Alignments

네 개의 노란색 화살표로 표시된 부모 위젯에 대한 수직 및 슈평 오프셋을 나타내준다.

Padding

패딩은 반투명한 파란색으로 표시된다.

Scroll views

 

스크롤 콘텐츠가 있는 위젯은 녹색 화살표로 표시된다.

Clipping

ClipRect위젯 같은 것을 사용할 때 클리핑은 가위 아이콘이 있는 점선 분홍색 선으로 표시된다.

Spacers

SizedBox 같은 자식이 없는 위젯은 이와 같은 회색 배경으로 표시된다.

 

show Baselines

이것도 마찬가지로 원래 Flutter Performance에 있던 기능인데 텍스트의 기준선이 어디인지 시각적으로 알려준다.

Highlight repaints

이게 개인적으로 가장 재밌는 기능인 것 같은데 화면에서 다시 칠해지는 부분의 테두리를 표시해 준다. 계속 바뀌면 예쁜 무지개를 볼 수 있다.

Highlight oversized images

이것도 위에 거 못지않게 굉장히 재밌는데 너무 메모리를 많이 사용하는 이미지를 뒤집고, 색을 반전시킨 다음에 표시해 준다.

 

 

이렇게 간단하게 기능들을 알아보았다. 도움이 되었길 바라며 포스팅 마치겠다.

반응형