WebAssembly menyediakan cara untuk menjalankan, misalnya, kode C/C++ di web dengan kecepatan yang mendekati native dan bersama JavaScript. Dokumen ini menunjukkan cara menyiapkan dan menggunakan Chrome DevTools untuk men-debug aplikasi semacam itu dengan lebih baik.
Setelah menyiapkan DevTools, Anda dapat:
- Periksa kode asli Anda di Sources > Editor.
- Jeda eksekusi dengan breakpoint baris kode dan telusuri kode sumber C/C++ asli Anda, bukan file biner
.wasm
yang dikompilasi.
Dan, saat dijeda, Anda dapat:
- Arahkan kursor ke variabel di file sumber asli dan lihat nilainya.
- Pahami nama fungsi di Call Stack dan variabel di Cakupan.
- Output properti bertingkat yang dalam dan objek kompleks ke Konsol.
- Periksa memori objek dengan Memory Inspector.
Siapkan
Untuk mengaktifkan proses debug WebAssembly C/C++ di DevTools:
Kompilasi aplikasi Anda dengan menyertakan informasi debug DWARF. Jalankan compiler Emscripten terbaru dan teruskan tanda
-g
. Contoh:emcc -g source.cc -o app.html
Untuk mengetahui informasi selengkapnya, lihat Membuat project dengan informasi debug.
Debug
Setelah DevTools disiapkan, debug kode Anda:
- Buka DevTools untuk memeriksa situs Anda. Untuk tutorial ini, Anda dapat mencobanya di halaman demo ini, yang dikompilasi dengan tanda
-g
yang diperlukan. - Atau, kelompokkan file yang Anda tulis untuk memudahkan navigasi. Di Sources, centang > Halaman > Kelompokkan Menurut Ditentukan/Di-deploy .
- Pilih file sumber asli dari hierarki file. Dalam kasus ini,
mandelbrot.cc
. Untuk menetapkan titik henti sementara baris kode, klik nomor baris di kolom sebelah kiri Editor, misalnya, di baris 38.
Jalankan lagi kode. Eksekusi dijeda sebelum baris dengan titik henti sementara.
Saat dijeda, coba langkah berikut:
- Di Sources > Editor, arahkan kursor ke variabel untuk melihat nilainya dalam tooltip.
- Di Sources > Call Stack, lihat nama fungsi seperti yang ada di sumber.
- Di Sources > Cakupan, lihat variabel lokal dan global, jenisnya, serta nilainya.
Di Konsol, variabel dan objek output yang sulit dibuka di Cakupan:
- Variabel yang sangat bertingkat, misalnya, item yang diindeks dalam array besar.
- Objek kompleks, termasuk objek yang dapat Anda akses dengan pointer (
->
). Luaskan untuk diperiksa.
- Di Sources > Scope, klik ikon untuk membuka Memory Inspector dan memeriksa byte mentah memori objek. Untuk informasi selengkapnya, lihat Pemeriksaan memori WebAssembly.
Performa profil
Dengan DevTools yang disiapkan dan dibuka, kode yang dijalankan Chrome tidak dioptimalkan. Layanan ini ditingkatkan untuk memberi Anda pengalaman proses debug yang lebih baik.
Dalam hal ini, Anda tidak dapat mengandalkan console.time()
dan performance.now()
dalam kode Anda untuk membuat profil performa. Sebagai gantinya, gunakan panel Performa untuk membuat profil.
Atau, Anda dapat menjalankan kode pembuatan profil tanpa membuka DevTools, lalu membukanya untuk memeriksa pesan di Konsol.
Memisahkan informasi debug
Untuk mempercepat pemuatan, tetapi tetap memiliki pengalaman proses debug yang lebih baik, Anda dapat memisahkan informasi debug ke dalam file .wasm
terpisah. Untuk mengetahui informasi selengkapnya, lihat Proses Debug WebAssembly Lebih Cepat.
Anda dapat menyimpan file ini secara lokal atau menghostingnya di server terpisah. Untuk melakukannya dengan Emscripten, teruskan flag -gseparate-dwarf=<filename>
dan tentukan jalur ke file:
emcc -g source.cc -o app.html \
-gseparate-dwarf=temp.debug.wasm \
-s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]
Membangun dan men-debug di mesin yang berbeda
Jika Anda membuat sistem operasi di komputer dengan sistem operasi yang berbeda (penampung, VM, atau server jarak jauh) dengan sistem operasi di komputer tempat Anda menjalankan Chrome, Anda mungkin perlu memetakan jalur file debug secara manual.
Misalnya, jika project Anda berada di C:\src\project
secara lokal, tetapi di-build di container Docker dengan jalur /mnt/c/src/project
, lakukan hal berikut:
- Buka
chrome://extensions/
, temukan ekstensi C/C++ DevTools Support (DWARF), lalu klik Details > Opsi ekstensi. - Tentukan jalur file lama dan baru.
Pelajari lebih lanjut
Lihat blog engineering Chrome DevTools untuk informasi selengkapnya tentang proses debug WebAssembly: