Yapay zeka temsilcileriyle bellek sızıntılarını analiz etme

Matthias Rohmer

José Luis Zapata

Ajanlar için Chrome Geliştirici Araçları, kodlama temsilcinizin uygulamanızdaki istemci tarafı bellek sızıntılarını (JavaScript ve WebAssembly dahil) analiz edip düzeltmesine olanak tanır. Yığın anlık görüntülerinin toplanması ve analiz edilmesi işlemini otomatikleştirerek aracınız, düzgün şekilde çöp toplama işlemi yapılmayan nesneleri belirleyebilir ve hedeflenen kod yeniden düzenlemesi önerebilir.

Temsilci tabanlı iş akışında, kodlama temsilciniz farklı uygulama durumlarında birden fazla anlık görüntü alır ve özel analiz araçlarını kullanır.

Bellek hata ayıklama araçlarını etkinleştirme

Varsayılan olarak, aracıların Chrome Geliştirici Araçları yalnızca take_heapsnapshot aracını kullanıma sunar. Yığın anlık görüntülerini analiz eden araçlar (ör. compare_heapsnapshots, get_heapsnapshot_summary ve get_heapsnapshot_retaining_paths) yalnızca sunucuyu --memoryDebugging işaretiyle başlattığınızda kullanılabilir. Bu işaret olmadan temsilciniz anlık görüntüler yakalayabilir ancak bunları analiz edemez.

Bellek hata ayıklama araçlarını etkinleştirmek için sunucu bağımsız değişkenlerinize --memoryDebugging ekleyin:

"args": ["chrome-devtools-mcp@latest", "--memoryDebugging"]

Daha fazla seçenek için Yapılandırma başlıklı makaleyi inceleyin.

Yaygın bellek sızıntısı kalıpları

Bellek analizi, aşağıdakiler de dahil olmak üzere yaygın sızıntı kalıplarını bulmaya odaklanır:

• Temizlenmemiş etkinlik işleyiciler: Global nesnelere (ör. window veya document) eklenen ve çöp toplamayı engelleyen etkinlik işleyiciler.
• Bağlantısı kesilmiş DOM düğümleri: Doküman ağacından kaldırılan ancak hâlâ bir JavaScript değişkeni tarafından referans verilen düğümler.
• İstenmeyen global değişkenler: Uygun kapsam olmadan tanımlanan ve bellekte sonsuza kadar kalan değişkenler.
• Kapanışlar: Kendi kapsamlarında büyük nesnelere yapılan referansları istemeden tutan kapanışlar.
• Sınırsız veri yapıları: Önbelleğe alma için kullanılan ve sınırlama olmaksızın büyüyen veri yapıları.

Bellek analiziyle ilgili dikkat edilmesi gereken noktalar

Bellek analizini kullanırken aşağıdakileri göz önünde bulundurun:

• Ham anlık görüntüleri doğrudan okumayın: Temsilcinizin ham .heapsnapshot dosyalarını doğrudan okumasına izin vermeyin. Çok büyük oldukları için bağlam sınırlarını aşarlar. Bellek sızıntısı hata ayıklama becerisi, temsilcilere bu dosyaları okumaktan kaçınmalarını açıkça söyler.

• Üç anlık görüntü yöntemi: Sızıntıları güvenilir bir şekilde bulmak için aracınızın genellikle üç anlık görüntü yakalaması gerekir: işlemden önce bir temel, işlemden sonra bir hedef ve işlem geri alındıktan sonra son bir anlık görüntü. Zamanlayıcılar (setTimeout) veya animasyonlar (requestAnimationFrame) tarafından tetiklenenler gibi bazı işlemlerin kullanıcı etkileşimi olmadan gerçekleştiğini ve geri alma adımı gerektirmeyebileceğini unutmayın.

  Zamanlayıcılar (setTimeout) veya animasyonlar (requestAnimationFrame) tarafından tetiklenenler gibi bazı işlemlerin kullanıcı etkileşimi olmadan gerçekleştiğini ve bellek kullanımını artırabileceğini unutmayın.

• Düzeltmeden önce doğrulayın: Temsilcinin önerdiği işlemlerin uygulamanızın mantığına uygun ve doğru olduğundan emin olmak için her zaman temsilcinin bulgularını inceleyin. Örneğin, ajana referansları geçersiz kılmasını söylemeden önce ayrılmış bir düğümün kasıtlı bir önbelleğin parçası olup olmadığını doğrulayın.

Bellek sızıntısı analizi için kullanım alanları

Temsilcinize, anlık görüntüleri manuel olarak alıp elle karşılaştırmak yerine, zamanlayıcılar ve kullanıcı etkileşimleri de dahil olmak üzere tekrarlanan işlemler sırasında belleği profillemesini söyleyin. Bu iş akışlarıyla bellek analizini hata ayıklama sürecinize entegre edin.

Not: Aracı yürütme adımları, olası davranış örnekleridir. Ajanınız farklı şekilde hareket edebilir.

Gezinme sırasında temizlenmemiş etkinlik işleyicileri algılama

Tek sayfalık uygulamalar (SPA'lar), geliştiriciler bir bileşen kaldırıldıktan sonra global etkinlik dinleyicileri kaldırmayı unuttuğunda genellikle bellek sızıntısına neden olur. Temsilcinizi, görünümler arasında gezinirken belleğin doğru şekilde boşaltıldığını doğrulamakla görevlendirebilirsiniz.

Örnek istem:

Navigate from the home page to the dashboard and back to the home page. Use the take_heapsnapshot tool to check if we have any uncleared event listeners causing memory leaks.

Örnek aracı yürütme: Aracınız ana sayfada temel bir yığın anlık görüntüsü alır, kontrol paneline gider ve son bir anlık görüntü almak için ana sayfaya geri döner. Ardından, anlık görüntüleri değerlendirmek için dahili analiz araçlarını kullanır, window nesnesine eklenen bir scroll dinleyicisinin hiçbir zaman temizlenmediğini algılar ve bileşeninizin temizleme işlevinde removeEventListener işlevini çağırmak için gereken kodu sağlar.

Kullanıcı arayüzü bileşenlerindeki ayrılmış DOM düğümlerini tanımlama

Modallar, açılır listeler ve karmaşık kullanıcı arayüzü bileşenleri, DOM'dan kaldırıldıktan sonra bunlara yapılan referanslar JavaScript değişkenlerinde tutulursa genellikle ayrılmış DOM düğümleri bırakır.

Örnek istem:

Open the user settings modal and close it 5 times. Analyze the heap snapshots and tell me if there are any detached DOM nodes left behind. If there are, ask me if they are intentional before writing a fix.

Örnek temsilci yürütme: Temsilciniz, gerekli referans, hedef ve son anlık görüntüleri toplarken ayarlar modülüyle etkileşime girer. Analiz, Detached HTMLDivElement olarak etiketlenmiş, büyüyen birkaç nesne olduğunu gösteriyor. Temsilci, bulguyu size bildirir ve DOM referanslarını tutan değişkenleri null olarak ayarlamak için kodu değiştirmeden önce onayınızı ister.

Sürekli etkileşimlerde sınırsız önbellekleri bulma

Sonsuz kaydırma veya sürekli veri getirme gibi özellikler, temel diziler ya da haritalar sınırsız bir şekilde büyürse belleğin sızmasına neden olabilir.

Örnek istem:

Scroll down the infinite feed list to load more items three times. Check if our LRU cache is unbounded and leaking memory, and suggest a fix.

Örnek temsilci yürütme: Temsilciniz, kaydırma işleminden önce ve sonra bellek durumunu analiz eder. Sınırsız şekilde büyüyen büyük bir diziyi istemeden yakalayan bir kapanışı tanımlar. Temsilci, önbelleğe alma sınırları uygulamanızı veya nesne yaşam döngüleriyle ilişkili veriler için WeakMap kullanarak uygun atık toplama işlemini gerçekleştirmenizi önerir.

Arka plan işlemlerindeki bellek sızıntılarında hata ayıklama

Animasyon ve arka plan zamanlayıcıları, kullanıcı etkileşimi olmadan belleği sızdırabilir. Temsilcinize, bu işlemlerle ilgili bellek sızıntılarını bulmak için zaman içinde bellek artışını izlemesini söyleyebilirsiniz.

Örnek istem:

Explore this canvas application and monitor memory usage. Help me determine areas of improvement around reusing objects and textures.

Örnek temsilci yürütme: Temsilciniz, canvas uygulamasını keşfeder ve zaman içindeki bellek kullanımını izlemek için otomatik olarak düzenli anlık görüntüler alır. Yığın analiz edilir ve oluşturma döngüsünün, önceki WebGL ağlarını atık toplamadan her karede yeni WebGL ağlarını bir diziye aktardığı tespit edilir. Bu durumda nesnelerin yeniden kullanımı için optimizasyonlar önerilir.