Di Chrome 92, kami memperkenalkan Memory Inspector, sebuah alat untuk memeriksa buffer memori linear. Dalam artikel ini, kita akan membahas cara kami meningkatkan Inspector untuk proses debug C/C++ dan masalah teknis yang dihadapi selama proses berlangsung.
Berikut adalah beberapa postingan blog yang relevan jika Anda baru mengenal proses debug C/C++ dan Memory Inspector:
- Tertarik dengan proses debug memori mendalam? Lihat Memperkenalkan Pemeriksa Memori.
- Ingin pengenalan paket lengkap proses debug C/C++? Lihat Melakukan proses debug WASM dengan alat modern dan Proses Debug WebAssembly Lebih Cepat.
Pengantar
Memory Inspector memberi Anda opsi proses debug yang lebih canggih untuk buffer memori linear. Pada kasus C/C++, Anda dapat memeriksa objek memori C/C++ di WebAssembly Memory.
Mengenali byte objek Anda di antara memori WebAssembly di sekitarnya adalah titik masalah. Anda harus mengetahui ukuran objek dan menghitung byte dari awal objek. Pada screenshot di bawah, byte pertama dari array int32 10 elemen dipilih tetapi tidak langsung jelas byte lain mana yang termasuk dalam array. Pasti menyenangkan jika Anda bisa langsung mengenali semua byte yang termasuk dalam objek tersebut?
Penandaan objek di Memory Inspector
Mulai Chrome 107, Memory Inspector akan menandai semua byte objek memori C/C++. Hal ini membantu Anda membedakannya dari memori di sekitarnya.
Tonton video berikut untuk melihat cara kerja Memory Inspector. Saat Anda menampilkan array x di Memory Inspector, memori yang ditandai akan muncul di Memory Viewer bersama dengan chip baru yang tepat di atasnya. Chip ini mengingatkan Anda nama dan jenis memori yang ditandai. Klik chip untuk melompat ke memori objek. Jika Anda mengarahkan kursor ke chip, ikon silang akan muncul – klik ikon tersebut untuk menghapus sorotan.
Saat Anda memilih byte di luar objek yang diperiksa, sorotan akan berkurang fokusnya agar tidak mengganggu Anda. Untuk memfokuskan ulang lagi, klik salah satu byte objek atau chip sekali lagi.
Dukungan untuk penyorotan objek tidak terbatas pada array. Anda juga dapat memeriksa struct, objek, dan pointer. Perubahan ini mempermudah penjelajahan memori aplikasi C/C++ Anda.
Ingin mencobanya? Anda harus:
- Memiliki Chrome 107 atau yang lebih baru.
- Instal Ekstensi DWARF C/C++.
- Aktifkan proses debug DWARF di DevTools >
Setelan > Eksperimen > Proses Debug WebAssemble: Aktifkan dukungan DWARF. - Buka halaman demo ini.
- Ikuti petunjuk pada halaman.
Contoh proses debug
Di bagian ini, mari kita lihat bug mainan untuk mengilustrasikan cara menggunakan Memory Inspector untuk proses debug C/C++. Dalam contoh kode di bawah ini, seorang programmer membuat sebuah array integer dan memutuskan untuk menggunakan aritmatika pointer untuk memilih elemen terakhir. Sayangnya, {i>programmer<i} membuat kesalahan dalam perhitungan pointer dan sekarang program mencetak nilai omong kosong, bukan mencetak elemen terakhir.
#include <iostream>
int main()
{
int numbers[] = {1, 2, 3, 4};
int *ptr = numbers;
int arraySize = sizeof(numbers)/sizeof(int);
int* lastNumber = ptr + arraySize; // Can you notice the bug here?
std::cout <<../ *lastNumber <<../ '\n';
return 0;
}
Programmer beralih ke Memory Inspector untuk men-debug masalah. Anda dapat mengikuti demo ini. Pertama-tama, mereka memeriksa array di Memory Inspector dan melihat bahwa array numbers hanya berisi bilangan bulat 1, 2, 3, dan 4, seperti yang diharapkan.
Selanjutnya, mereka menampilkan variabel lastNumber dari panel Cakupan dan melihat bahwa pointer mengarah ke bilangan bulat di luar array. Dengan pengetahuan ini, programmer menyadari bahwa mereka salah menghitung offset pointer di baris 8. Seharusnya ptr + arraySize - 1.
Meskipun ini contoh mainan, ini menggambarkan bagaimana penyorotan objek secara efektif menyampaikan ukuran dan posisi objek memori, yang dapat membantu Anda lebih memahami apa yang terjadi di dalam memori aplikasi C/C++ Anda.
Cara DevTools mencari tahu apa yang harus disorot
Di bagian ini, kita akan melihat ekosistem alat yang memungkinkan proses debug C/C++. Secara khusus, Anda akan mempelajari bagaimana DevTools, V8, Ekstensi DWARF C/C++, dan Emscripten memungkinkan proses debug C/C++ di Chrome.
Untuk memanfaatkan kemampuan penuh proses debug C/C++ di DevTools, Anda memerlukan dua hal:
- Ekstensi DWARF C/C++ yang diinstal di Chrome
- File sumber C/C++ yang dikompilasi ke WebAssembly dengan compiler Emscripten terbaru seperti yang ditunjukkan dalam postingan blog ini
Mengapa? V8 , mesin WebAssembly dan JavaScript Chrome, tidak tahu cara menjalankan C atau C++. Berkat Emscripten, compiler C/C++ ke WebAssembly, Anda dapat mengompilasi aplikasi yang dibangun di C atau C++ sebagai WebAssembly dan mengeksekusinya di browser.
Selama kompilasi, emscripten akan menyematkan data debug DWARF ke biner Anda. Secara umum, data ini membantu ekstensi untuk mengetahui variabel WebAssembly yang sesuai dengan variabel C/C++ Anda, dan banyak lagi. Dengan cara ini, DevTools bisa menunjukkan variabel C++ Anda meskipun V8 benar-benar menjalankan WebAssembly. Jika Anda ingin tahu, lihat postingan blog ini untuk contoh data debug DWARF.
Jadi, apa yang sebenarnya terjadi saat Anda menampilkan lastNumber? Segera setelah Anda mengklik ikon memori, DevTools akan memeriksa variabel mana yang ingin Anda periksa. Selanjutnya, alat ini akan mengkueri ekstensi pada jenis data dan lokasi lastNumber. Begitu ekstensi merespons informasi tersebut, Memory Inspector dapat menampilkan potongan memori yang relevan dan mengetahui jenisnya, ekstensi juga dapat menunjukkan ukuran objek kepada Anda.
Jika melihat lastNumber dalam contoh sebelumnya, Anda mungkin melihat bahwa kita sudah memeriksa lastNumber: int *, tetapi chip di Memory Inspector menyebutkan *lastNumber: int. Apa penyebabnya? Pemeriksa menggunakan dereferensi pointer bergaya C++ untuk menunjukkan jenis objek yang ditampilkan kepada Anda. Jika Anda memeriksa sebuah pointer, pemeriksa akan menunjukkan apa yang ditunjuk oleh pointer tersebut.
Mempertahankan sorotan pada langkah debugger
Saat Anda menampilkan objek di Memory Inspector dan langkah dengan debugger, Inspector akan mempertahankan sorotan jika dianggap masih berlaku. Awalnya, kami tidak memiliki fitur ini dalam roadmap kami, tetapi kami segera menyadari bahwa hal ini akan mengganggu pengalaman proses debug Anda. Bayangkan jika Anda harus memeriksa ulang array setelah setiap langkah seperti dalam video di bawah.
Saat debugger mencapai titik henti sementara baru, Memory Inspector kembali mengkueri V8 dan ekstensi untuk variabel yang terkait dengan sorotan sebelumnya. Kemudian, fitur ini membandingkan lokasi dan jenis objek. Jika cocok, sorotan akan tetap ada. Dalam video di atas, terdapat penulisan for-loop ke array x. Operasi ini tidak mengubah jenis atau posisi array, sehingga tetap tersorot.
Anda mungkin bertanya-tanya bagaimana hal ini memengaruhi pointer. Jika Anda memiliki pointer yang disorot dan menetapkannya kembali ke objek lain, posisi lama dan baru dari objek yang disorot akan berbeda dan sorotan menghilang. Karena objek yang baru ditunjuk dapat berada di mana saja di Memori WebAssembly dan kemungkinan akan memiliki sedikit hubungan dengan lokasi memori sebelumnya, menghapus sorotan lebih jelas daripada melompat ke lokasi memori baru. Anda dapat menandai lagi pointer dengan mengklik ikon memorinya di panel Scope.
Kesimpulan
Artikel ini menjelaskan peningkatan kami pada Memory Inspector untuk proses debug C/C++. Kami harap fitur baru ini akan menyederhanakan proses debug memori aplikasi C/C++ Anda. Jika Anda memiliki saran untuk meningkatkannya lebih lanjut, beri tahu kami dengan melaporkan bug.
Langkah selanjutnya
Untuk mempelajari lebih lanjut, lihat: