JetBrains · AlejandraPedroza · Jul 1, 2024 · JSMonk · Jul 4, 2024
@@ -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)
@@ -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,12 +106,12 @@ directory:
 
 Join the Kotlin/Wasm community in Kotlin Slack:
 
-<a href="https://slack-chats.kotlinlang.org/c/webassembly"><img src="join-slack-channel.svg" width="700" alt="Join the Kotlin/Wasm community" style="block"/></a>
+<a href="https://slack-chats.kotlinlang.org/c/webassembly"><img src="join-slack-channel.svg" width="700" alt="Join the Kotlin/Wasm community"/></a>
 
 Try the Kotlin/Wasm examples from the `kotlin-wasm-examples` repository:
 
 * [Compose image viewer](https://github.com/Kotlin/kotlin-wasm-examples/tree/main/compose-imageviewer)
 * [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)