diff --git a/docs/images/wasm/wasm-composeapp-browser-clickme.png b/docs/images/wasm/wasm-composeapp-browser-clickme.png index 25aad165c78..cda27d2474b 100644 Binary files a/docs/images/wasm/wasm-composeapp-browser-clickme.png and b/docs/images/wasm/wasm-composeapp-browser-clickme.png differ diff --git a/docs/images/wasm/wasm-composeapp-browser.png b/docs/images/wasm/wasm-composeapp-browser.png index d37300c1604..0e03c63c57f 100644 Binary files a/docs/images/wasm/wasm-composeapp-browser.png and b/docs/images/wasm/wasm-composeapp-browser.png differ diff --git a/docs/images/wasm/wasm-composeapp-directory.png b/docs/images/wasm/wasm-composeapp-directory.png index 4a5c040ed92..da540e7c011 100644 Binary files a/docs/images/wasm/wasm-composeapp-directory.png and b/docs/images/wasm/wasm-composeapp-directory.png differ diff --git a/docs/images/wasm/wasm-step-into.png b/docs/images/wasm/wasm-debug-step-into.png similarity index 68% rename from docs/images/wasm/wasm-step-into.png rename to docs/images/wasm/wasm-debug-step-into.png index 77035f595d4..2c72676d014 100644 Binary files a/docs/images/wasm/wasm-step-into.png and b/docs/images/wasm/wasm-debug-step-into.png differ diff --git a/docs/images/wasm/wasm-step-out.png b/docs/images/wasm/wasm-debug-step-out.png similarity index 68% rename from docs/images/wasm/wasm-step-out.png rename to docs/images/wasm/wasm-debug-step-out.png index 41b8fe31174..28b90ae9cb2 100644 Binary files a/docs/images/wasm/wasm-step-out.png and b/docs/images/wasm/wasm-debug-step-out.png differ diff --git a/docs/images/wasm/wasm-step-over.png b/docs/images/wasm/wasm-debug-step-over.png similarity index 67% rename from docs/images/wasm/wasm-step-over.png rename to docs/images/wasm/wasm-debug-step-over.png index 56fe6e2d433..4ec14bfbf09 100644 Binary files a/docs/images/wasm/wasm-step-over.png and b/docs/images/wasm/wasm-debug-step-over.png differ diff --git a/docs/images/wasm/wasm-fleet-breakpoints.png b/docs/images/wasm/wasm-fleet-breakpoints.png new file mode 100644 index 00000000000..f3adb15f132 Binary files /dev/null and b/docs/images/wasm/wasm-fleet-breakpoints.png differ diff --git a/docs/images/wasm/wasm-fleet-debug-pane.png b/docs/images/wasm/wasm-fleet-debug-pane.png new file mode 100644 index 00000000000..d20fb75c593 Binary files /dev/null and b/docs/images/wasm/wasm-fleet-debug-pane.png differ diff --git a/docs/images/wasm/wasm-fleet-debug-thread.png b/docs/images/wasm/wasm-fleet-debug-thread.png new file mode 100644 index 00000000000..92441703142 Binary files /dev/null and b/docs/images/wasm/wasm-fleet-debug-thread.png differ diff --git a/docs/images/wasm/wasm-fleet-generate-artifacts.png b/docs/images/wasm/wasm-fleet-generate-artifacts.png new file mode 100644 index 00000000000..0e34c053694 Binary files /dev/null and b/docs/images/wasm/wasm-fleet-generate-artifacts.png differ diff --git a/docs/images/wasm/wasm-fleet-gradle-commands.png b/docs/images/wasm/wasm-fleet-gradle-commands.png new file mode 100644 index 00000000000..6f27bac2651 Binary files /dev/null and b/docs/images/wasm/wasm-fleet-gradle-commands.png differ diff --git a/docs/images/wasm/wasm-fleet-main-file.png b/docs/images/wasm/wasm-fleet-main-file.png new file mode 100644 index 00000000000..f937fb0074e Binary files /dev/null and b/docs/images/wasm/wasm-fleet-main-file.png differ diff --git a/docs/images/wasm/wasm-fleet-main-function.png b/docs/images/wasm/wasm-fleet-main-function.png new file mode 100644 index 00000000000..18c061d7d24 Binary files /dev/null and b/docs/images/wasm/wasm-fleet-main-function.png differ diff --git a/docs/images/wasm/wasm-fleet-run-configurations.png b/docs/images/wasm/wasm-fleet-run-configurations.png new file mode 100644 index 00000000000..780e01b22e4 Binary files /dev/null and b/docs/images/wasm/wasm-fleet-run-configurations.png differ diff --git a/docs/topics/wasm/wasm-debugging.md b/docs/topics/wasm/wasm-debugging.md index f98d68e65ff..0b66e766a6f 100644 --- a/docs/topics/wasm/wasm-debugging.md +++ b/docs/topics/wasm/wasm-debugging.md @@ -2,10 +2,11 @@ > Kotlin/Wasm is [Alpha](components-stability.md). It may be changed at any time. > -{style="note"} +{type="note"} -This tutorial demonstrates how to use your browser to debug your [Compose Multiplatform](https://www.jetbrains.com/lp/compose-multiplatform/) -application built with Kotlin/Wasm. +This tutorial demonstrates how to debug your [Compose Multiplatform](https://www.jetbrains.com/lp/compose-multiplatform/) +application built with [Kotlin/Wasm](wasm-overview.md). The tutorial guides you through running your application in Fleet +and debugging it in both Fleet and the browser. ## Before you start @@ -16,71 +17,73 @@ Create a project using the Kotlin Multiplatform wizard: > These are the name and ID of the project directory. You can also leave them as they are. > - {style="tip"} + {type="tip"} -3. Select the **Web** option. Make sure that no other options are selected. +3. Select the **Web** option. You don't need to select any other platform options for this tutorial. 4. Click the **Download** button and unpack the resulting archive. -![Kotlin Multiplatform wizard](wasm-compose-wizard.png){width=600} + ![Kotlin Multiplatform wizard](wasm-compose-wizard.png){width=600} -## Open the project in IntelliJ IDEA +## Open the project in Fleet -1. Download and install the latest version of [IntelliJ IDEA](https://www.jetbrains.com/idea/). -2. On the Welcome screen of IntelliJ IDEA, click **Open** or select **File | Open** in the menu bar. -3. Navigate to the unpacked "WasmDemo" folder and click **Open**. +1. Download and install the latest version of [Fleet](https://www.jetbrains.com/fleet/). +2. On the Welcome screen of Fleet, click **Open File or Folder** or select **File | Open** in the menu bar. +3. Navigate to the unpacked "WasmDemo" folder and click **Open**. -## Run the application +## Run and debug your application in Fleet -1. In IntelliJ IDEA, open the **Gradle** tool window by selecting **View** | **Tool Windows** | **Gradle**. +1. Open the `Greeting.kt` code file from the `composeApp/src/wasmJsMain/kotlin` directory. +2. Click the line numbers to set breakpoints on the code you want to inspect. + In this example, we set the breakpoint on the line **5**. The number turns into a red circle. - > You need at least Java 11 as your Gradle JVM for the tasks to load successfully. - > - {style="note"} + ![Breakpoints](wasm-fleet-breakpoints.png){width=600} -2. In **composeApp** | **Tasks** | **kotlin browser**, select and run the **wasmJsBrowserRun** task. +3. Open the `main.kt` code file from the `composeApp/src/wasmJsMain/kotlin` directory. +4. Click the **Run** button on the `main()` function line and select **Debug 'main'**. - ![Run the Gradle task](wasm-gradle-task-window.png){width=600} + ![Application main file](wasm-fleet-main-file.png){width=600} - Alternatively, you can run the following command in the terminal from the `WasmDemo` root directory: + Once the build is complete, the web application opens automatically in the browser. - ```bash - ./gradlew wasmJsBrowserRun - ``` + ![Click me](wasm-composeapp-browser-clickme.png){width=650} -3. Once the application starts, open the following URL in your browser: + > You can also open the application manually by entering this URL in your browser: `http://localhost:8080/`. The port number + > can vary because the 8080 port may be unavailable. You can find the actual port number printed in the Gradle build console. + > + {type="tip"} - ```bash - http://localhost:8080/ - ``` +5. Click on the **Click me!** button to interact with the application. You see the Compose Multiplatform logo. - > The port number can vary because the 8080 port may be unavailable. You can find the actual port number printed - > in the Gradle build console. - > - {style="tip"} + ![Wasm compose app](wasm-composeapp-browser.png){width=650} + + Interacting with the app triggers the execution of the code and opens the debugging pane in Fleet automatically. Otherwise, click + **View | Tools | Debug** in the menu bar to open the debugging pane. - You see a "Click me!" button. Click it: + The debugger pauses when the execution reaches a breakpoint. - ![Click me](wasm-composeapp-browser-clickme.png){width=650} + ![Debug pane](wasm-fleet-debug-pane.png){width=600} - Now you see the Compose Multiplatform logo: +6. In the debugging pane, use the debugging control buttons to inspect variables and code execution at the breakpoints: + * ![Step into](wasm-debug-step-into.png){width=30}{type="joined"} Step into to investigate a function more deeply. + * ![Step into](wasm-debug-step-over.png){width=30}{type="joined"} Step over to execute the current line and pause on the next line. + * ![Step out](wasm-debug-step-out.png){width=30}{type="joined"} Step out to execute the code until it exits the current function. - ![Compose app in browser](wasm-composeapp-browser.png){width=650} +7. Check the **Threads & Frames** and **Variables** panes to trace the sequence of function calls and pinpoint the location of any errors. -## Debug in your browser + ![Debug thread](wasm-fleet-debug-thread.png){width=600} -> Currently, debugging is only available in your browser. In the future, you will be able to debug your code in -> [IntelliJ IDEA](https://youtrack.jetbrains.com/issue/KT-64683/Kotlin-Wasm-debugging-in-IntelliJ-IDEA) and -> [Fleet](https://youtrack.jetbrains.com/issue/KT-64684). -> -{style="note"} +8. Make changes to your code and run the application again (see step 4) to verify that everything works as expected. +9. Click on the line numbers with breakpoints to remove the breakpoints. + +## Debug your application in the browser You can debug this Compose Multiplatform application -in your browser out of the box, without additional configurations. +in your browser out of the box, without additional configurations. -However, for other projects, you may need to configure additional settings in your Gradle +However, for other projects, you may need to configure additional settings in your Gradle build file. For more information about how to configure your browser for debugging, expand the next section. -### Configure your browser for debugging {initial-collapse-state="collapsed" collapsible="true"} +### Configure your browser for debugging {initial-collapse-state="collapsed"} By default, browsers can't access some of the project's sources necessary for debugging. To provide access, you can configure the Webpack DevServer to serve these sources. In the `ComposeApp` directory, add the following code snippets to your `build.gradle.kts` file. @@ -97,8 +100,9 @@ Add this code snippet inside the `commonWebpackConfig{}` block, located in the ` devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply { static = (static ?: mutableListOf()).apply { // Serve sources to debug inside browser - add(project.rootDir.path) add(project.projectDir.path) + add(project.projectDir.path + "/commonMain/") + add(project.projectDir.path + "/wasmJsMain/") } } ``` @@ -114,57 +118,49 @@ kotlin { commonWebpackConfig { outputFileName = "composeApp.js" devServer = (devServer ?: KotlinWebpackConfig.DevServer()).apply { - static = (static ?: mutableListOf()).apply { - // Serve sources to debug inside browser - add(project.rootDir.path) + static = (static ?: mutableListOf()).apply { + // Serve sources to debug inside browser add(project.projectDir.path) + add(project.projectDir.path + "/commonMain/") + add(project.projectDir.path + "/wasmJsMain/") } - } + } } } } } ``` -{initial-collapse-state="collapsed" collapsible="true"} +{initial-collapse-state="collapsed"} > Currently, you can't debug library sources. > [We will support this in the future](https://youtrack.jetbrains.com/issue/KT-64685). > -{style="note"} +{type="note"} -### Debug your Kotlin/Wasm application +### Debug in your browser > This tutorial uses the Chrome browser, but you should be able to follow these steps with other browsers. For more information, > see [Browser versions](wasm-troubleshooting.md#browser-versions). -> -{style="tip"} - -1. In the browser window of the application, right-click and select the **Inspect** action to access developer tools. - Alternatively, you can use the **F12** shortcut or select **View** | **Developer** | **Developer Tools**. - -2. Switch to the **Sources** tab and select the Kotlin file to debug. In this tutorial, we'll work with the `Greeting.kt` file. - -3. Click on the line numbers to set breakpoints on the code that you want to inspect. Only the lines - with darker numbers can have breakpoints. +> +{type="tip"} -![Set breakpoints](wasm-breakpoints.png){width=700} +Debugging in the browser is similar to debugging in Fleet, as the debugging pane consists of the same features and controls. -4. Click on the **Click me!** button to interact with the application. This action triggers the execution of the - code, and the debugger pauses when the execution reaches a breakpoint. +Once your application is [running](wasm-debugging.md#run-and-debug-your-application-in-fleet), open the debugging pane in the browser: -5. In the debugging pane, use the debugging control buttons to inspect variables and code execution at the breakpoints: - * ![Step into](wasm-step-into.png){width=30}{type="joined"} Step into to investigate a function more deeply. - * ![Step over](wasm-step-over.png){width=30}{type="joined"} Step over to execute the current line and pause on the next line. - * ![Step out](wasm-step-out.png){width=30}{type="joined"} Step out to execute the code until it exits the current function. +1. In the browser window of the application, right-click and select the **Inspect** action to access developer tools. + Alternatively, you can use the **F12** shortcut or select **View** | **Developer** | **Developer Tools**. -![Debug controls](wasm-debug-controls.png){width=700} +2. In the **Sources** tab, select the `Greeting.kt` code file from the `composeApp/src/wasmJsMain/kotlin`directory. +3. Click the line numbers to set breakpoints on the code you want to inspect. + In this example, we set the breakpoint on the line **5**. -6. Check the **Call stack** and **Scope** panes to trace the sequence of function calls and pinpoint the location of any errors. + ![Set breakpoints](wasm-breakpoints.png){width=700} -![Check call stack](wasm-debug-scope.png){width=700} +4. Debug the application as explained in steps 5, 6, 7, 8, and 9 from the + [Run and debug the application in Fleet](wasm-debugging.md#run-and-debug-your-application-in-fleet) section. -7. Make changes to your code and [run the application](#run-the-application) again to verify that everything works as expected. -8. Click on the line numbers with breakpoints to remove the breakpoints. + ![Check call stack](wasm-debug-scope.png){width=700} ## Leave feedback @@ -181,4 +177,4 @@ We would appreciate any feedback you may have on your debugging experience! * [Jetsnack application](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-jetsnack) * [Node.js example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/nodejs-example) * [WASI example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/wasi-example) - * [Compose example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-example) + * [Compose example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-example) \ No newline at end of file diff --git a/docs/topics/wasm/wasm-get-started.md b/docs/topics/wasm/wasm-get-started.md index 89c45d82d65..38411ca98a6 100644 --- a/docs/topics/wasm/wasm-get-started.md +++ b/docs/topics/wasm/wasm-get-started.md @@ -1,13 +1,13 @@ -[//]: # (title: Get started with Kotlin/Wasm in IntelliJ IDEA) +[//]: # (title: Get started with Kotlin/Wasm in Fleet) > Kotlin/Wasm is [Alpha](components-stability.md). It may be changed at any time. > > [Join the Kotlin/Wasm community.](https://slack-chats.kotlinlang.org/c/webassembly) > -{style="note"} +{type="note"} This tutorial demonstrates how to run a [Compose Multiplatform](https://www.jetbrains.com/lp/compose-multiplatform/) -app with [Kotlin/Wasm](wasm-overview.md) in IntelliJ IDEA, and generate artifacts to publish as a site on [GitHub pages](https://pages.github.com/). +app with [Kotlin/Wasm](wasm-overview.md) in Fleet, and generate artifacts to publish as a site on [GitHub pages](https://pages.github.com/). ## Before you start @@ -18,61 +18,63 @@ Create a project using the Kotlin Multiplatform wizard: > These are the name and ID of the project directory. You can also leave them as they are. > - {style="tip"} + {type="tip"} -3. Select the **Web** option. Make sure that no other options are selected. +3. Select the **Web** option. You don't need to select any other platform options for this tutorial. 4. Click the **Download** button and unpack the resulting archive. -![Kotlin Multiplatform wizard](wasm-compose-wizard.png){width=600} + ![Kotlin Multiplatform wizard](wasm-compose-wizard.png){width=600} -## Open the project in IntelliJ IDEA +## Open the project in Fleet -1. Download and install the latest version of [IntelliJ IDEA](https://www.jetbrains.com/idea/). -2. On the Welcome screen of IntelliJ IDEA, click **Open** or select **File | Open** in the menu bar. +1. Download and install the latest version of [Fleet](https://www.jetbrains.com/fleet/). +2. On the Welcome screen of Fleet, click **Open File or Folder** or select **File | Open** in the menu bar. 3. Navigate to the unpacked "WasmDemo" folder and click **Open**. -## Run the application +## Run the application in Fleet -1. In IntelliJ IDEA, open the **Gradle** tool window by selecting **View** | **Tool Windows** | **Gradle**. +You can run your application in Fleet using one of the following approaches: - > You need at least Java 11 as your Gradle JVM for the tasks to load successfully. - > - {style="note"} - -2. In **composeApp** | **Tasks** | **kotlin browser**, select and run the **wasmJsBrowserRun** task. +* In the top toolbar, click the **Run** button and select **composeApp[WasmJs]** from the run configurations list. - ![Run the Gradle task](wasm-gradle-task-window.png){width=600} + ![Run configurations](wasm-fleet-run-configurations.png){width=650} - Alternatively, you can run the following command in the terminal from the `WasmDemo` root directory: +* In the terminal, run the following command from the `WasmDemo` root directory: ```bash ./gradlew wasmJsBrowserRun -t ``` + +* In the `main.kt` file from the `composeApp/src/wasmJsMain/kotlin` directory, run the `main()` function. + Alternatively, use the **Shift + Cmd + R** shortcut to run it. -3. Once the application starts, open the following URL in your browser: + ![Main function](wasm-fleet-main-function.png){width=650} - ```bash - http://localhost:8080/ - ``` +Once the build is complete, the web application opens automatically in the browser. - > The port number can vary because the 8080 port may be unavailable. You can find the actual port number printed - > in the Gradle build console. - > - {style="tip"} +> You can also open the application manually by entering this URL in your browser: `http://localhost:8080/`. The port number +> can vary because the 8080 port may be unavailable. You can find the actual port number printed in the Gradle build console. +> +{type="tip"} - You see a "Click me!" button. Click it: +You see a "Click me!" button. Click it: - ![Click me](wasm-composeapp-browser-clickme.png){width=650} +![Click me](wasm-composeapp-browser-clickme.png){width=650} - Now you see the Compose Multiplatform logo: +Now you see the Compose Multiplatform logo: - ![Compose app in browser](wasm-composeapp-browser.png){width=650} +![Compose app in browser](wasm-composeapp-browser.png){width=650} ## Generate artifacts -In **composeApp** | **Tasks** | **kotlin browser**, select and run the **wasmJsBrowserDistribution** task. +1. In the Fleet top toolbar, click the **Run** button and select **Gradle commands** from the run configurations list. + + ![Gradle commands](wasm-fleet-gradle-commands.png){width=600} + +2. Select the `wasmJsBrowserDistribution` Gradle command. You can also type the command name in the + text field. -![Run the Gradle task](wasm-gradle-task-window-compose.png){width=600} + ![Generate artifacts](wasm-fleet-generate-artifacts.png){width=600} Alternatively, you can run the following command in the terminal from the `WasmDemo` root directory: @@ -87,12 +89,12 @@ directory: ## Publish on GitHub pages -1. Copy all the contents in your `productionExecutable` directory into the repository where you want to create a site. +1. Copy all the contents from your `productionExecutable` directory into the repository where you want to create your site. 2. Follow GitHub's instructions for [creating your site](https://docs.github.com/en/pages/getting-started-with-github-pages/creating-a-github-pages-site#creating-your-site). > It can take up to 10 minutes for changes to your site to publish after you push the changes to GitHub. > - {style="note"} + {type="note"} 3. In a browser, navigate to your GitHub pages domain. @@ -104,7 +106,7 @@ directory: Join the Kotlin/Wasm community in Kotlin Slack: -Join the Kotlin/Wasm community +Join the Kotlin/Wasm community Try the Kotlin/Wasm examples from the `kotlin-wasm-examples` repository: @@ -112,4 +114,4 @@ Try the Kotlin/Wasm examples from the `kotlin-wasm-examples` repository: * [Jetsnack application](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-jetsnack) * [Node.js example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/nodejs-example) * [WASI example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/wasi-example) -* [Compose example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-example) \ No newline at end of file +* [Compose example](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-example)