emscripten + VSCode でデバッグしてみる

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

• emscripten のインストール方法

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

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

プログラムをビルドする

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

Main.cpp

# include <stdio.h>

int main() {
    const char message[] = "Hello, world.";
    printf("%s\n", "Hello, world.");
    return 0;
}

emcc -O0 -g3 -o index.html Main.cpp

デバッグの構成をする

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

この記事では、自動生成された 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 サーバを起動する

emscripten でビルドしたアプリは、ダブルクリックでは実行できないので Web サーバを介してアクセスします。好きな Web サーバを使ってください。
この記事では、emscripten に付属している emrun を使います。

emrun . --no_browser --serve_after_exit --port 8080

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

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