Chrome DevTools での WebAssembly デバッグの改善

Ingvar Stepanyan
Ingvar Stepanyan

背景

最近まで、Chrome DevTools でサポートされている WebAssembly のデバッグは、未加工の WebAssembly スタック トレースを表示することと、逆アセンブルされた WebAssembly テキスト形式で個々の命令をステップ オーバーすることのみでした。

Chrome DevTools での、以前制限されていた WebAssembly デバッグ サポートのスクリーンショット。

これは、どの WebAssembly モジュールでも機能し、小さな分離された関数のデバッグに役立ちますが、逆アセンブルされたコードとソースの間のマッピングがわかりにくい大規模なアプリではあまり実用的ではありません。

一時的な回避策

この問題を回避するために、Emscripten と DevTools では既存のソースマップ形式を一時的に WebAssembly に適応させました。これにより、コンパイル済みモジュール内のバイナリ オフセットとソースファイル内の元の位置をマッピングできるようになりました。

ソースマップを利用したデバッグのスクリーンショット。

ただし、ソースマップは、JavaScript のコンセプトや値への明確なマッピングを持つテキスト形式向けに設計されており、任意のソース言語、型システム、リニアメモリを使用する WebAssembly などのバイナリ形式向けではありません。そのため、統合が難しく、制限があり、Emscripten 以外では広くサポートされていませんでした。

DWARF を入力

一方、多くのネイティブ言語には、共通のデバッグ形式である DWARF がすでに存在します。DWARF は、デバッガが場所、変数名、型レイアウトなどを解決するために必要な情報をすべて提供します。

完全な互換性のために追加する必要がある WebAssembly 固有の機能がまだいくつかありますが、Clang や Rust などのコンパイラはすでに WebAssembly モジュールでの DWARF 情報の出力をサポートしており、DevTools チームは DevTools で直接それの使用を開始できます。

最初のステップとして、DevTools はこの情報を使用したネイティブ ソース マッピングをサポートするようになりました。これにより、逆アセンブルされた形式に頼ったり、カスタム スクリプトを使用したりすることなく、これらのコンパイラによって生成された Wasm モジュールのデバッグを開始できます。

代わりに、他のプラットフォームの場合と同様に、デバッグ情報を含めるようコンパイラに指示するだけです。たとえば、Clang と Emscripten では、コンパイル時に -g フラグを渡すことでこれを行うことができます。

  clang -g …sources… -target wasm32 -o out.wasm

  emcc -g …sources… -o out.js

Rust では、同じ -g フラグを使用できます。

  rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm

Cargo を使用している場合は、デフォルトでデバッグ情報が含まれます。

  cargo build --target wasm32-unknown-unknown

この新しい DevTools と DWARF の統合により、ソース言語でのコードのステップオーバー、ブレークポイントの設定、スタック トレースの解決のサポートがすでに含まれています。

新しい DWARF を使用したデバッグのスクリーンショット。

今後の計画

しかし、やるべきことはたくさんあります。たとえば、ツール側では、Emscripten（Binaryen）と wasm-pack（wasm-bindgen）は、まだ実行している変換に関する DWARF 情報の更新をサポートしていません。現時点では、この統合のメリットはありません。

Chrome DevTools に関しては、シームレスなデバッグを実現するために、以下のように統合をさらに進化させていく予定です。

  • 変数名の解決
  • プリティ プリントの種類
  • ソース言語での式の評価
  • ほか多数

今後の最新情報にご期待ください。

プレビュー チャネルをダウンロードする

Chrome Canary、Dev、Beta を既定の開発ブラウザとして使用することをご検討ください。これらのプレビュー チャンネルでは、最新の DevTools 機能にアクセスしたり、最先端のウェブ プラットフォーム API をテストしたり、ユーザーが実際に体験する前にサイト上の問題を検出したりできます。

Chrome DevTools チームへのお問い合わせ

投稿内の新機能や変更点、または DevTools に関するその他のことについて話し合うには、次のオプションを使用します。

  • crbug.com からご提案やフィードバックをお送りください。
  • DevTools の問題を報告するには、DevTools でその他のオプション アイコン その他   > [ヘルプ] > [DevTools の問題を報告する] を選択します。
  • @ChromeDevTools にツイートします。
  • 「DevTools の新機能」の YouTube 動画または DevTools のヒントの YouTube 動画でコメントを残してください。