Kotlin/JS 코드 디버깅

Kotlin/JS 코드 디버깅

Kotlin/JS 코드를 브라우저, IDE, Node.js에서 어떻게 디버깅하는지 배워볼게요.

출처: Debug Kotlin/JS code

본문

자바스크립트 **소스 맵(source map)**은 번들러나 미니파이어가 만들어 낸 압축 코드와 개발자가 작업하는 실제 소스 코드 사이의 매핑을 제공해요. 이 덕분에 실행 중인 코드를 디버깅할 수 있습니다.

Kotlin Multiplatform Gradle 플러그인은 프로젝트 빌드용 소스 맵을 자동으로 생성해서, 추가 설정 없이도 사용할 수 있게 해 줍니다.

브라우저에서 디버깅하기

대부분의 최신 브라우저는 페이지 내용을 검사하고 그 위에서 실행되는 코드를 디버깅하는 도구를 제공해요. 자세한 내용은 사용 중인 브라우저의 문서를 참고하세요.

브라우저에서 Kotlin/JS를 디버깅하려면:

  1. 사용 가능한 run Gradle 태스크 중 하나를 호출해 프로젝트를 실행하세요(예: jsBrowserDevelopmentRun). Kotlin/JS 실행에 대해 자세히 알아보아요.
  2. 브라우저에서 페이지로 이동한 다음 개발자 도구를 실행하세요(예: 마우스 오른쪽 클릭 후 Inspect 선택). 인기 있는 브라우저에서 개발자 도구를 찾는 방법을 알아봐요.
  3. 프로그램이 콘솔에 정보를 기록하고 있다면, Console 탭으로 이동해 이 출력을 확인하세요. 브라우저에 따라 이러한 로그는 해당하는 Kotlin 소스 파일과 줄을 참조할 수 있어요.

오른쪽의 파일 참조를 클릭하면 해당 코드 줄로 이동합니다. 또는 직접 Sources 탭으로 전환해 파일 트리에서 필요한 파일을 찾을 수도 있어요. Kotlin 파일로 이동하면 압축된 JavaScript가 아니라 일반적인 Kotlin 코드가 표시됩니다.

이제 프로그램 디버깅을 시작할 수 있어요. 줄 번호 중 하나를 클릭해 중단점(breakpoint)을 설정하세요. 개발자 도구는 한 문장 안에서도 중단점 설정을 지원합니다. 일반 JavaScript 코드와 마찬가지로, 설정한 중단점은 페이지를 새로고침해도 유지됩니다. 덕분에 스크립트가 처음 로드될 때 실행되는 Kotlin의 main() 메서드도 디버깅할 수 있어요.

IDE에서 디버깅하기

Ultimate 구독이 있는 IntelliJ IDEA는 개발 중 코드를 디버깅할 수 있는 강력한 도구 모음을 제공합니다.

IntelliJ IDEA에서 Kotlin/JS를 디버깅하려면 JavaScript Debug 구성이 필요해요. 이러한 디버그 구성을 추가하려면:

  1. Run | Edit Configurations로 이동하세요.
  2. **+**를 클릭하고 JavaScript Debug를 선택합니다.
  3. 구성 Name을 지정하고 프로젝트가 실행되는 URL을 입력하세요(기본값은 http://localhost:8080).
  4. 구성을 저장합니다.

이제 프로젝트를 디버깅할 준비가 되었어요!

  1. 사용 가능한 run Gradle 태스크 중 하나를 호출해 프로젝트를 실행하세요(예: jsBrowserDevelopmentRun). Kotlin/JS 실행에 대해 자세히 알아보아요.
  2. 앞에서 만든 JavaScript 디버그 구성을 실행해 디버깅 세션을 시작합니다.

IntelliJ IDEA의 Debug 창에서 프로그램의 콘솔 출력을 볼 수 있어요. 출력 항목은 해당하는 Kotlin 소스 파일과 줄을 참조합니다.

오른쪽의 파일 참조를 클릭하면 해당 코드 줄로 이동해요.

이제 IDE가 제공하는 모든 도구(중단점, 스테핑, 표현식 평가 등)를 사용해 프로그램 디버깅을 시작할 수 있습니다. IntelliJ IDEA에서 디버깅에 대해 자세히 알아보아요.

IntelliJ IDEA의 현재 JavaScript 디버거 한계 때문에, 중단점에서 실행이 멈추도록 하려면 JavaScript 디버그를 다시 실행해야 할 수도 있어요.

Node.js에서 디버깅하기

프로젝트가 Node.js를 대상으로 한다면, 이 런타임에서 디버깅할 수 있어요.

Node.js를 대상으로 하는 Kotlin/JS 애플리케이션을 디버깅하려면:

  1. build Gradle 태스크를 실행해 프로젝트를 빌드하세요.
  2. 프로젝트 디렉터리 안의 build/js/packages/your-module/kotlin/ 디렉터리에서 Node.js용 결과물인 .js 파일을 찾습니다.
  3. Node.js 디버깅 가이드에 설명된 대로 Node.js에서 디버깅해요.

다음 단계

이제 Kotlin/JS 프로젝트에서 디버그 세션을 시작하는 방법을 알았으니, 디버깅 도구를 효율적으로 사용하는 법을 배워 보아요:

문제가 생기면

Kotlin/JS 디버깅 중 문제가 생기면 이슈 트래커 YouTrack에 신고해 주세요.

더 알아보기