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

Jecelyn Yeen

Sofia Emelianova

Catatan: Panel Pemeriksa Memori tersedia mulai Chrome 91. Anda dapat memeriksa versi di chrome://version/.

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

Ringkasan

Memory inspector mengatur konten memori dan membantu Anda menjelajahi array besar dengan cepat. Anda dapat melihat nilai ASCII konten memori tepat di samping byte, dan memilih endianness yang berbeda. Gunakan Pemeriksa memori saat men-debug aplikasi web untuk alur kerja yang efisien.

Membuka Pemeriksa Memori

Ada beberapa cara untuk membuka Memory inspector.

Membuka dari menu

1. Buka DevTools.
2. Klik Opsi Lainnya > Alat lainnya > Memory inspector.

Buka selama proses debug

1. Buka halaman dengan 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 Cakupan di panel Debugger sebelah 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 Tampilkan di panel Memory Inspector.

   

Memeriksa beberapa objek

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

Pemeriksa memori

Memory inspector terdiri dari 3 area utama:

Menu navigasi

1. Input alamat menampilkan alamat byte saat ini dalam format heksadesimal. Anda dapat memasukkan nilai baru untuk beralih ke lokasi baru di buffering memori. Misalnya, coba ketik 0x00000008.
2. Buffer memori dapat lebih panjang dari satu halaman. Anda dapat menggunakan tombol kiri dan kanan untuk berpindah, bukan men-scroll.
3. Tombol di sebelah kiri memungkinkan navigasi maju/mundur.
4. Secara default, buffering diperbarui secara otomatis saat melakukan langkah. Jika tidak, tombol refresh memberi Anda opsi untuk memuat ulang memori dan memperbarui kontennya.

Buffer memori

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

Pemeriksa nilai

1. Toolbar atas menampilkan tombol untuk beralih antara big dan little endian serta untuk membuka setelan. Buka setelan untuk memilih jenis nilai yang ingin dilihat secara default di inspector.
2. Area utama menampilkan semua interpretasi nilai sesuai dengan setelan. Secara default, semua akan ditampilkan.
3. Encoding dapat diklik. Anda dapat beralih antara dec, hex, oct untuk bilangan bulat dan sci, dec untuk float.

Memeriksa memori

Mari kita periksa memori bersama.

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 kosong saat ini.
4. Perhatikan tombol Lompat ke alamat biru di samping Pointer 32-bit dan Pointer 64-bit. Anda dapat mengkliknya untuk membuka alamat. Tombol akan berwarna abu-abu dan tidak dapat diklik jika alamat tidak valid.
5. Klik Lanjutkan eksekusi skrip untuk melihat kode secara bertahap.
6. Perhatikan bahwa representasi ASCII kini diperbarui. Semua interpretasi nilai juga diperbarui.
7. Mari kita sesuaikan Value inspector untuk hanya menampilkan floating point. Klik tombol setelan dan centang hanya Float 32-bit dan Float 64-bit.
8. Mari kita ubah encoding dari dec menjadi sci. Perhatikan bahwa representasi nilai diperbarui sebagaimana mestinya.
9. Coba buka 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 pemeriksaan WebAssembly.Memory sepenuhnya:

• Gunakan Chrome 107 atau yang lebih baru. Periksa versi Anda di chrome://version/.
• Instal ekstensi Dukungan DevTools C/C++ (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 Sumber, 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 Cakupan > Lokal.

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

   Atau, klik kanan array, lalu pilih Tampilkan di panel Memory Inspector.

Catatan: Mulai dari Chrome versi 107, Memory Inspector akan menandai semua byte objek memori C/C++. Hal ini memungkinkan Anda membedakannya dari memori di sekitarnya.

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

Untuk mempelajari lebih lanjut, lihat:

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