[4] Flutter inspector / Dart DevTools 살펴보기

Android Studio 환경으로 우선 진행...

 

※ [1]~[3]을 거쳐왔다고 가정 (실행 환경 차이로 인해 일부 내용의 차이가 있을 수 있음)

 

• Android Studio 실행 & 예제 실행하기 (ex. flutter_gallery)

 

• 화면 우측 Flutter Inspector 탭 선택
  • 3개의 탭으로 위젯 구성을 살펴볼 수 있음.
    1. Widget
    2. Render Tree
    3. Performance : See Flutter Performance window 클릭하면 화면 하단에 window가 노출됨.
  • 7개 기능 도구 버튼 
    1. Enable Select Widget Mode
    2. Refresh Widget Info
    3. Show Performance Overlay
       
    4. Toggle Platform
    5. Show Debug Paint
       
    6. Show Paint Baselines
       
    7. Enable Slow Animations

• •  

 

---

 

• Dart DevTools 설치 & 열기
  • Android Studio 하단 Run탭에 아래 표시된 아이콘을 클릭하여 Dart DevTools 설치
    
  • 설치가 완료되면 아래의 url로 브라우저가 실행됨 (아이콘 상태는 'Open Dart DevTools'가 됨)
    http://127.0.0.1:4889/?uri=http://127.0.0.1:4583/qqT9NdViYKk=
  • 만약, Chrome이 아닐 경우 
    
  • Chrome일 경우
    
  • 8개 버튼/기능 구성
    
    1. Flutter Inspector : Android Studio의 Inspector와 동일한 기능
    2. Timeline : UI/GPU 사용률
    3. Memory : 메모리 사용률 모니터링
    4. Debugger : 디버깅 가능 
    5. Logging : 뭐...
    6. Hot Reload
    7. Hot Restart
    8. Send Feedback

 

• 다른 기능
  
  • Open Observatory 선택
    • http://127.0.0.1:7296/_KyVcNcLnMA= 주소로 브라우저 실행됨.
    • missing or invalid authentication code라고 나옴... 일단 넘어감.
    • timeline view에서 Observatory를 통해 화면 진입 (아래 내용 참고)
  • Open Timeline View
    • http://127.0.0.1:7296/_KyVcNcLnMA=/#/timeline 주소로 브라우저 실행됨
      
    • 기능 확인은 나중에....
    • 좌측 상단 Observatory 선택하면 Connect a VM이 보이는데 이걸 선택
    • http://127.0.0.1:4583/qqT9NdViYKk=/#/vm-connect 이 주소의 아래 화면이 보이는데 빨간 밑줄 클릭
      
    • 다음과 같은 화면으로 전환되고 (이게 Observatory화면인듯)
      빨강 박스안의 링크로 다양한(?) 내용 확인 가능
      

 

오늘은 이정도만...

 

[참고]

https://flutter.github.io/devtools/android_studio

https://github.com/flutter/devtools