Pemeriksa Memori: Memeriksa ArrayBuffer, TypedArray, DataView, dan Memori Wasm.

Gunakan Memory inspector baru untuk memeriksa memori ArrayBuffer, TypedArray, dan DataView di JavaScript serta WebAssembly.Memory aplikasi Wasm yang ditulis dalam C++.

Membuka Pemeriksa Memori

Ada beberapa cara untuk membuka Memory inspector.

Buka dari menu

1. Buka DevTools.
2. Klik More Options > More tools > Memory inspector.

Membuka selama proses debug

1. Buka halaman yang berisi JavaScript ArrayBuffer. Kita akan menggunakan halaman demo ini.
2. Buka DevTools.
3. Buka file demo-js.js di panel Sources, tetapkan titik henti sementara di baris 18.
4. Muat ulang halaman.
5. Luaskan bagian Scope di panel Debugger kanan.

6. Anda dapat membuka Memory inspector:

   • Dari ikon. Mengklik ikon di samping properti buffer, atau
   • Dari menu konteks. Klik kanan properti buffer, lalu pilih Buka di panel Pemeriksa Memori.

   

Memeriksa beberapa objek

1. Anda juga dapat memeriksa DataView atau TypedArray. Misalnya, b2 adalah TypedArray. Untuk memeriksanya, klik kanan properti b2, lalu pilih Buka di panel Pemeriksa Memori (Belum ada ikon untuk TypedArray atau DataView).
2. Tab baru akan terbuka di Memory inspector. Perlu diperhatikan bahwa Anda dapat memeriksa beberapa objek sekaligus.

{i>Memory inspector<i}

Memory inspector terdiri dari 3 area utama:

Menu navigasi

1. Input alamat menunjukkan alamat byte saat ini dalam format heksadesimal. Anda dapat memasukkan nilai baru untuk melompat ke lokasi baru di buffer memori. Misalnya, coba ketik 0x00000008.
2. Buffer memori bisa lebih lama dari satu halaman. Sebagai ganti men-scroll, Anda dapat menggunakan tombol kiri dan kanan untuk menavigasi.
3. Tombol di sebelah kiri memungkinkan navigasi maju/mundur.
4. Secara default, buffer diperbarui secara otomatis saat melakukan loncatan. Jika tidak, tombol refresh akan memberi Anda opsi untuk memuat ulang memori dan memperbarui kontennya.

Buffering memori

1. Dari sebelah kiri, alamat akan ditampilkan dalam format heksadesimal.
2. Memori juga ditampilkan dalam format heksadesimal, setiap byte dipisahkan oleh spasi. Byte yang dipilih saat ini ditandai. Anda dapat mengklik byte tersebut atau menavigasi dengan keyboard (kiri, kanan, atas, bawah).
3. Representasi ASCII dari memori ditampilkan di sisi kanan. Sorotan menunjukkan nilai yang sesuai dengan bit yang dipilih pada byte. Mirip dengan memori, Anda dapat mengklik byte atau menavigasi dengan {i>keyboard<i} (kiri, kanan, atas, bawah).

Pemeriksa nilai

1. Toolbar atas menampilkan tombol untuk beralih antara endian besar dan kecil dan untuk membuka setelan. Buka setelan untuk memilih jenis nilai yang ingin dilihat per default di pemeriksa.
2. Area utama menampilkan semua penafsiran nilai sesuai dengan setelan. Secara default, semuanya akan ditampilkan.
3. Encoding dapat diklik. Anda dapat beralih antara dec, hex, oct untuk integer dan sci, dec untuk float.

Memeriksa memori

Mari kita periksa memori bersama-sama.

1. Ikuti langkah-langkah berikut untuk memulai proses debug.
2. Ubah alamat menjadi 0x00000027 di input alamat.
3. Amati representasi ASCII dan interpretasi nilai. Semua nilai saat ini kosong.
4. Perhatikan tombol Jump to address berwarna biru di samping Pointer 32-bit dan Pointer 64-bit. Anda dapat mengkliknya untuk langsung ke alamat tersebut. Tombol ini berwarna abu-abu dan tidak dapat diklik jika alamat tidak valid.
5. Klik Lanjutkan eksekusi skrip untuk memproses kode.
6. Perhatikan bahwa representasi ASCII kini diperbarui. Semua penafsiran nilai juga diperbarui.
7. Mari kita sesuaikan Value inspector agar hanya menampilkan floating point. Klik tombol pengaturan dan centang Float 32-bit dan Float 64-bit saja.
8. Mari kita ubah encoding dari dec menjadi sci. Perhatikan bahwa representasi nilai diperbarui sebagaimana mestinya.
9. Coba jelajahi buffering memori dengan keyboard atau menggunakan menu navigasi. Ulangi langkah 4 untuk mengamati perubahan nilai.

Pemeriksaan memori WebAssembly

Objek WebAssembly.Memory adalah ArrayBuffer yang menyimpan byte mentah memori objek. Panel Memory Inspector memungkinkan Anda memeriksa objek tersebut di aplikasi Wasm yang ditulis dalam C++.

Untuk memanfaatkan sepenuhnya inspeksi WebAssembly.Memory:

• Gunakan Chrome 107 atau yang lebih baru. Periksa versi Anda di chrome://version/.
• Instal ekstensi C/C++ DevTools Support (DWARF). Ini adalah plugin untuk men-debug aplikasi WebAssembly C/C++ menggunakan informasi debug DWARF.

Untuk memeriksa WebAssembly.Memory objek:

1. Buka DevTools di halaman demo ini.
2. Di panel Sources, buka demo-cpp.cc dan tetapkan titik henti sementara di fungsi main() pada baris 15: x[i] = n - i - 1;.
3. Muat ulang halaman untuk menjalankan aplikasi. Debugger dijeda pada titik henti sementara.
4. Di panel Debugger, luaskan Scope > Local.

5. Klik ikon di samping array x: int[10].

   Atau, klik kanan array, lalu pilih Reveal in Memory Inspector panel.

Untuk berhenti menandai memori objek, di panel Memory Inspector, arahkan kursor ke badge objek dan klik tombol x.

Untuk mempelajari lebih lanjut, lihat:

• Memperluas Memory Inspector untuk proses debug C/C++
• Proses debug WebAssembly dengan alat modern.