Peningkatan proses debug WebAssembly di Chrome DevTools

Ingvar Stepanyan
Ingvar Stepanyan

Latar belakang

Hingga saat ini, satu-satunya proses debug WebAssembly yang didukung Chrome DevTools adalah melihat pelacakan tumpukan WebAssembly mentah, dan melangkahi setiap petunjuk dalam format teks WebAssembly yang diuraikan.

Screenshot dukungan proses debug WebAssembly yang sebelumnya dibatasi di Chrome DevTools.

Meskipun ini berfungsi dengan modul WebAssembly apa pun dan agak membantu proses debug fungsi kecil yang terisolasi, cara ini tidak praktis untuk aplikasi yang lebih besar jika pemetaan antara kode yang dibongkar dan sumber Anda kurang jelas.

Solusi sementara

Untuk mengatasi masalah ini, Emscripten dan DevTools sementara telah menyesuaikan format peta sumber yang ada ke WebAssembly. Hal ini memungkinkan pemetaan antara offset biner dalam modul yang dikompilasi ke lokasi asli dalam file sumber.

Screenshot proses debug yang didukung peta sumber.

Namun, peta sumber didesain untuk format teks dengan pemetaan yang jelas ke konsep dan nilai JavaScript, bukan untuk format biner seperti WebAssembly dengan bahasa sumber arbitrer, sistem jenis, dan memori linear. Hal ini membuat integrasi menjadi peretasan, terbatas, dan tidak didukung secara luas di luar Emscripten.

Masukkan DWARF

Di sisi lain, banyak bahasa native sudah memiliki format proses debug umum, DWARF, yang memberikan semua informasi yang diperlukan oleh debugger untuk me-resolve lokasi, nama variabel, tata letak jenis, dan banyak lagi.

Meskipun masih ada beberapa fitur khusus WebAssembly yang perlu ditambahkan untuk kompatibilitas penuh, compiler seperti Clang dan Rust sudah mendukung memunculkan informasi DWARF di modul WebAssembly, yang memungkinkan tim DevTools untuk mulai menggunakannya langsung di DevTools.

Sebagai langkah pertama, DevTools kini mendukung pemetaan sumber native menggunakan informasi ini, sehingga Anda dapat mulai men-debug modul Wasm yang dihasilkan oleh salah satu compiler ini tanpa menggunakan format yang dibongkar atau harus menggunakan skrip kustom.

Sebagai gantinya, Anda hanya perlu memberi tahu compiler untuk menyertakan info debug seperti yang biasa Anda lakukan di platform lain. Misalnya, di Clang dan Emscripten, hal ini dapat dilakukan dengan meneruskan flag -g selama kompilasi:

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

  emcc -g …sources… -o out.js

Anda dapat menggunakan flag -g yang sama di Rust:

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

Atau, jika Anda menggunakan Cargo, info debug akan disertakan secara default:

  cargo build --target wasm32-unknown-unknown

Integrasi DevTools baru dengan DWARF ini sudah mencakup dukungan untuk melangkahi kode, menyetel titik henti sementara, dan me-resolve pelacakan tumpukan dalam bahasa sumber.

Screenshot proses debug baru yang didukung DWARF.

Acara mendatang

Namun, masih ada banyak pekerjaan yang harus dilakukan. Misalnya, di sisi alat, Emscripten (Binaryen) dan wasm-pack (wasm-bindgen) belum mendukung pembaruan informasi DWARF terkait transformasi yang dilakukan. Untuk saat ini, mereka tidak akan memperoleh manfaat dari integrasi ini.

Dan di sisi Chrome DevTools, kami akan lebih mengembangkan integrasi dari waktu ke waktu untuk memastikan pengalaman proses debug yang lancar, termasuk:

  • Menyelesaikan nama variabel
  • Jenis Pretty-printing
  • Mengevaluasi ekspresi dalam bahasa sumber
  • ...dan banyak lagi.

Pantau terus untuk mengetahui update berikutnya.

Mendownload saluran pratinjau

Pertimbangkan untuk menggunakan Chrome Canary, Dev, atau Beta sebagai browser pengembangan default Anda. Saluran pratinjau ini memberi Anda akses ke fitur DevTools terbaru, menguji API platform web tercanggih, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.

Menghubungi tim Chrome DevTools

Gunakan opsi berikut untuk membahas fitur dan perubahan baru di postingan, atau hal lain yang berkaitan dengan DevTools.

  • Kirim saran atau masukan kepada kami melalui crbug.com.
  • Laporkan masalah DevTools menggunakan Opsi lainnya   Lainnya   > Bantuan > Laporkan masalah DevTools di DevTools.
  • Tweet di @ChromeDevTools.
  • Berikan komentar di video YouTube Apa yang baru di DevTools atau video YouTube Tips DevTools.