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

Ceren Yeen
Jecelyn Yeen
Twitter GitHub Ana sayfa
Sofya Emelianova
Sofya Emelianova
GitHub

JavaScript'teki ArrayBuffer, TypedArray ve DataView belleğini ve C++'ta yazılmış Wasm uygulamalarının WebAssembly.Memory kadarını incelemek için yeni Bellek İnceleyici'yi kullanın.

Bellek Denetleyicisi'ni açın

Bellek inceleyici'yi birkaç farklı şekilde açabilirsiniz.

Menüden aç

  1. Geliştirici Araçları'nı açın.
  2. Diğer Seçenekler Daha fazla > Diğer araçlar > Bellek inceleyici'yi tıklayın. Bellek inceleyici menüsü

Hata ayıklama sırasında aç

  1. JavaScript ArrayBuffer ile 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ı ayarlayın.
  4. Sayfayı yenileyin.
  5. Sağdaki Hata Ayıklayıcı bölmesindeki Kapsam bölümünü genişletin.

  6. Bellek inceleyici'yi açabilirsiniz:

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

    Bellek Denetleyicisi panelinde göster

Birden çok nesneyi inceleme

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

Bellek denetleyicisi

Bellek denetleyicisi

Bellek inceleyici 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. Sayfada gezinmek yerine sol ve sağ düğmesini kullanarak gezinebilirsiniz.
  3. Soldaki düğmeler ileri/geri gezinmeye olanak sağlar.
  4. Varsayılan olarak, arabellek 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

Bellek arabelleği

  1. Adres, sol taraftan onaltılık biçimde gösterilir.
  2. Bellek, her bayt bir boşlukla ayrılmış onaltılık biçimde de gösterilir. Seçili olan bayt vurgulanır. Baytı tıklayabilir veya klavyeyle (sol, sağ, yukarı, aşağı) gezinebilirsiniz.
  3. Hafızanın bir ASCII temsili sağ tarafta gösterilmiştir. Vurgulama, bayttaki seçili bitlere karşılık gelen değeri gösterir. Hafızada olduğu gibi, baytı tıklayabilir veya klavyeyle (sol, sağ, yukarı, aşağı) gezinebilirsiniz.

Değer inceleyici

Değer inceleyici

  1. Üstteki araç çubuğunda büyük ve küçük endian arasında geçiş yapıp 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. araç çubuğu düğmesi
  2. Ana alanda tüm değer yorumları ayarlara uygun şekilde gösterilir. Varsayılan olarak tümü gösterilir.
  3. Kodlama tıklanabilir. Tamsayı için dec, onaltılık, okt, kayan öğeler için dec arasında geçiş yapabilirsiniz. Kodlama anahtarı

Belleği 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. adres girişi
  3. ASCII gösterimine ve değer yorumlarına dikkat edin. Şu anda tüm değerler boş.
  4. Pointer 32-bit ve Pointer 64-bit öğelerinin yanındaki mavi renkli Adrese atla düğmesine dikkat edin. Adrese gitmek için bunu tıklayabilirsiniz. Adresler geçerli değilse düğmeler devre dışı görünür ve tıklanamaz. Adrese atla düğmesi
  5. Kodda gezinmek için Komut dosyası yürütmeye devam et'i tıklayın. Komut dosyası yürütmeyi devam ettir
  6. ASCII gösteriminin artık güncellendiğine dikkat edin. Tüm değer yorumları da güncellenir. Tüm değer yorumları güncellenir
  7. Değer inceleyiciyi yalnızca kayan noktayı gösterecek şekilde özelleştirelim. Ayarlar düğmesini tıklayın ve yalnızca Float 32-bit ve Float 64-bit seçeneklerini işaretleyin. değer inceleyiciyi özelleştirmek için ayarlar
  8. dec olan kodlamayı sci olarak değiştirelim. Değer temsillerinin uygun şekilde güncellendiğini göreceksiniz. Kodlamayı değiştirin.
  9. Bellek arabelleğinde klavyenizle veya gezinme çubuğunu kullanarak gezinmeyi deneyin. Değerlerdeki değişiklikleri gözlemlemek için 4. adımı tekrarlayın.

WebAssembly bellek denetimi

WebAssembly.Memory nesnesi, nesne belleğinin ham baytlarını barındıran bir ArrayBuffer'dir. Bellek Denetleyicisi paneli, C++ dilinde yazılmış Wasm uygulamalarındaki bu tür nesneleri incelemenize olanak tanır.

WebAssembly.Memory incelemesinden tam olarak yararlanmak için:

  • Chrome 107 veya sonraki bir sürümü kullanın. chrome://version/ adresinden sürümünüzü kontrol edin.
  • 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 öğesini incelemek için:

  1. Bu demo sayfasında Geliştirici Araçları'nı açın.
  2. Kaynaklar panelinde demo-cpp.cc uygulamasını açın ve main() işlevinde, 15. satırdaki x[i] = n - i - 1; bir ayrılma noktası ayarlayın.
  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 Bellek Denetleyicisi'nde göster. simgesini tıklayın.

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

Bellek Denetleyicisi'nde açılan x dizisi.

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

Nesne belleğini vurgulamayı durdur.

Daha fazla bilgi edinmek için aşağıdaki makalelere bakın: