Rust 製 WebAssembly を VSCode でデバッグ実行する

投稿日: 投稿者:

Rust 製 WebAssembly をウェブブラウザで動かして VSCode でデバッグ実行してみました。

VSCodeがWebAssemblyの実行時デバッグに対応。C/C++やRust、Zigなどのソースコードと関連付け、変数参照、ブレークポイントなど可能に － Publickey

環境
・Omarchy v3.0.1
・Chromium
・rustc 1.89.0
・wasm-pack 0.13.1
・VSCode (Visual Studio Code)
・WebAssembly DWARF Debugging – Visual Studio Marketplace

Rust の開発環境を準備します。
・Install > Development > Rust

下記のページを参考にサンプルコードを書きます。

Rust から WebAssembly にコンパイル – WebAssembly | MDN

「パッケージのウェブでの利用」まで実施します。

cargo install wasm-pack
cargo new --lib hello-wasm
cd hello-wasm
n src/lib.rs
n Cargo.toml
wasm-pack build --target web
n index.html

サーバーを開始します。

cargo install http-server
http-server --port 8080

ブラウザで実行することができました。
続けてデバッグ実行の準備を進めます。

VSCode の機能拡張 WebAssembly DWARF Debugging をインストールします。

デバッグ実行用に Cargo.toml に下記を追加します。

[package.metadata.wasm-pack.profile.dev.wasm-bindgen]
dwarf-debug-info = true

詳細はこちらを参照してください。
Cargo.toml Configuration

dev を付けて開発ビルドします。

wasm-pack build --target web --dev

サーバーを開始します。

http-server --port 8080

VSCode でデバッグ実行します。
・Run > Start Debugging

Web App (Chrome) を選ぶと .vscode/launch.json ファイルが生成されます。
もう一度デバッグ実行します。

ブレークポイントで止まりました。

以上です。



▼この記事がいいね！と思ったらブックマークお願いします
このエントリーをはてなブックマークに追加