Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 6 additions & 0 deletions docs/workflow/building/coreclr/README.md
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,12 @@ Using an x64 machine, it is possible to generate builds for other architectures.

Detailed instructions on how to do cross-compilation can be found in the cross-building doc [over here](/docs/workflow/building/coreclr/cross-building.md).

### Platform-Specific Guides

For specialized platforms, detailed instructions are available in the following guides:

- **WebAssembly:** [Building CoreCLR for WebAssembly](/docs/workflow/building/coreclr/wasm.md) - Experimental support for building, running, and debugging CoreCLR on WebAssembly.

## Other Features

### Build Drivers
Expand Down
118 changes: 118 additions & 0 deletions docs/workflow/building/coreclr/wasm.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,118 @@
# Building CoreCLR for WebAssembly

This guide provides instructions for building, running, and debugging CoreCLR on WebAssembly (WASM). This is experimental support and is currently under active development.

## Table of Contents

- [Prerequisites](#prerequisites)
- [Building CoreCLR for WebAssembly](#building-coreclr-for-webassembly)
- [Testing the Runtime](#testing-the-runtime)
- [Debugging](#debugging)
- [Chrome DevTools with DWARF Support](#chrome-devtools-with-dwarf-support)
- [VS Code WebAssembly Debugging](#vs-code-webassembly-debugging)

## Prerequisites

Make sure you've prepared your environment and installed all the requirements for your platform. If not, follow this [link](/docs/workflow/README.md#introduction) for the corresponding instructions.

## Building CoreCLR for WebAssembly

To build the CoreCLR runtime for WebAssembly, use the following command from the repository root:

**Linux/macOS:**
```bash
./build.sh -os browser -c Debug -subset clr.runtime
```

**Windows:**
```cmd
.\build.cmd -os browser -c Debug -subset clr.runtime
```

This command will:
- Install the Emscripten SDK (emsdk) automatically
- Build the CoreCLR runtime for WebAssembly
- Build the required libraries

**Note:** The first build may take longer as it downloads and sets up the Emscripten toolchain.

## Testing the Runtime

### Browser Testing (Recommended)

If you don't have `dotnet-serve` installed, you can install it as a global .NET tool with:

```bash
dotnet tool install --global dotnet-serve
```

**Linux/macOS:**
```bash
dotnet-serve --directory "artifacts/bin/coreclr/browser.wasm.Debug/corewasmrun"
```

**Windows:**
```cmd
dotnet-serve --directory "artifacts\bin\coreclr\browser.wasm.Debug\corewasmrun"
```

This will start a local HTTP server and you can open the provided URL in your browser.

### Console Testing

You can also run the runtime directly in Node.js:

```bash
cd artifacts/bin/coreclr/browser.wasm.Debug/corewasmrun/
node corewasmrun.js
```

## Debugging

### Chrome DevTools with DWARF Support

For debugging CoreCLR WebAssembly code, the recommended approach is using Chrome browser with the **C/C++ DevTools Support (DWARF)** extension:

1. **Install the Chrome extension:**
- [C/C++ DevTools Support (DWARF)](https://chrome.google.com/webstore/detail/cc-devtools-support-dwar/odljcjlcidgdhcjhoijagojpnjcgocgd)

2. **Open Chrome DevTools** (F12) while running your WebAssembly application

3. **Set breakpoints** in the Sources tab:
- Navigate to the WebAssembly modules
- You can step through C code, set breakpoints, and inspect WebAssembly linear memory
- The extension provides source-level debugging with DWARF debug information

**Note:** The debugging experience is not perfect but works most of the time. You can step through C code, set breakpoints, and inspect the WebAssembly linear memory.

### VS Code WebAssembly Debugging

VS Code, through Node.js, provides a good debugging option for WebAssembly CoreCLR:

1. **Install the VS Code extension (Optional):**
- [WebAssembly Dwarf Debugging](https://marketplace.visualstudio.com/items?itemName=ms-vscode.wasm-dwarf-debugging)

2. **Create a launch.json configuration:**
```json
{
"version": "0.2.0",
"configurations": [
{
"type": "node",
"request": "launch",
"name": "corewasmrun",
"skipFiles": [
"<node_internals>/**"
],
"program": "corewasmrun.js",
"cwd": "${workspaceFolder}/artifacts/bin/coreclr/browser.wasm.Debug/corewasmrun/"
}
]
}
```

3. **Set breakpoints** in `corewasmrun.js` in one of the `put_char` functions (the `stdout`/`stderr` implementation)

4. **Start debugging** and step through the WebAssembly code using the call stack

This approach allows you to debug the JavaScript host and step into WebAssembly code or into the C/C++ code if the Dwarf Debugging extension was installed.