Men-debug WebAssembly C/C++

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly menyediakan cara untuk menjalankan, misalnya, kode C/C++ di web mendekati kecepatan native dan bersama JavaScript. Dokumen ini menunjukkan cara menyiapkan dan menggunakan Chrome DevTools untuk men-debug aplikasi semacam ini dengan lebih baik.

Setelah menyiapkan DevTools, Anda bisa:

  • Periksa kode asli Anda di Sumber > Editor.
  • Jeda eksekusi dengan titik henti sementara baris kode dan lanjutkan 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 dalam Call Stack dan variabel dalam Cakupan.
  • Menghasilkan properti yang bertingkat sangat dan objek kompleks ke Konsol.
  • Memeriksa memori objek dengan Memory Inspector.

Penyiapan

Untuk mengaktifkan proses debug WebAssembly C/C++ di DevTools:

  1. Kompilasi aplikasi Anda dengan menyertakan informasi debug DWARF. Jalankan compiler Emscripten terbaru dan teruskan flag -g. Contoh:

    emcc -g source.cc -o app.html

    Untuk mengetahui informasi selengkapnya, lihat Mem-build project dengan informasi debug.

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

Men-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 flag -g yang diperlukan.
  2. Atau, kelompokkan file yang Anda tulis untuk memudahkan navigasi. Di Sumber, centang Menu tiga titik. > Halaman > Kotak centang. > Kelompokkan menurut Penulis/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 yang ditetapkan di baris 38.

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

Saat dijeda, coba hal berikut:

  • Pada Sumber > Editor, arahkan kursor ke variabel untuk melihat nilainya di tooltip.

Nilai variabel dalam tooltip.

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

Fungsi utama dalam Call Stack.

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

Panel Scope dengan variabel lokal dan nilainya.

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

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

Variabel bertingkat dan objek kompleks yang diperluas di Konsol.

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

Memeriksa memori variabel.

Performa profil

Jika DevTools disiapkan dan terbuka, kode yang dijalankan Chrome tidak akan dioptimalkan. Sistem ini ditingkatkan ke bawah 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 mendapatkan pengalaman proses debug yang lebih baik, Anda dapat membagi informasi debug ke dalam file .wasm terpisah. Untuk mengetahui informasi selengkapnya, lihat Men-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 komputer yang berbeda

Jika Anda membangun di komputer dengan sistem operasi yang berbeda (container, VM, atau server jarak jauh) dengan sistem 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 dibuat di container Docker dengan jalur /mnt/c/src/project, lakukan langkah 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 informasi selengkapnya tentang proses debug WebAssembly: