Bu makalede, Chrome 91'de kullanıma sunulan Bellek Denetleyicisi tanıtılmaktadır. ArrayBuffer, TypedArray, DataView ve Wasm Memory'i incelemenize olanak tanır.
Giriş
Hiç ArrayBufferlayıcınızdaki verilerden anlam çıkarmak istediniz mi? DevTools, Bellek Denetleyicisi'nden önce yalnızca ArrayBuffers hakkında sınırlı analize izin veriyordu. Hata ayıklama oturumu sırasında Kapsam görünümünde yapılan inceleme, dizi arabelleğindeki tek değerlerin bir listesinin görüntülenmesiyle sınırlıydı ve bu da verilerin bir bütün olarak anlaşılmasını zorlaştırıyordu. Örnek olarak, Kapsam görünümü aşağıdaki örnekte arabelleği genişletilebilir dizi aralıkları olarak gösterir:
Tampon içindeki belirli bir aralığa gitmek sorun teşkil ediyordu ve kullanıcının en sonunda bu dizine ulaşmak için sayfayı aşağı kaydırması gerekiyordu. Ancak bir konuma gitmek kolay olacaksa bile değerleri bu şekilde inspecting zahmetlidir: Bu sayıların ne anlama geldiğini anlamak zordur. Özellikle, tek bayt olarak değil, 32 bitlik tamsayılar olarak yorumlanmaları gerekiyorsa ne olur?
Bellek Denetleyicisi'ni kullanarak değerleri inceleme
Chrome 91 ile birlikte dizi arabelleklerini inceleme aracı olan Bellek Denetleyicisi'ni kullanıma sunuyoruz. Daha önce, ikili verileri görüntülemek için kullanılan bellek inceleme araçlarını daha önce görmüş olabilirsiniz. İkili program içeriği, adresleriyle birlikte bir tabloda gösterilir ve temel değerleri yorumlamak için farklı yollar sunar. Bellek Denetleyicisi bunu size sunuyor. Bellek Denetleyicisi ile artık içeriği görüntüleyebilir, içerikte gezinebilir ve elinizdeki değerleri yorumlamak için kullanılacak türleri seçebilirsiniz. ASCII değerlerini doğrudan baytların yanında gösterir ve kullanıcının farklı bir bitiş değeri seçmesine olanak tanır. Bellek Denetleyicisi'nin nasıl çalıştığını aşağıda görebilirsiniz:
Denemek ister misiniz? Bellek Denetleyicisi'ni nasıl açacağınızı ve dizi arabelleğinizi (veya TypedArray, DataView ya da Wasm Memory) nasıl görüntüleyeceğinizi öğrenmek ve bunu nasıl kullanacağınızla ilgili daha fazla bilgi edinmek için Bellek Denetleyicisi'ndeki belgelerimize gidin. Bu oyuncak örneklerini (JS, Wasm ve C++ için) deneyin.
Bellek Denetleyicisi'ni Tasarlama
Bu bölümde, Bellek Denetleyicisi'nin Web Bileşenleri kullanılarak nasıl tasarlandığına bakacak, elimizdeki tasarım hedeflerinden birini ve bunu nasıl uyguladığımızı göstereceğiz. Merak ediyorsanız ve daha fazlasını görmek istiyorsanız Bellek Denetleyicisi için tasarım belgemize göz atın.
Web Bileşenlerine Geçiş konulu blog yayınımızı görmüş olabilirsiniz. Burada Jack, Web Bileşenleri kullanılarak kullanıcı arayüzü bileşenlerinin nasıl oluşturulacağına ilişkin dahili rehberimizi yayınlamıştır. Web Bileşenlerine geçiş, Bellek Denetleyicisi ile ilgili çalışmamızla aynı zamana denk geliyordu ve sonuç olarak yeni sistemi denemeye karar verdik. Aşağıda, Bellek Denetleyicisi'ni oluşturmak için oluşturduğumuz bileşenleri gösteren bir şema (buna dahili olarak Doğrusal Bellek Denetleyicisi adını verdiğimizi unutmayın):
LinearMemoryInspector bileşeni, Bellek Denetleyicisi'nde tüm öğeleri oluşturan alt bileşenleri birleştiren üst bileşendir. Temel olarak bir Uint8Array ve bir address gerektirir ve her ikisinde de her değişiklikte verileri alt öğelerine yayar ve bu da yeniden oluşturma işlemini tetikler. LinearMemoryInspector öğesinin kendisi üç alt bileşen oluşturur:
LinearMemoryViewer(değerleri gösterir),LinearMemoryNavigator(gezinmeye izin verilir) veLinearMemoryValueInterpreter(temel verilerin farklı tür yorumlarını gösterir).
İkinci bileşenin kendisi bir üst bileşendir ve ValueInterpreterDisplay (değerleri gösterir) ve ValueInterpreterSettings (ekranda hangi türlerin gösterileceğini seçerek) oluşturur.
Bileşenlerin her biri, kullanıcı arayüzünün yalnızca küçük bir bileşenini temsil edecek şekilde tasarlanmıştır; böylece, bileşenler gerektiğinde yeniden kullanılabilir. Bir bileşende yeni veri ayarlandığında, bileşen üzerinde ayarlanan verilere yansıtılan değişikliği gösteren bir yeniden oluşturma tetiklenir. Bileşenlerimizi içeren bir iş akışı örneği aşağıda gösterilmiştir. Kullanıcı adres çubuğunda adresi değiştirdiği için yeni veriler (bu örnekte görüntülenecek adres) ayarlayarak güncelleme işlemini tetikler:
LinearMemoryInspector, kendisini LinearMemoryNavigator üzerinde bir işleyici olarak ekler. addressChanged işlevi, bir address-changed etkinliğinde tetiklenir. Kullanıcı, adres girişini düzenlemeye başlar başlamaz, yukarıda sözü edilen etkinlik gönderilir. Örneğin, addressChanged işlevi çağrılır. Bu işlev artık adresi dahili olarak kaydeder ve data(address, ..) setter aracını kullanarak alt bileşenlerini günceller. Alt bileşenler, adresi dahili olarak kaydeder ve söz konusu adresteki içeriği göstererek görüşlerini yeniden oluşturur.
Tasarım hedefi: Performans ve bellek tüketimini arabellek boyutundan bağımsız hale getirme
Bellek Denetleyicisi tasarımı sırasında, Bellek Denetleyicisi'nin performansının arabellek boyutundan bağımsız olması gerektiğini düşündüğümüz bir nokta da buydu.
Önceki bölümde gördüğünüz gibi, LinearMemoryInspector bileşeni, değerleri oluşturmak için UInt8Array gerekir. Aynı zamanda, Bellek Denetleyicisi verinin yalnızca bir kısmını gösterdiğinden (örneğin, Wasm Memory 4 GB kadar büyük olabileceğinden ve biz Bellek Denetleyicisi'nde 4 GB depolama alanı istemediğimizden) Bellek Denetleyicisi'nin tüm verileri saklamasına gerek kalmamasını sağlamak istedik.
Dolayısıyla, Bellek Denetleyicisi'nin hızının ve bellek tüketiminin, gösterdiğimiz gerçek arabellekten bağımsız olduğundan emin olmak için LinearMemoryInspector bileşeninin, orijinal arabelleğin yalnızca bir alt aralığını tutmasına izin veririz.
Bunun işe yaraması için öncelikle LinearMemoryInspector öğesinin iki bağımsız değişken daha alması gerekir: memoryOffset ve outerMemoryLength. memoryOffset, geçilen Uint8Array öğesinin başladığı ofseti gösterir ve doğru veri adreslerinin oluşturulması için gereklidir. outerMemoryLength, orijinal arabelleğin uzunluğudur ve hangi aralığın gösterilebileceğini anlamak için gereklidir:
Bu bilgiler sayesinde, tüm verileri yerinde olmadan önceki görünümün (address çevresindeki içerik) aynı görünümü oluşturmaya devam edebileceğimizden emin olabiliriz. Peki, farklı bir aralıkta yer alan farklı bir adres istenirse ne yapmalıyım? Bu durumda, LinearMemoryInspector bir RequestMemoryEvent işlemini tetikler ve bu işlem, korunan mevcut aralığı günceller. Aşağıda bir örnek verilmiştir:
Bu örnekte, kullanıcı bellek sayfasında gezinir (Bellek Denetleyicisi, veri parçalarını göstermek için sayfalama kullanır). Bu da PageNavigationEvent işlemini tetikler ve bu da RequestMemoryEvent işlemini tetikler.
Bu etkinlik yeni aralığın getirilmesine başlar ve daha sonra, verilerin ayarlanmasıyla LinearMemoryInspector bileşenine yayılır. Bunun sonucunda, yeni getirilen verileri gösteririz.
Peki, biliyor muydunuz? Belleği Wasm ve C/C++ kodunda bile inceleyebilirsiniz
Bellek Denetleyicisi, JavaScript'te yalnızca ArrayBuffers için kullanılamaz. Aynı zamanda Wasm Belleği ve C/C++ referansları/işaretçileri tarafından işaret edilen belleği denetlemek için de kullanılabilir (DWARF uzantımızı kullanarak). Henüz denemediyseniz hemen deneyin! Modern araçlarla WebAssembly hatalarını ayıklama bölümüne bakın. Web'deki C++'da yerel hata ayıklamaya ilişkin uygulamalı Bellek Denetleyicisi'nin küçük bir görünümü:
Sonuç
Bu makalede Bellek Denetleyicisi, aracın tasarımına genel bir bakış sunmuştur. Bellek Denetleyicisi'nin, ArrayBuffer :- uygulamanızda neler olup bittiğini anlamanıza yardımcı olacağını umuyoruz. İyileştirme önerileriniz varsa bize bildirin ve hata bildiriminde bulunun!
Önizleme kanallarını indirme
Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!
Chrome Geliştirici Araçları ekibiyle iletişim kurma
Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.
- crbug.com adresinden öneri veya geri bildirim gönderin.
- Geliştirici Araçları'nda, Diğer seçenekler
> Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin. - @ChromeDevTools adresine tweet gönderin.
- Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.