Dart DevTools: 디버깅·성능 도구 모음

Dart DevTools는 Dart와 Flutter를 위한 디버깅 및 성능 도구 모음이에요. 이 도구들은 dart 도구의 일부로 배포되며, IDE나 dart run, webdev 같은 도구들과 함께 동작해요.

출처: Dart DevTools

본문

다음 표는 흔한 Dart 앱 유형에서 사용할 수 있는 도구를 보여줘요.

도구	Flutter 모바일/데스크톱	Flutter 웹	기타 웹	명령줄
Debugger	지원	지원	지원	지원
Logging view	지원	지원	지원	지원
App size tool	지원			지원
CPU profiler	지원			지원
Memory view	지원			지원
Network view	지원			지원
Performance view	지원			지원
Flutter inspector	지원	지원

앱 유형별(예: 명령줄 앱) Dart DevTools 사용법은 맨 위 줄의 앱 유형을 클릭하면 돼요. 개별 도구(예: 디버거)에 대한 자세한 내용은 왼쪽 열의 도구 이름을 클릭하면 봐요.

표에서 보듯, Dart DevTools에서 디버거와 로깅 뷰만 모든 앱 유형에서 사용할 수 있어요. 웹 앱은 타임라인, 메모리, 성능 뷰를 사용할 수 없고, 대신 Chrome DevTools 같은 브라우저 도구를 사용할 수 있어요.

Flutter inspector는 Flutter 앱에서만 동작해요. 다른 웹 앱은 Chrome DevTools 같은 브라우저 도구를 사용해야 해요.

명령줄 앱

DevTools로 실행 중인 명령줄 앱의 소스 레벨 디버깅을 하거나, 일반적인 로그와 진단 정보를 볼 수 있어요.

1. 대상 앱 시작하기

디버그하거나 관찰하려는 Dart 명령줄 앱의 메인 파일을 실행하려면 dart run --observe 명령어를 사용해요. 선택적으로 --pause-isolates-on-start를 추가하면 스크립트 시작 시 실행이 자동으로 멈춰요.

$ cd path/to/dart/app
$ dart run --pause-isolates-on-start --observe main.dart

The Dart VM service is listening on http://127.0.0.1:8181/afZySiNbDPg=/
The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/afZySiNbDPg=/devtools/#/?uri=ws%3A%2F%2F127.0.0.1%3A8181%2FafZySiNbDPg%3D%2Fws

Dart DevTools 디버거·프로파일러 URL을 기록해 두세요. 다음 단계에서 필요해요.

2. DevTools를 열고 대상 앱에 연결하기

Dart DevTools 디버거·프로파일러 URL을 복사해서 Chrome 브라우저 창의 주소 표시줄에 붙여 넣으세요.

Chrome에서 그 URL을 방문하면 Dart DevTools UI가 나타나고 대상 앱에 대한 정보를 보여줘요. Debugger를 클릭하면 앱 디버깅을 시작할 수 있어요.

VS Code 디버그 설정

Timeline 뷰 같은 기능에 접근하려면 DevTools가 활성화된 상태로 Dart 명령줄 앱을 실행하도록 VS Code를 설정해요.

VS Code의 디버그 설정

Dart 앱의 VS Code 디버그 설정 예시는 다음 표와 같아요.

설정	`vmAdditionalArgs`	설명
기본 VS Code 디버그	`[]`	표준 디버깅. 디버거와 로깅을 포함하고 타임라인 데이터는 제외해요.
타임라인 스트림 포함	`["--timeline_streams=VM,Isolate,GC"]`	타임라인, 메모리, 성능 프로파일링을 위한 타임라인 스트림을 활성화해요.

예시 launch.json

타임라인 이벤트를 활성화하려면 .vscode/launch.json에 다음 설정을 추가하세요.

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Dart with DevTools Timeline",
      "type": "dart",
      "request": "launch",
      "vmAdditionalArgs": [
        "--timeline_streams=VM,Isolate,GC"
      ],
      "program": "main.dart"
    }
  ]
}

"main.dart"를 앱의 메인 파일 경로로 바꾸세요.

DevTools 연결하기

설정한 launch 설정으로 VS Code에서 디버깅을 시작해요.
VS Code 디버그 콘솔이나 터미널 출력에서 다음 같은 줄을 찾아요.

The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/aBcDeFg123=/devtools/#/?uri=...

DevTools URL을 복사해 Chrome 브라우저 창에 붙여 넣어요.
DevTools에서 실행 중인 앱의 타임라인, 메모리, 성능을 확인해요.

Flutter 앱

어떤 플랫폼(웹 포함)의 Flutter 앱에서도 DevTools를 사용하는 방법에 대한 자세한 내용은 flutter.dev의 DevTools 문서를 참고하세요.

기타 웹 앱

Dart DevTools를 사용할 수 있도록 웹 앱을 실행하려면 webdev serve 명령어를 --debug 또는 --debug-extension 플래그와 함께 사용해요.

$ webdev serve --debug

자세한 내용은 Dart 웹 앱 디버깅을 참고하세요.

Dart DevTools: 디버깅·성능 도구 모음