플러터 인스펙터, devtools 디바이스 연결 종료 에러 트러블슈팅

Flutter inspector - devtools

플러터를 사용하여 개발을 할 때 제공해주는 유용한 툴이 있다.
web 개발 할 때 마우스 우클릭해서 inspect (검사) 기능으로 화면 레이아웃과 같은 개발도구를 제공 하듯, flutter에서도 자체 debug tool이 있는데 바로 devtools 라고 하는 pub dev 라이브러리 이다.

IDE의 inspector 기능을 통해 확인 할 수 있고, flutter run을 했을 때 로컬에서 직접 사용 할 수 있는데, 이는 다음과 같다.

근데 처음 실행 했을 때 위젯트리로 보여지는 아이콘을 클릭하면 "Lost connection to device"라는 메시지와 함께 비정상적으로 종료 되는 에러를 마주할 수 있다.


지금까지는 그런 에러를 마주하면 무시를 하거나, 에러를 피하기 위해 위젯 트리 구조만 확인하고 클릭을 하지는 않았는데 트러블 슈팅 방법을 찾아보니 간단해서 여기에 남겨본다.

1. 먼저 해당 에러는 devtool의 최신 버전이 dependency 버그를 가지고 있어 발생하는 문제이다.

2. 따라서 devtools library의 버전을 old version으로 fall back하고, IDE를 재시작 후 run하면 된다.

3. 맥의 경우, 여기에 shell script 환경변수 경로 설정까지 해주면 에러를 방지, 해결할 수 있다.

$ flutter pub global activate devtools 0.9.6+3


$ vim ~/.zshrc 

실행 후 아래 환경 변수 추가

export PATH="$PATH":"$HOME/Documents/Flutter_development/flutter/.pub-cache/bin

IDE 재시작 후 프로젝트 디렉토리 터미널에서,

$ flutter pub global list
$ flutter pub global run devtools
$ flutter run

이렇게 한 후 실행 했을 때 위젯트리를 눌러도 connection이 종료되지 않는다!

이제 디바이스 강제 종료 에러도 해결했으니 디버그 툴 잘 활용해서 즐거운 플러터 코딩세계를 만끽해보자.

Reference

• Unable to connect to VM service - github discussion