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 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:

  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 C/C++ DevTools Support (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 Sources, centang Menu tiga titik. > Halaman > Kotak centang. Kelompokkan Menurut Ditentukan/Di-deploy Eksperimental..
  3. Pilih file sumber asli dari hierarki file. Dalam kasus ini, mandelbrot.cc.

  4. Untuk menetapkan titik henti sementara baris kode, klik nomor baris di kolom 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 Sources > Editor, arahkan kursor ke variabel untuk melihat nilainya dalam tooltip.

Nilai variabel dalam tooltip.

  • Di Sources > Call Stack, lihat nama fungsi seperti yang ada di sumber.

Fungsi utama di Stack Panggilan.

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

Panel Scope dengan variabel lokal dan 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.

Variabel bertingkat dan objek kompleks diluaskan 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 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:

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

Jalur file lama dan baru yang ditentukan.

Pelajari lebih lanjut

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