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. C/C++ DevTools サポート（DWARF）Chrome 拡張機能をインストールします。

デバッグ

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

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

  4. コード行ブレークポイントを設定するには、エディタの左側の列にある行番号をクリックします（例: 行 38）。

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

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

一時停止している間に、次の操作をお試しください。

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

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

  • [ソース] > [コールスタック] で、ソースにある関数名を確認します。

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

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

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

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

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

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

  • [Sources] > [Scope] で、メモリ。 アイコンをクリックして [Memory Inspector] を開き、オブジェクト メモリの未加工バイトを調べます。詳細については、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 にあり、パス /mnt/c/src/project の Docker コンテナにビルドされている場合は、次のようにします。

  1. chrome://extensions/ に移動し、[C/C++ DevTools Support (DWARF)] 拡張機能を見つけて、[詳細] > [拡張機能のオプション] をクリックします。
  2. 古いファイルパスと新しいファイルパスを指定します。

指定された古いファイルパスと新しいファイルパス。

その他の情報

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