Bellek Denetleyici: ArrayBuffer, TypedArray, DataView ve Wasm Bellek'i inceleyin.

Jecelyn Yeen

Sofia Emelianova

JavaScript'te ArrayBuffer, TypedArray ve DataView belleğin yanı sıra C++ dilinde yazılmış Wasm uygulamalarının WebAssembly.Memory kadarını incelemek için Bellek denetleyicisini kullanın.

Genel Bakış

Bellek denetleyicisi, bellek içeriğini düzenler ve büyük dizilerde hızlı bir şekilde gezinmenize yardımcı olur. Bellek içeriğinin ASCII değerlerini doğrudan baytların yanında görüntüleyebilir ve farklı endianlık değerleri seçebilirsiniz. Verimli bir iş akışı için web uygulamanızda hata ayıklarken Bellek İnceleyici'yi kullanın.

Bellek Denetleyicisi'ni açın

Bellek denetleyicisi'ni açmanın birkaç yolu vardır.

Menüden aç

1. Geliştirici Araçları'nı açın.
2. Diğer Seçenekler'i tıklayın > Diğer araçlar > Bellek denetleyicisi.

Hata ayıklama sırasında aç

1. ArrayBuffer JavaScript içeren bir sayfa açın. Bu demo sayfasını kullanacağız.
2. Geliştirici Araçları'nı açın.
3. Kaynaklar panelinde demo-js.js dosyasını açın ve 18. satırda bir ayrılma noktası belirleyin.
4. Sayfayı yenileyin.
5. Sağ Hata Ayıklayıcı bölmesinde Kapsam bölümünü genişletin.

6. Bellek denetleyicisi'ni açabilirsiniz:

   • Simgeden. buffer mülkünün yanındaki simgeyi tıklayabilir veya
   • İçerik menüsünden. buffer özelliğini sağ tıklayın ve Bellek Denetleyicisi panelinde göster'i seçin.

   

Birden çok nesneyi inceleme

1. DataView veya TypedArray'i de inceleyebilirsiniz. Örneğin, b2 bir TypedArray. Bunu incelemek için b2 özelliğini sağ tıklayın ve Bellek Denetleyicisi panelinde göster'i seçin (TypedArray veya DataView için henüz simge yok).
2. Bellek denetleyicisinde yeni bir sekme açılır. Aynı anda birden fazla nesneyi inceleyebileceğinizi lütfen unutmayın.

Bellek Denetleyicisi

Bellek denetleyicisi 3 ana alandan oluşur:

Gezinme çubuğu

1. Adres girişi, geçerli bayt adresini onaltılık biçimde gösterir. Bellek arabelleğinde yeni bir konuma atlamak için yeni bir değer girebilirsiniz. Örneğin, 0x00000008 yazmayı deneyin.
2. Bellek arabellekleri bir sayfadan daha uzun olabilir. Gezinmek için ekranı kaydırmak yerine sol ve sağ düğmelerini kullanabilirsiniz.
3. Soldaki düğmeler ileri/geri gezinmeye olanak tanır.
4. Arabellek, varsayılan olarak adımlama sırasında otomatik olarak güncellenir. Aksi takdirde, yenile düğmesi size belleği yenileme ve içeriğini güncelleme seçeneği sunar.

Bellek arabelleği

1. Adres, sol tarafta onaltılık biçimde gösterilir.
2. Bellek de onaltılık biçimde gösterilir. Her bayt boşlukla ayrılır. O anda seçili olan bayt vurgulanır. Baytı tıklayabilir veya klavyeyle (sol, sağ, yukarı, a��ağı) gezinebilirsiniz.
3. Belleğin ASCII gösterimi sağ tarafta gösterilir. Vurgulama, bayt üzerindeki seçili bitlere karşılık gelen değeri gösterir. Belleğe benzer şekilde, baytı tıklayabilir veya klavyeyle (sol, sağ, yukarı, aşağı) gezinebilirsiniz.

Değer denetleyici

1. Üstteki araç çubuğunda, büyük ve küçük endian arasında geçiş yapmak ve ayarları açmak için bir düğme bulunur. İnceleyicide varsayılan olarak görmek istedikleri değer türlerini seçmek için ayarları açın.
2. Ana alanda, ayarlara göre tüm değer yorumları gösterilir. Varsayılan olarak tümü gösterilir.
3. Kodlama tıklanabilir. Tamsayı için ondalık, onaltılık, sekiz, kayan noktalı sayılar için onaltılık, onaltılık değerleri arasında geçiş yapabilirsiniz.

Bellek inceleme

Hafızayı birlikte inceleyelim.

1. Hata ayıklama işlemini başlatmak için bu adımları uygulayın.
2. Adres girişinde adresi 0x00000027 olarak değiştirin.
3. ASCII gösterimini ve değer yorumlamalarını gözlemleyin. Şu anda tüm değerler boş.
4. Pointer 32-bit ve Pointer 64-bit simgelerinin yanındaki mavi renkli Adrese git düğmesine dikkat edin. Adresi tıklayarak adrese gidebilirsiniz. Adresler geçerli değilse düğmeler devre dışıdır ve tıklanamaz.
5. Kodda ilerlemek için Komut dosyası yürütmeyi devam ettir'i tıklayın.
6. ASCII temsilinin artık güncellendiğine dikkat edin. Tüm değer yorumları da güncellenir.
7. Değer inceleyici'yi yalnızca kayan noktayı gösterecek şekilde özelleştirelim. Ayarlar düğmesini tıklayın ve yalnızca Kayan 32 bit ve Kayan 64 bit'i işaretleyin.
8. dec olan kodlamayı sci olarak değiştirelim. Değer temsillerinin buna göre güncellendiğine dikkat edin.
9. Klavyenizle veya gezinme çubuğunu kullanarak bellek arabelleğinde gezinmeyi deneyin. Değerlerin değişip değişmediğini görmek için 4. adımı tekrarlayın.

WebAssembly bellek incelemesi

WebAssembly.Memory nesnesi, nesne belleğinin ham baytlarını barındıran bir ArrayBuffer. Bellek Denetleyici paneli, C++'ta yazılan Wasm uygulamalarında bu tür nesneleri incelemenize olanak tanır.

WebAssembly.Memory denetiminden tam olarak yararlanmak için:

• Chrome 107 veya sonraki bir sürümü kullanın. Sürümünüzü chrome://version/ adresinden kontrol edebilirsiniz.
• C/C++ Geliştirici Araçları Desteği (DWARF) uzantısını yükleyin. Bu, DWARF hata ayıklama bilgilerini kullanarak C/C++ WebAssembly uygulamalarında hata ayıklamaya yönelik bir eklentidir.

Bir nesnenin WebAssembly.Memory bölümünü incelemek için:

1. Bu demo sayfasında Geliştirici Araçları'nı açın.
2. Kaynaklar panelinde demo-cpp.cc öğesini açın ve 15. satırdaki main() işlevinde bir kesme noktası ayarlayın: x[i] = n - i - 1;.
3. Uygulamayı çalıştırmak için sayfayı yeniden yükleyin. Hata ayıklayıcı, kesme noktasında duraklar.
4. Hata Ayıklayıcı bölmesinde Kapsam'ı genişletin > Local (Yerel).

5. x: int[10] dizisinin yanındaki simgesini tıklayın.

   Alternatif olarak, diziyi sağ tıklayıp Bellek Denetleyicisi panelinde göster'i seçebilirsiniz.

Nesne belleğini vurgulamayı durdurmak için Bellek Denetleyicisi panelinde fareyle nesne rozetinin üzerine gelin ve x düğmesini tıklayın.

Daha fazla bilgi edinmek için aşağıdaki makaleleri inceleyin:

• C/C++ hata ayıklaması için Bellek Denetleyicisi'ni genişletme
• Modern araçlarla WebAssembly hatalarını ayıklama.