Debugging Kotlin in browser

This tutorial shows how to debug a Kotlin/JS project build by Gradle. If you are using Maven or IDEA, the recipes would be similar.

Before reading this tutorial, please, look through Kotlin and JavaScript for Gradle tutorial.

Generating source map

To debug Kotlin sources in the browser, you should tell the compiler to generate source map file. Add following lines to the Gradle configuration:

compileKotlin2Js {
    kotlinOptions.sourceMap = true
    kotlinOptions.sourceMapEmbedSources = "always"

    // remaining configuration options
} 

Now, if you rebuild the project, you should see both .js and .js.map files generated.

Debugging in Chrome DevTools

To debug Kotlin in Google Chrome, you should use DevTools. Please, read the official documentation to learn how to open and use DevTools.

Now, if you open DevTools, you should see both JavaScript and Kotlin files in Sources tab, as shown in the picture below.

Note that you can open folders in the Source tab and see sources of libraries you are using in your project, including Kotlin standard library (kotlin.js). This, however, requires that libraries are compiled with source maps enabled, as well as sources embedded into source maps. So the good practice is: if you share a library for Kotlin/JS, please, include source map into distribution.