背景
最近まで、Chrome DevTools で WebAssembly デバッグがサポートされていたのは、 未加工の WebAssembly スタック トレースや、 分解された WebAssembly テキスト形式になります。
これはどの WebAssembly モジュールでも動作し、分離された小さな関数のデバッグにはある程度役立ちますが、逆アセンブルされたコードとソースの間のマッピングがわかりにくい大規模なアプリではあまり実用的ではありません。
一時的な回避策
この問題を回避するために、Emscripten と DevTools は一時的に既存の ソースマップ形式を WebAssembly に変換します。この許可されたマッピングは コンパイル済みモジュール内のバイナリオフセットとソースファイル内の元の場所の間の差分
ただし、ソースマップは JavaScript のコンセプトと値への明確なマッピングがあるテキスト形式向けに設計されており、任意のソース言語、型システム、リニアメモリを使用する WebAssembly のようなバイナリ形式向けではありません。そのため、統合は面倒で、制限があり、Emscripten 以外では広くサポートされていませんでした。
DWARF を入力
一方、多くのネイティブ言語にはすでに共通のデバッグ形式があり、 DWARF: デバッガが場所、変数名、型レイアウトなどを解決するために必要なすべての情報を提供します。
完全な互換性のために追加する必要のある WebAssembly 固有の機能がまだいくつかありますが、Clang や Rust などのコンパイラはすでに WebAssembly モジュールでの DWARF 情報の出力をサポートしているため、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 のインテグレーションでは、コードのステップオーバー、ブレークポイントの設定、ソース言語でのスタック トレースの解決がすでにサポートされています。
今後について
ただし、やるべきことはまだたくさんあります。
たとえば、ツール側では、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 動画にコメントを残してください。