Latar belakang
Hingga saat ini, satu-satunya proses debug WebAssembly yang didukung Chrome DevTools sedang dilihat pelacakan tumpukan WebAssembly mentah, dan menginjak petunjuk individual format teks WebAssembly yang dibongkar.
Meskipun berfungsi dengan modul WebAssembly apa pun dan sedikit membantu dalam proses debug fungsi kecil dan terisolasi, hal ini tidak terlalu praktis untuk aplikasi yang lebih besar dengan pemetaan antara kode yang dibongkar dan sumber Anda tidak terlalu jelas.
Solusi sementara
Untuk mengatasi masalah ini, Emscripten dan DevTools untuk sementara waktu telah menyesuaikan peta sumber ke WebAssembly. Hal ini memungkinkan pemetaan antara offset biner dalam modul yang dikompilasi ke lokasi asli dalam file sumber.
Namun, peta sumber dirancang untuk format teks dengan pemetaan yang jelas terhadap konsep dan nilai JavaScript, bukan untuk format biner seperti WebAssembly dengan bahasa sumber arbitrer, sistem jenis, dan memori linear. Hal ini membuat integrasinya rumit, terbatas, dan tidak didukung secara luas di luar Emscripten.
Masukkan DWARF
Di sisi lain, banyak bahasa asli sudah memiliki format {i>debugging<i} umum, DWARF, yang menyediakan semua informasi yang diperlukan debugger untuk me-resolve lokasi, nama variabel, tata letak jenis, dan lainnya.
Meskipun masih ada beberapa fitur khusus WebAssembly yang perlu ditambahkan untuk kompatibilitas penuh, compiler seperti Clang dan Rust sudah mendukung pemberian informasi DWARF dalam modul WebAssembly, yang memungkinkan tim DevTools untuk mulai menggunakannya secara langsung di DevTools.
Sebagai langkah pertama, DevTools sekarang mendukung pemetaan sumber native menggunakan informasi ini, sehingga Anda bisa mulai men-debug modul Wasm yang dihasilkan oleh salah satu compiler ini tanpa menggunakan format yang dibongkar atau harus menggunakan skrip khusus.
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 menyelesaikan pelacakan tumpukan dalam bahasa sumber Anda.
Acara mendatang
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 mendapatkan 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 masih 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 mutakhir, dan menemukan masalah di situs Anda sebelum pengguna melakukannya.
Menghubungi tim Chrome DevTools
Gunakan opsi berikut untuk membahas fitur dan perubahan baru dalam postingan, atau hal lain yang terkait dengan DevTools.
- Kirim saran atau masukan kepada kami melalui crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya
> Bantuan > Laporkan masalah DevTools di DevTools. - Tweet di @ChromeDevTools.
- Tulis komentar di Video YouTube yang baru di DevTools atau Tips DevTools Video YouTube.