2023. 4. 26. 13:58ㆍ모바일어플개발/Flutter
안녕하세요~ totally 개발자입니다.
DevTools
오늘은 DevTools 활용하는 방법에 대해서 살펴보도록 하겠습니다. 이 DevTools은 여러 유용한 기능들을 가지고 있습니다. DevTools는 Dart와 Flutter를 위한 성능 및 디버깅 도구이며 UI 레이아웃, 상태(state)를 점검할 수 있도록 도와주며 그 외 CPU, Network, Debug Memory issue, 코드 분석, 진단 등 여러 복합적인 기능들을 제공하고 있습니다.
실행 방법
기본적으로 Flutter, dart 확장자가 설치되어 있다면 별도로 설치하실 필요는 없으며 Visual Studio Code(VSCode)에서 F1를 눌러서 나오는 Command palatte에 devtools 검색하여 실행할 수 있습니다. 이 작업 전에 먼저 Debugging 모드로 앱을 구동해줍니다. F5 누르시면 Debug모드로 실행할 수 있습니다. 아래처럼 실행해주시면 됩니다.
검색하거나 아래 리스트에 바로 보이는 Flutter: Open DevTools를 선택해줍니다.
위의 여러 카테고리 중에 첫 번째 Open Widget Inspector Page를 눌러봅니다.
아래처럼 Widget Tree부분에 TextFormField를 하나 클릭해보시면 왼쪽에 코드가 보여지고 Layout Explorer 부분에서 해당 위젯에 대한 UI Layout 구조도 확인할 수 있습니다. 이 예제는 Form 코드의 예시를 사용했습니다.
CPU Profiler를 사용해본 모습입니다.
Memory 부분입니다.
이렇게 여러 가지 DevTools 카테고리를 활용하여 앱의 현재 상태를 점검해볼 수 있습니다.
References:
https://docs.flutter.dev/tools/devtools/inspector
Using the Flutter inspector
Learn how to use the Flutter inspector to explore a Flutter app's widget tree.
docs.flutter.dev
'모바일어플개발 > Flutter' 카테고리의 다른 글
| [060] 플러터 (Flutter) 배우기 - freezed 사용하기 1 (0) | 2023.04.28 |
|---|---|
| [059] 플러터 (Flutter) 배우기 - immutable 객체 사용하기 (0) | 2023.04.27 |
| [057] 플러터 (Flutter) 배우기 - JSON Serializable (직렬화) 사용 (0) | 2023.04.21 |
| [056] 플러터 (Flutter) 배우기 - QR 코드 생성하기 (2) | 2023.04.21 |
| [055] 플러터 (Flutter) 배우기 - 라이트, 다크 모드(밝은 테마, 어두운 테마 만들기) (0) | 2023.04.18 |