Dart 웹 앱 디버깅하기

Dart 웹 앱 디버깅하기

Dart IDE, Dart DevTools, 그리고 Chrome DevTools 같은 브라우저 도구를 사용해서 Dart 웹 앱을 디버깅할 수 있어요. 어디서부터 손을 대야 할지, 어떤 도구가 어디에 강한지 차근차근 알려드릴게요.

출처: Debugging Dart web apps

본문

  • 앱의 로직(동작)을 디버깅하려면 IDE, Dart DevTools, 또는 브라우저 도구를 사용해요. Dart 코드를 검사하고 자동으로 다시 로드하는 데는 브라우저 도구보다 Dart DevTools가 더 뛰어나요.
  • 앱의 모양(HTML/CSS)과 성능을 디버깅하려면 IDE나 Chrome DevTools 같은 브라우저 도구를 사용해 주세요.

개요

앱을 서빙하려면 webdev serve(커맨드라인 또는 IDE에서)를 사용해서 Dart 개발 컴파일러를 시작해요. Dart DevTools를 활성화하려면 --debug 또는 --debug-extension 옵션(커맨드라인 또는 IDE에서)을 추가해 주세요.

$ webdev serve --debug

webdev의 --debug 플래그로 앱을 실행하면 Alt+D(macOS에서는 Option+D)를 눌러 Dart DevTools를 열 수 있어요.

Chrome DevTools를 열려면 Control+Shift+I(macOS에서는 Command+Option+I)를 눌러 주세요. Chrome DevTools로 앱을 디버깅하고 싶다면 소스 맵(source maps)을 사용해서 컴파일러가 만들어 낸 JavaScript 대신 Dart 소스 파일을 표시할 수 있어요. Chrome DevTools 사용법에 대한 자세한 내용은 Chrome DevTools 문서를 참고해 주세요.

Dart DevTools나 Chrome DevTools로 Dart 웹 앱을 디버깅하려면 다음 소프트웨어가 필요해요.

  • Google Chrome.
  • Dart SDK 버전 2.0.0 이상.
  • 다음 개발 환경 중 하나:
    • 커맨드라인: webdev(Dart DevTools와 Chrome DevTools 양쪽에 필요)와 devtools(Dart DevTools에 필요) 같은 Dart 커맨드라인 도구 패키지. 또는
    • 웹 개발을 지원하는 Dart IDE 또는 에디터.
  • 디버깅할 Dart 웹 앱.

Dart DevTools 시작하기

이 절에서는 Dart DevTools로 웹 앱을 디버깅하는 기초를 안내해 드릴게요. 이미 디버깅할 준비가 된 앱이 있다면 테스트 앱 만들기(1단계)는 건너뛰어도 되지만, 설명을 내 앱에 맞게 조정해 주셔야 해요.

  1. 선택 사항 — webdev 저장소를 클론해서 그 예제 앱으로 Dart DevTools를 가지고 놀아 보세요.
  2. 선택 사항 — Dart Debug Extension을 설치해서 이미 실행 중인 Chrome 인스턴스에서 앱을 실행하고 Dart DevTools를 열 수 있게 하세요.
  3. 앱의 최상위 디렉터리에서 dart pub get을 실행해 의존성을 받아요.
$ cd example
$ dart pub get
  1. IDE나 커맨드라인의 webdev를 사용해서 앱을 디버그 모드로 컴파일하고 서빙해요.

참고 — 첫 컴파일은 전체 앱을 컴파일해야 해서 가장 오래 걸려요. 그 이후의 새로고침은 훨씬 빨라진답니다.

커맨드라인에서 webdev를 쓴다면, 이미 실행 중인 Chrome 인스턴스에서 앱과 디버거를 실행할지에 따라 명령이 달라져요.

  • Dart Debug Extension이 설치되어 있고 기존 Chrome 인스턴스를 사용해 디버깅하고 싶다면:
$ webdev serve --debug-extension
  • 그렇지 않다면 다음 명령을 사용하세요. 이 명령은 새 Chrome 인스턴스를 띄우고 앱을 실행해요.
$ webdev serve --debug
  1. 앱이 아직 실행 중이 아니라면 Chrome 브라우저 창에서 열어 주세요. 예를 들어 webdev serve --debug-extension을 인자 없이 썼다면 http://127.0.0.1:8080을 열면 돼요.
  2. 현재 창에서 실행 중인 앱을 디버깅하려면 Dart DevTools를 열어요.
    • Dart Debug Extension이 설치되어 있고 webdev에 --debug-extension 플래그를 썼다면, 브라우저 창 오른쪽 위의 Dart 로고를 클릭해요.
    • webdev에 --debug 플래그를 썼다면 Alt+D(macOS에서는 Option+D)를 눌러요.

Dart DevTools 창이 열리면 앱의 main 파일 소스 코드를 보여줘요.

  1. 타이머나 이벤트 핸들러 안에 브레이크포인트를 설정해 보세요. 코드 줄 왼쪽을 클릭하면 되는데, 예를 들어 이벤트 핸들러나 타이머 콜백의 첫 줄의 줄 번호를 클릭하면 돼요.
  2. 함수 호출을 일으키는 이벤트를 트리거해요. 브레이크포인트에서 실행이 멈추게 돼요.
  3. Variables 패널에서 변수 값을 검사해요.
  4. 스크립트 실행을 다시 이어가고, 이벤트를 다시 트리거하거나 Pause를 눌러요. 실행이 다시 멈춥니다.
  5. Step In, Step Over, Step Out 버튼으로 코드를 한 줄씩 따라가 보세요.

참고 — Dart DevTools는 SDK 코드 안으로는 스테핑하지 않아요. 예를 들어 print() 호출에서 Step In을 누르면, print()를 구현하는 SDK 코드가 아니라 다음 줄로 이동해요.

  1. 소스 코드를 바꾸고 앱이 실행 중인 Chrome 창을 새로고침해요. 앱이 빠르게 다시 빌드되고 로드돼요. issue 1925이 고쳐질 때까지는 앱을 새로고침하면 브레이크포인트가 사라지니 참고해 주세요.
  2. Logging 버튼을 클릭해서 stdout, stderr, 시스템 로그를 확인해요.

커맨드라인 도구 패키지 받기

IDE나 Dart 지원 에디터 대신 커맨드라인을 쓴다면 webdev 도구가 필요해요. Dart DevTools는 SDK에 포함되어 있어요.

$ dart pub global activate webdev

PATH 환경 변수가 올바르게 설정되어 있다면 이제 커맨드라인에서 이 도구들을 사용할 수 있어요.

$ webdev --help
A tool to develop Dart web projects.
...

PATH 설정에 대한 정보는 dart pub global 문서를 참고해 주세요.

Dart SDK를 업데이트할 때마다 다시 activate 해서 도구를 업데이트해 주세요.

$ dart pub global activate webdev # update webdev

프로덕션 코드 디버깅하기

이 절에서는 Chrome, Firefox, Safari에서 프로덕션 컴파일된 코드를 디버깅하는 팁을 알려드릴게요. 소스 맵을 지원하는 브라우저(예: Chrome)에서는 JavaScript 코드만 디버깅할 수 있어요.

팁 — 가능하면 프로덕션 코드보다는 webdev 같은 개발 서버가 제공하는 코드를 디버깅하는 게 좋아요.

어떤 브라우저를 쓰든, 최소한 잡지 않은 예외(uncaught exceptions), 어쩌면 모든 예외에서 일시정지하는 것을 켜 두세요. dart:async처럼 사용자 코드를 try-catch로 감싸는 프레임워크는 모든 예외에서 일시정지하는 것을 추천해요.

Chrome

Chrome에서 디버깅하려면:

  • Chrome DevTools 문서에 설명된 대로 Developer Tools 창을 여세요.
  • SourceMaps in Chrome 비디오에 설명된 대로 소스 맵을 켜세요.
  • 모든 예외 또는 잡지 않은 예외에서만 디버깅을 활성화하세요. (How to set breakpoints 참고)
  • 앱을 새로고침하세요.

Edge

Edge에서 디버깅하려면:

  • Edge를 최신 버전으로 업데이트하세요.
  • Developer Tools(F12)를 로드하세요.
  • 앱을 새로고침하세요. 디버거 탭에 source-mapped 파일이 표시돼요.
  • 예외 동작은 Ctrl+Shift+E로 조절할 수 있어요. 기본값은 잡지 않은 예외에서 중단(Break on unhandled exceptions)이에요.

Firefox

Firefox에서 디버깅하려면:

  • Firefox developer tools 문서에 설명된 대로 Web Developer Tools 창을 여세요.
  • 아래 그림과 같이 Pause on exceptions를 활성화하세요.
  • 앱을 새로고침하세요. Debugger 탭에 source-mapped 파일이 표시돼요.

Safari

Safari에서 디버깅하려면:

  • Safari Web Inspector Tutorial에 설명된 대로 Develop 메뉴를 켜세요.
  • 모든 예외 또는 잡지 않은 예외에서만 중단을 활성화하세요. (Safari Developer Help의 Add a JavaScript breakpoint 참고)
  • 앱을 새로고침하세요.

리소스

더 자세한 내용은 다음을 참고해 주세요.

  • 내 IDE 문서
  • Dart DevTools 문서
  • webdev 도구 문서
  • webdev 패키지 문서

더 알아보기