Men-debug WebAssembly C/C++

Sofia Emelianova
Sofia Emelianova
GitHub

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 Sumber > 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 dalam file sumber asli dan lihat nilainya.
  • Pahami nama fungsi di Stack Panggilan 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:

  1. 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.

  2. Instal ekstensi Chrome Dukungan DevTools C/C++ (DWARF).

Debug

Setelah DevTools disiapkan, debug kode Anda:

  1. Buka DevTools untuk memeriksa situs Anda. Untuk tutorial ini, Anda dapat mencobanya di halaman demo ini, yang dikompilasi dengan tanda -g yang diperlukan.
  2. Atau, kelompokkan file yang Anda tulis untuk memudahkan navigasi. Di Sumber, centang Menu tiga titik. > Halaman > Kotak centang. > Kelompokkan menurut Dibuat/Diterapkan Eksperimental..
  3. Pilih file sumber asli Anda dari hierarki file. Dalam kasus ini, mandelbrot.cc.

  4. Untuk menetapkan titik henti sementara baris kode, klik nomor baris dalam kolom di sebelah kiri Editor, misalnya, di baris 38.

    Titik henti sementara baris kode ditetapkan di baris 38.

  5. Jalankan lagi kode. Eksekusi dijeda sebelum baris dengan titik henti sementara.

Saat dijeda, coba langkah berikut:

  • Di Sumber > Editor, arahkan kursor ke variabel untuk melihat nilainya dalam tooltip.

Nilai variabel dalam tooltip.

  • Di Sumber > Stack Panggilan, lihat nama fungsi seperti yang ada di sumber.

Fungsi utama di Stack Panggilan.

  • Di Sumber > Cakupan, lihat variabel lokal dan global, jenisnya, serta nilainya.

Panel Cakupan dengan variabel lokal dan nilainya.

  • Di Konsol, variabel dan objek output yang sulit dibuka di Cakupan:

    • Variabel bertingkat dalam, misalnya, item yang diindeks dalam array besar.
    • Objek kompleks, termasuk yang dapat Anda akses dengan pointer (->). Luaskan untuk memeriksanya.

Variabel bertingkat dan objek kompleks diperluas di Console.

  • Di Sources > Scope, klik ikon Memori. untuk membuka Memory Inspector dan memeriksa byte mentah memori objek. Untuk informasi selengkapnya, lihat Pemeriksaan memori WebAssembly.

Memeriksa memori variabel.

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 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 informasi selengkapnya, lihat Melakukan Proses Debug WebAssembly dengan 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 mem-build di komputer dengan sistem operasi (penampung, VM, atau server jarak jauh) yang berbeda 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 dalam penampung Docker dengan jalur /mnt/c/src/project, lakukan hal berikut:

  1. Buka chrome://extensions/, temukan ekstensi C/C++ DevTools Support (DWARF), lalu klik Details > Extension options.
  2. Tentukan jalur file lama dan baru.

Jalur file lama dan baru yang ditentukan.

Pelajari lebih lanjut

Lihat blog engineering Chrome DevTools untuk mengetahui informasi selengkapnya tentang proses debug WebAssembly: