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

Sofia Emelianova

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）。

   

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 エンジニアリング ブログをご覧ください。

• 最新のツールで WebAssembly をデバッグする
• WebAssembly のデバッグを高速化
• Memory Inspector のご紹介
• C/C++ デバッグ用に Memory Inspector を拡張する