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

Jecelyn Yeen

Sofia Emelianova

JavaScript'teki ArrayBuffer, TypedArray ve DataView belleğini ve C++ ile yazılmış Wasm uygulamalarının WebAssembly.Memory belleğini incelemek için Bellek denetleyicisini kullanın.

Genel Bakış

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

Bellek Denetleyici'yi açma

Bellek denetleyicisini açmanın birkaç yolu vardır.

Menüden açma

1. DevTools'u açın.
2. Diğer Seçenekler > Diğer araçlar > Bellek denetleyici'yi tıklayın.

Hata ayıklama sırasında açma

1. JavaScript içeren bir sayfa açın ArrayBuffer. Bu demo sayfasını kullanacağız.
2. DevTools'u açın.
3. Kaynaklar panelinde demo-js.js dosyasını açın, 18. satırda bir kesme noktası ayarlayın.
4. Sayfayı yenileyin.
5. Sağdaki Hata Ayıklama Aracı bölmesinde Kapsam bölümünü genişletin.

6. Bellek denetleyicisini açabilirsiniz:

   • Simgeden. buffer mülkünün yanındaki simgeyi tıklayarak veya
   • Bağlam menüsünden. buffer mülkünü sağ tıklayın ve Bellek Denetleyici panelinde göster'i seçin.

   

Birden fazla nesneyi inceleme

1. DataView veya TypedArray'ı da inceleyebilirsiniz. Örneğin, b2 bir TypedArray'dur. Bunu incelemek için b2 mülkünü sağ tıklayın ve Hafıza Denetleyici panelinde göster'i seçin (TypedArray veya DataView için henüz simge yok).
2. Bellek denetleyicisi'nde yeni bir sekme açılır. Aynı anda birden fazla nesneyi inceleyebilirsiniz.

Bellek denetleyicisi

Bellek denetleyicisi 3 ana bölümden 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 türünü deneyin.
2. Bellek arabellekleri bir sayfadan uzun olabilir. Sayfaları kaydırmak yerine sol ve sağ düğmelerini kullanarak gezinebilirsiniz.
3. Soldaki düğmeler ileri/geri gezinmenize olanak tanır.
4. Varsayılan olarak, tampon adım atıldığında otomatik olarak güncellenir. Aksi takdirde yenile düğmesi, belleği yenileme ve içeriğini güncelleme seçeneği sunar.

Bellek arabelleği

1. Sol tarafta adres onaltılık biçimde gösterilir.
2. Bellek de her bayt boşlukla ayrılmış şekilde on altılık biçimde gösterilir. Şu anda seçili olan bayt vurgulanır. Baytı tıklayabilir veya klavyeyle (sol, sağ, yukarı, aşağı) gezinebilirsiniz.
3. Sağ tarafta, belleğin ASCII gösterimi gösterilir. Vurgu, bayttaki 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 denetleyicisi

1. Üst 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. Tam sayılar için on, onaltılık, sekizlik ve kayan noktalı sayılar için bilimsel ve on tabanlı arasında geçiş yapabilirsiniz.

Belleği inceleme

Anılarınızı birlikte inceleyelim.

1. Hata ayıklama işlemini başlatmak için aşağıdaki adımları uygulayın.
2. Adres girişinde adresi 0x00000027 olarak değiştirin.
3. ASCII gösterimini ve değer yorumlarını inceleyin. Şu anda tüm değerler boştur.
4. Pointer 32-bit ve Pointer 64-bit'in yanındaki mavi Adrese atla düğmesine dikkat edin. Adrese atlamak için bu düğmeyi tıklayabilirsiniz. Adresler geçerli değilse düğmeler devre dışı bırakılır ve tıklanamaz.
5. Kodda adım adım ilerlemek için Komut dosyası yürütmeyi devam ettir'i tıklayın.
6. ASCII gösteriminin güncellendiğini görebilirsiniz. Tüm değer yorumları da güncellenir.
7. Değer İnceleyici'yi yalnızca kayan nokta değerini gösterecek şekilde özelleştirelim. Ayarlar düğmesini tıklayın ve yalnızca Kayan noktalı 32 bit ve Kayan noktalı 64 bit seçeneklerini işaretleyin.
8. Kodlamayı dec yerine sci olarak değiştirelim. Değer gösterimlerinin buna göre güncellendiğine dikkat edin.
9. Bellek arabelleğine klavyenizi veya gezinme çubuğunu kullanarak gitmeyi deneyin. Değer değişikliklerini gözlemlemek için 4. adımı tekrarlayın.

WebAssembly bellek denetimi

WebAssembly.Memory nesnesi, nesne belleğinin ham baytlarını tutan bir ArrayBuffer öğesidir. Bellek Denetleyicisi paneli, C++ ile yazılmış Wasm uygulamalarındaki bu tür nesneleri incelemenize olanak tanır.

WebAssembly.Memory denetiminden tam olarak yararlanmak için:

• Chrome 107 veya sonraki sürümleri kullanın. Sürümünüzü chrome://version/ adresinden kontrol edin.
• C/C++ DevTools Desteği (DWARF) uzantısını yükleyin. Bu, DWARF hata ayıklama bilgilerini kullanarak C/C++ WebAssembly uygulamalarında hata ayıklama için kullanılan bir eklentidir.

Bir nesnenin WebAssembly.Memory değerini incelemek için:

1. Bu demo sayfasında Geliştirici Araçları'nı açın.
2. Kaynaklar panelinde demo-cpp.cc dosyasını 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 > Yerel'i genişletin.

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

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

Nesne belleğinin vurgulanmasını durdurmak için Bellek Denetleyicisi panelinde fareyle nesne rozetinin üzerine gelip x düğmesini tıklayın.

Daha fazla bilgi için:

• C/C++ hata ayıklama için Bellek Denetleyici'yi genişletme
• Modern araçlarla WebAssembly'de hata ayıklama.