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

Ingvar Stepanyan
Ingvar Stepanyan

背景

最近まで、Chrome DevTools で WebAssembly デバッグがサポートされていたのは、 未加工の WebAssembly スタック トレースや、 分解された WebAssembly テキスト形式になります。

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

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

一時的な回避策

この問題を回避するために、Emscripten と DevTools は一時的に既存の ソースマップ形式を WebAssembly に変換します。これにより、コンパイルされたモジュールのバイナリ オフセットとソースファイルの元の場所とのマッピングが可能になりました。

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

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

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 に関連するその他のことについて話し合います。