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

Sofia Emelianova
Sofia Emelianova
GitHub

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

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

  • [Sources] で元のコードを調べます >編集者。
  • コード行のブレークポイントで実行を一時停止し、コンパイル済みの .wasm バイナリ ファイルではなく、元の C/C++ ソースコードをステップスルーします。

また、一時停止中は以下の操作が可能です。

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

設定

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

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

    emcc -g source.cc -o app.html

    詳細については、デバッグ情報を使用したプロジェクトのビルドをご覧ください。

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

デバッグ

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

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

  4. コード行のブレークポイントを設定するには、[Editor] の左側にある列（38 行目など）の行番号をクリックします。

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

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

一時停止中は、次の方法をお試しください。

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

ツールチップに表示される変数の値。

  • [ソース] >Call Stack、ソースにある関数名を表示します。

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

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

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

  • コンソールで、[スコープ] 内の移動が困難な出力変数とオブジェクト:

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

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

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

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

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

DevTools を設定して開いた状態では、Chrome が実行するコードは最適化されていません。階層的に下位になっているため、デバッグが容易です。

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

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

デバッグ情報を分離する

デバッグ情報を別の .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 のエンジニアリング ブログをご覧ください。