Web development: WebAssembly (Wasm): Debug Kotlin/Wasm code — Kotlin 2

Перед началом работы

Настройте среду для разработки на Kotlin Multiplatform.
Следуйте инструкциям, чтобы создать проект Kotlin Multiplatform для Kotlin/Wasm.

Отладка в IntelliJ IDEA

Созданный вами проект Kotlin Multiplatform содержит приложение Compose Multiplatform, работающее на Kotlin/Wasm. Это приложение можно отлаживать в IntelliJ IDEA сразу, без дополнительной настройки.

В IntelliJ IDEA откройте файл Kotlin, который нужно отладить. В этом руководстве мы будем работать с файлом Greeting.kt из следующего каталога проекта Kotlin Multiplatform:

WasmDemo/composeApp/src/wasmJsMain/kotlin/wasm.project.demo.wasmdemo
Нажмите на номера строк, чтобы установить точки останова в коде, который вы хотите исследовать.
В списке конфигураций запуска выберите composeApp[wasmJs].
Запустите код в режиме отладки, нажав значок отладки в верхней части экрана.

После запуска приложение откроется в новом окне браузера.

Кроме того, в IntelliJ IDEA автоматически откроется панель Отладка.

Исследование приложения

В окне браузера с приложением нажмите кнопку Нажми меня!, чтобы взаимодействовать с приложением. Это действие запускает выполнение кода, и отладчик приостанавливает его, когда выполнение достигает точки останова.
На панели отладки используйте кнопки управления отладкой, чтобы исследовать переменные и выполнение кода в точках останова:
- Шаг с обходом — выполнить текущую строку и приостановиться на следующей.
- Шаг с заходом — подробнее исследовать функцию.
- Шаг с выходом — выполнять код, пока он не выйдет из текущей функции.
Изучите панель Потоки и переменные. Она помогает проследить последовательность вызовов функций и определить местоположение ошибок.
Измените код и запустите приложение снова, чтобы проверить его работу.
Когда закончите отладку, нажмите на номера строк с точками останова, чтобы удалить их.

Отладка в браузере

Это приложение Compose Multiplatform также можно отлаживать в браузере без дополнительной настройки.

При запуске задач разработки Gradle (*DevRun) Kotlin автоматически предоставляет исходные файлы браузеру, позволяя устанавливать точки останова, исследовать переменные и пошагово выполнять код Kotlin.

Конфигурация для предоставления исходных файлов проекта Kotlin/Wasm браузеру теперь включена в плагин Kotlin Gradle. Если вы ранее добавляли эту конфигурацию в файл build.gradle.kts, удалите ее, чтобы избежать конфликтов.

Следуйте инструкциям, чтобы запустить приложение Compose Multiplatform.
В окне браузера с приложением щелкните правой кнопкой мыши и выберите действие Просмотреть код, чтобы открыть инструменты разработчика. Также можно воспользоваться сочетанием клавиш F12 или выбрать Вид | Разработчик | Инструменты разработчика.
Перейдите на вкладку Источники и выберите файл Kotlin для отладки. В этом руководстве мы будем работать с файлом Greeting.kt.
Нажмите на номера строк, чтобы установить точки останова в коде, который вы хотите исследовать. Точки останова можно установить только на строках с более темными номерами — в этом примере это строки 4, 7, 8 и 9.
Исследуйте приложение так же, как при отладке в IntelliJ IDEA.

При отладке в браузере для отслеживания последовательности вызовов функций и определения местоположения ошибок используются панели Область видимости и Стек вызовов.

Использование пользовательских форматтеров

Пользовательские форматтеры помогают отображать значения переменных и находить их при отладке кода Kotlin/Wasm в браузере — в более удобном и понятном виде.

В сборках Kotlin/Wasm для разработки пользовательские форматтеры включены по умолчанию, однако необходимо убедиться, что они включены в инструментах разработчика браузера:

В Chrome DevTools найдите флажок Пользовательские форматтеры в разделе Настройки | Параметры | Консоль:
В Firefox DevTools найдите флажок Включить пользовательские форматтеры в разделе Настройки | Дополнительные настройки:

Эта функция использует API пользовательских форматтеров и поддерживается в Firefox и браузерах на основе Chromium.

Поскольку пользовательские форматтеры по умолчанию работают только в сборках Kotlin/Wasm для разработки, для их использования в производственных сборках необходимо изменить конфигурацию Gradle. Добавьте следующий параметр компилятора в блок wasmJs {}:

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

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

Оставить отзыв

Будем рады узнать о вашем опыте отладки!

Slack: получите приглашение в Slack и поделитесь отзывом напрямую с разработчиками в канале #webassembly.
Оставьте отзыв в YouTrack.

Что дальше?

Посмотрите, как выполняется отладка Kotlin/Wasm, в этом видео на YouTube.
Попробуйте другие примеры Kotlin/Wasm: