WebAssembly を使用すると、ウェブ上で C/C++ コードを JavaScript と並行してほぼネイティブの速度で実行できます。このドキュメントでは、このようなアプリケーションのデバッグを効果的に行うために、Chrome DevTools の設定と使用方法について説明します。
DevTools を設定すると、次のことが可能になります。
- [ソース] > [エディタ] で元のコードを確認します。
- コード行ブレークポイントを使用して実行を一時停止し、コンパイル済みの
.wasm
バイナリ ファイルではなく、元の C/C++ ソースコードをステップ実行します。
一時停止中も次のことが可能です。
- 元のソースファイルの変数にカーソルを合わせ、その値を確認します。
- コールスタックの関数名とスコープの変数について理解します。
- 深くネストされたプロパティや複雑なオブジェクトをコンソールに出力できます。
- Memory Inspector を使用してオブジェクト メモリを検査します。
設定
DevTools で C/C++ WebAssembly デバッグを有効にするには:
DWARF デバッグ情報を含めてアプリをコンパイルします。最新の Emscripten コンパイラを実行し、
-g
フラグを渡します。次に例を示します。emcc -g source.cc -o app.html
詳しくは、デバッグ情報を含むプロジェクトのビルドをご覧ください。
Chrome 拡張機能 C/C++ DevTools Support(DWARF)をインストールします。
デバッグ
DevTools をセットアップして、コードをデバッグします。
- DevTools を開いて、ウェブサイトを調べます。このチュートリアルでは、必要な
-g
フラグでコンパイルされたこちらのデモページで試すことができます。 - 必要に応じて、作成したファイルをグループ化して操作しやすくします。[ソース] で、[] > [ページ] > [] > [Group by Authored/Deployed] を確認します。
- ファイルツリーから元のソースファイルを選択します。この場合は
mandelbrot.cc
です。 コード行ブレークポイントを設定するには、[エディタ] の左側の列(たとえば 38 行目)で行番号をクリックします。
コードを再度実行します。実行はブレークポイントがある行の前に一時停止します。
一時停止した状態で、次の方法を試してください。
- [ソース] > [エディタ] で変数にカーソルを合わせると、値がツールチップに表示されます。
- [ソース] > [コールスタック] に、ソースにある関数名が表示されます。
- [ソース] > [スコープ] で、ローカル変数とグローバル変数、その型、値を表示します。
コンソールで、[スコープ] 内の移動しにくい変数とオブジェクトを出力します。
- 深くネストされた変数(例: 大きな配列でインデックスが付けられたアイテム)。
- 複雑なオブジェクト(ポインタでアクセスできるもの(
->
)を含む)。展開して検査します。
- [ソース] > [スコープ] で、 アイコンをクリックして 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
でビルドされている場合は、次の操作を行います。
- [
chrome://extensions/
] に移動し、[C/C++ DevTools Support(DWARF)] 拡張機能を見つけて、[Details] > [Extension options] をクリックします。 - 新旧のファイルパスを指定します。
詳細
WebAssembly のデバッグについて詳しくは、Chrome DevTools エンジニアリング ブログをご覧ください。