Kotlin/Wasm 코드 디버깅하기

이 튜토리얼은 IntelliJ IDEA와 브라우저를 사용해 Kotlin/Wasm으로 만든 Compose Multiplatform 애플리케이션을 디버깅하는 방법을 보여 줍니다.

출처: Debug Kotlin/Wasm code

본문

시작하기 전에

Kotlin Multiplatform 개발용 환경을 설정하세요.
안내에 따라 Kotlin/Wasm을 타깃으로 하는 Kotlin Multiplatform 프로젝트를 만드세요.

📝 참고 IntelliJ IDEA에서 Kotlin/Wasm 코드를 디버깅하는 것은 IDE 버전 2025.3부터 지원됩니다. 현재 조기 접근 프로그램(EAP) 단계이며 곧 안정 버전이 될 예정이에요. WasmDemo 프로젝트를 다른 버전의 IntelliJ IDEA에서 만들었다면, 2025.3 버전으로 전환해 그 프로젝트를 열어 이 튜토리얼을 계속하세요. IntelliJ IDEA에서 Kotlin/Wasm 코드를 디버깅하려면 JavaScript Debugger 플러그인이 설치되어 있어야 합니다. 플러그인과 설치 방법에 대한 자세한 내용을 확인해 보세요.

IntelliJ IDEA에서 디버깅하기

만든 Kotlin Multiplatform 프로젝트에는 Kotlin/Wasm으로 구동되는 Compose Multiplatform 애플리케이션이 포함되어 있어요. 이 애플리케이션은 추가 구성 없이 IntelliJ IDEA에서 바로 디버깅할 수 있습니다.

IntelliJ IDEA에서 디버깅할 Kotlin 파일을 열어요. 이 튜토리얼에서는 Kotlin Multiplatform 프로젝트의 다음 디렉터리에 있는 Greeting.kt 파일을 사용할 거예요: WasmDemo/composeApp/src/wasmJsMain/kotlin/wasm.project.demo.wasmdemo
검사하고 싶은 코드의 줄 번호를 클릭해 중단점(breakpoint)을 설정하세요.
실행 구성 목록에서 composeApp[wasmJs]를 선택해요.
화면 상단의 디버그 아이콘을 클릭해 디버그 모드로 코드를 실행합니다.

애플리케이션이 시작되면 새 브라우저 창에서 열려요.

또한 IntelliJ IDEA에서 Debug 패널도 자동으로 열립니다.

애플리케이션 검사하기

📝 참고 브라우저에서 디버깅하는 경우에도 애플리케이션을 검사하는 동일한 단계를 따르면 됩니다.

애플리케이션의 브라우저 창에서 Click me! 버튼을 클릭해 애플리케이션과 상호작용해요. 이 동작은 코드 실행을 촉발하며, 실행이 중단점에 도달하면 디버거가 멈춥니다.
디버깅 창에서 디버깅 컨트롤 버튼을 사용해 중단점에서 변수와 코드 실행을 검사하세요:
- Step over는 현재 줄을 실행하고 다음 줄에서 멈춥니다.
- Step into는 함수를 더 깊이 조사해요.
- Step out은 현재 함수를 빠져나갈 때까지 코드를 실행합니다.
- Threads & Variables 창을 확인해 보세요. 이 창은 함수 호출의 순서를 추적하고 오류 위치를 정확히 찾는 데 도움을 줘요.
- 코드를 변경하고 애플리케이션을 다시 실행해 어떻게 동작하는지 확인해 보세요.
- 디버깅이 끝나면 중단점이 있는 줄 번호를 클릭해 중단점을 제거합니다.

브라우저에서 디버깅하기

이 Compose Multiplatform 애플리케이션을 추가 구성 없이 브라우저에서도 디버깅할 수 있어요.

개발용 Gradle 태스크(*DevRun)를 실행하면 Kotlin이 자동으로 소스 파일을 브라우저에 제공하므로, 중단점을 설정하고 변수를 검사하며 Kotlin 코드를 단계적으로 실행할 수 있습니다.

Kotlin/Wasm 프로젝트 소스를 브라우저에 제공하는 구성은 이제 Kotlin Gradle 플러그인에 포함되어 있어요. 이전에 이 구성을 build.gradle.kts 파일에 추가했다면 충돌을 피하기 위해 제거해야 합니다.

💡 팁 이 튜토리얼은 Chrome 브라우저를 사용하지만, 다른 브라우저에서도 이 단계를 따라 할 수 있어야 해요. 자세한 내용은 브라우저 버전을 참고하세요.

안내에 따라 Compose Multiplatform 애플리케이션을 실행하세요.
애플리케이션의 브라우저 창에서 마우스 오른쪽 버튼을 클릭하고 Inspect 동작을 선택해 개발자 도구에 접근해요. 또는 F12 단축키나 View | Developer | Developer Tools를 사용할 수도 있습니다.
Sources 탭으로 전환하고 디버깅할 Kotlin 파일을 선택해요. 이 튜토리얼에서는 Greeting.kt 파일을 사용할 거예요.
검사하고 싶은 코드의 줄 번호를 클릭해 중단점을 설정하세요. 숫자가 더 진하게 표시된 줄에만 중단점을 설정할 수 있습니다. 이 예시에서는 4, 7, 8, 9번 줄이에요.
IntelliJ IDEA에서 디버깅하는 것과 비슷하게 애플리케이션을 검사하세요.

브라우저에서 디버깅할 때 함수 호출 순서를 추적하고 오류를 정확히 찾아내는 창은 Scope와 Call Stack이에요.

사용자 지정 포맷터 사용하기

사용자 지정 포맷터(custom formatters)는 브라우저에서 Kotlin/Wasm 코드를 디버깅할 때 변수 값을 더 사용자 친화적이고 이해하기 쉽게 표시하고 찾아내는 데 도움을 줘요.

사용자 지정 포맷터는 Kotlin/Wasm 개발 빌드에서 기본적으로 활성화되어 있지만, 브라우저 개발자 도구에서도 사용자 지정 포맷터가 활성화되어 있는지 확인해야 합니다:

Chrome DevTools에서 Settings | Preferences | Console에 있는 Custom formatters 체크박스를 찾아보세요.
Firefox DevTools에서 Settings | Advanced settings에 있는 Enable custom formatters 체크박스를 찾아보세요.

이 기능은 사용자 지정 포맷터 API를 사용하며, Firefox와 Chromium 기반 브라우저에서 지원됩니다.

사용자 지정 포맷터는 기본적으로 Kotlin/Wasm 개발 빌드에서만 작동하므로, 프로덕션 빌드에서 사용하려면 Gradle 구성을 조정해야 해요. wasmJs {} 블록에 다음 컴파일러 옵션을 추가하세요:

// build.gradle.kts
kotlin {
    wasmJs {
        // ...

        compilerOptions {
            freeCompilerArgs.add("-Xwasm-debugger-custom-formatters")
        }
    }
}

피드백 남기기

디버깅 경험에 대한 어떤 피드백이든 환영합니다!

Slack: Slack 초대를 받아 우리 #webassembly 채널의 개발자에게 직접 피드백을 전달해 주세요.
YouTrack에 피드백을 남겨주세요.

다음 단계

이 YouTube 동영상에서 Kotlin/Wasm 디버깅을 실제로 살펴보세요.
더 많은 Kotlin/Wasm 예제를 시도해 보세요:
- KotlinConf 애플리케이션
- Compose 이미지 뷰어
- Node.js 예제
- WASI 예제
- Compose 예제

Kotlin/Wasm 코드 디버깅하기