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 membantu men-debug fungsi kecil yang terisolasi, hal ini tidak terlalu praktis untuk aplikasi yang lebih besar karena pemetaan antara kode yang di-disassemble dan sumber Anda kurang 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 ke 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 informasi DWARF yang dimunculkan dalam modul WebAssembly, yang memungkinkan tim DevTools mulai menggunakannya langsung di DevTools.
Sebagai langkah pertama, DevTools kini 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
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 mendapatkan manfaat dari integrasi ini.
Di sisi Chrome DevTools, kami akan mengembangkan integrasi lebih lanjut 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
Sebaiknya gunakan 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.
- Kirimkan saran atau masukan kepada kami melalui crbug.com.
- Laporkan masalah DevTools menggunakan Opsi lainnya > Bantuan > Laporkan masalah DevTools di DevTools.
- Tweet ke @ChromeDevTools.
- Berikan komentar di video YouTube Yang baru di DevTools atau video YouTube Tips DevTools.