<코드 스페이스 상에서 플러터 앱 구동 시의 디버그 오류 해결법>

확인 해 본 결과, GitHub Codespace 에 설치 가능한 VS Code 확장 기능인 Flutter, Dart 확장 기능은 디버깅이 잘 작동하지 않는 것으로 보입니다. 아래 방법을 대신 활용해 보시기 바랍니다.

1. 터미널에서 다음 명령으로 Flutter 앱을 시작합니다.

A.     flutter run -d web-server --web-hostname=0.0.0.0 --web-enable-expression-evaluation

1. 포트 포워딩 탭에 나타난 2개 포트 모두 “Make public” 하여 개방 해 주세요. 디버깅에 필요한 데이터 정상 로드를 위함입니다.
2. 새로 포워딩 된 포트 중 첫 번째 포트 항목을 클릭하여 엽니다.
3. Dart Debug Extension 을 활성화 합니다.
4. 크롬 개발자 도구를 열어서 디버깅 합니다.

A.     Breakpoint 는 개발자 도구 Source 탭 – top – 접속중인 페이지 주소 – packages - <프로젝트 폴더 이름> 에 작성한 코드가 나옵니다. 여기 나오는 Dart 코드를 열어 Breakpoint 를 지정하여 바로 사용 가능합니다.

B.     log(), debugPrint() 함수 출력물은 콘솔 탭에 출력됩니다.

Flutter inspector 로 UI 요소 조사도 필요하실 텐데요, 아직 해당 기능 사용 방법은 확인 중에 있습니다. 확인되면 추가적으로 답변 드리도록 하곘습니다.