C/C++ WebAssembly をデバッグする

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly を使用すると、ウェブ上で C/C++ コードを JavaScript と並行してほぼネイティブの速度で実行できます。このドキュメントでは、このようなアプリケーションのデバッグを効果的に行うために、Chrome DevTools の設定と使用方法について説明します。

DevTools を設定すると、次のことが可能になります。

  • [ソース] > [エディタ] で元のコードを確認します。
  • コード行ブレークポイントを使用して実行を一時停止し、コンパイル済みの .wasm バイナリ ファイルではなく、元の C/C++ ソースコードをステップ実行します。

一時停止中も次のことが可能です。

  • 元のソースファイルの変数にカーソルを合わせ、その値を確認します。
  • コールスタックの関数名とスコープの変数について理解します。
  • 深くネストされたプロパティや複雑なオブジェクトをコンソールに出力できます。
  • Memory Inspector を使用してオブジェクト メモリを検査します。

設定

DevTools で C/C++ WebAssembly デバッグを有効にするには:

  1. DWARF デバッグ情報を含めてアプリをコンパイルします。最新の Emscripten コンパイラを実行し、-g フラグを渡します。次に例を示します。

    emcc -g source.cc -o app.html

    詳しくは、デバッグ情報を含むプロジェクトのビルドをご覧ください。

  2. Chrome 拡張機能 C/C++ DevTools Support（DWARF）をインストールします。

デバッグ

DevTools をセットアップして、コードをデバッグします。

  1. DevTools を開いて、ウェブサイトを調べます。このチュートリアルでは、必要な -g フラグでコンパイルされたこちらのデモページで試すことができます。
  2. 必要に応じて、作成したファイルをグループ化して操作しやすくします。[ソース] で、[その他メニュー。] > [ページ] > [チェックボックス。] > [Group by Authored/Deployed] 試験運用中。 を確認します。
  3. ファイルツリーから元のソースファイルを選択します。この場合は mandelbrot.cc です。

  4. コード行ブレークポイントを設定するには、[エディタ] の左側の列（たとえば 38 行目）で行番号をクリックします。

    38 行目に設定されているコード行ブレークポイント。

  5. コードを再度実行します。実行はブレークポイントがある行の前に一時停止します。

一時停止した状態で、次の方法を試してください。

  • [ソース] > [エディタ] で変数にカーソルを合わせると、値がツールチップに表示されます。

ツールチップ内の変数の値。

  • [ソース] > [コールスタック] に、ソースにある関数名が表示されます。

コールスタックのメイン関数。

  • [ソース] > [スコープ] で、ローカル変数とグローバル変数、その型、値を表示します。

ローカル変数とその値が表示されている [スコープ] ペイン。

  • コンソールで、[スコープ] 内の移動しにくい変数とオブジェクトを出力します。

    • 深くネストされた変数（例: 大きな配列でインデックスが付けられたアイテム）。
    • 複雑なオブジェクト（ポインタでアクセスできるもの（->）を含む）。展開して検査します。

ネストされた変数と、コンソールで展開された複雑なオブジェクト。

  • [ソース] > [スコープ] で、メモリ。 アイコンをクリックして Memory Inspector を開き、オブジェクト メモリの RAW バイトを調べます。詳細については、WebAssembly のメモリ検査をご覧ください。

変数のメモリを検査する。

プロファイルのパフォーマンス

DevTools を設定して開いたときに、Chrome が実行するコードは最適化されません。デバッグがしやすいように階層が下がっています。

この場合、コードで console.time() と performance.now() を使用してパフォーマンスをプロファイリングすることはできません。代わりに、[パフォーマンス] パネルを使用してプロファイリングを行います。

または、DevTools を開かずにプロファイリング コードを実行し、それを開いてコンソールでメッセージを調べることもできます。

デバッグ情報を分離する

読み込みを高速化しつつデバッグ エクスペリエンスを向上させるには、デバッグ情報を別の .wasm ファイルに分割します。詳細については、WebAssembly の迅速なデバッグをご覧ください。

このファイルはローカルに保存することも、別のサーバーでホストすることもできます。Emscripten でこれを行うには、-gseparate-dwarf=<filename> フラグを渡し、ファイルのパスを指定します。

emcc -g source.cc -o app.html \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]

さまざまなマシンでビルドしてデバッグする

Chrome を実行しているパソコンとは異なるオペレーティング システム（コンテナ、VM、リモート サーバー）を搭載したマシン上に構築する場合は、デバッグ ファイルのパスを手動でマッピングする必要があります。

たとえば、プロジェクトがローカルの C:\src\project にあり、Docker コンテナでパス /mnt/c/src/project でビルドされている場合は、次の操作を行います。

  1. [chrome://extensions/] に移動し、[C/C++ DevTools Support（DWARF）] 拡張機能を見つけて、[Details] > [Extension options] をクリックします。
  2. 新旧のファイルパスを指定します。

新旧のファイルパスを指定しました。

詳細

WebAssembly のデバッグについて詳しくは、Chrome DevTools エンジニアリング ブログをご覧ください。