🦀

wasm-bindgen + VSCode でデバッグする

2023/11/25に公開

WebAssembly

tech

この記事で取り扱わない内容

次のツールのインストール方法
Rust
wasm-pack

VSCode に WebAssembly DWARF Debugging をインストールする

VSCode の拡張機能タブから、WebAssembly DWARF Debugging をインストールして起動します。
Installing DWARF extension

プログラムをビルドする

この記事では、次のソースコードをデバッグ情報付きでビルドします。

lib.rs

use wasm_bindgen::prelude::*;

#[wasm_bindgen]
extern {
    pub fn alert(s: &str);
}

#[wasm_bindgen]
pub fn greet(name: &str) {
    let formatted = format!("Hello, {}!", name);
    alert(&formatted);
}

[package]
name = "rusttest"
version = "0.1.0"
edition = "2021"

# See more keys and their definitions at https://doc.rust-lang.org/cargo/reference/manifest.html

[lib]
crate-type = ["cdylib", "rlib"]

[dependencies]
wasm-bindgen = "0.2.88"

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

index.html

<!doctype html>
<html lang="en-US">
  <head>
    <meta charset="utf-8" />
    <title>hello-wasm example</title>
  </head>
  <body>
    <script type="module">
      import init, { greet } from "./pkg/rusttest.js";
      init().then(() => {
        greet("WebAssembly");
      });
    </script>
  </body>
</html>

ビルドコマンド

wasm-pack build --target web --dev

デバッグの構成をする

VSCode の実行とデバッグタブ中の、「実行とデバッグ」ボタンを押して、「Web アプリ (Chrome)」または「Web アプリ (Edge)」を選びます。
Configure lanch.json

この記事では、自動生成された launch.json をそのまま使います。

launch.json

{
    // IntelliSense を使用して利用可能な属性を学べます。
    // 既存の属性の説明をホバーして表示します。
    // 詳細情報は次を確認してください: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "type": "chrome",
            "request": "launch",
            "name": "localhost に対して Chrome を起動する",
            "url": "http://localhost:8080",
            "webRoot": "${workspaceFolder}"
        }
    ]
}

Web サーバを起動する

wasm-bindgen でビルドしたアプリは、ダブルクリックでは実行できないので Web サーバを介してアクセスします。好きな Web サーバを使ってください。

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

VSCode からデバッガを起動する

VSCode の実行とデバッグタブから、デバッグを開始します。初回のブラウザ起動ではブレークポイントが反応しないことがあるので、反応しなかった場合はブラウザをリロードします。