Uygulamanızın Profilini Çıkarma

Profiler sekmesi, Angular'ın değişiklik algılama (change detection) işleminin yürütülmesini görselleştirmenizi sağlar. Bu, değişiklik algılamanın uygulamanızın performansını ne zaman ve nasıl etkilediğini belirlemek için kullanışlıdır.

Profiler sekmesi, mevcut uygulamayı profillemeye başlamanızı veya önceki bir çalıştırmadan mevcut bir profili içe aktarmanızı sağlar. Uygulamanızı profillemeye başlamak için Profiler sekmesindeki sol üst köşedeki dairenin üzerine gelin ve Start recording'a tıklayın.

Profilleme sırasında Angular DevTools, değişiklik algılama ve yaşam döngüsü kancası (lifecycle hook) yürütmesi gibi yürütme olaylarını yakalar. Değişiklik algılamayı tetiklemek ve Angular DevTools'un kullanabileceği veriler üretmek için uygulamanızla etkileşime geçin. Kaydı bitirmek için daireye tekrar tıklayarak Stop recording yapın.

Mevcut bir kaydı da içe aktarabilirsiniz. Bu özellik hakkında daha fazla bilgi için Import recording bölümünü okuyun.

Uygulamanızın Çalışmasını Anlama

Bir profil kaydettikten veya içe aktardıktan sonra Angular DevTools, değişiklik algılama döngülerinin bir görselleştirmesini gösterir.

Sıradaki her çubuk, uygulamanızdaki bir değişiklik algılama döngüsünü temsil eder. Bir çubuk ne kadar uzunsa, uygulama bu döngüde değişiklik algılama çalıştırmak için o kadar fazla zaman harcamıştır. Bir çubuğu seçtiğinizde DevTools, aşağıdakiler dahil olmak üzere hakkında yararlı bilgiler görüntüler:

• Bu döngü sırasında yakalanan tüm bileşen ve direktifleri içeren bir çubuk grafik
• Angular'ın bu döngüde değişiklik algılama çalıştırmak için harcadığı süre
• Kullanıcının deneyimlediği tahmini kare hızı (60fps'nin altındaysa)

Bileşen Çalışmasını Anlama

Bir değişiklik algılama döngüsüne tıkladıktan sonra gösterilen çubuk grafik, uygulamanızın söz konusu bileşen veya direktifte değişiklik algılama çalıştırmak için ne kadar zaman harcadığına dair ayrıntılı bir görünüm sunar.

Bu örnek, NgForOf direktifinin harcadığı toplam süreyi ve üzerinde hangi yöntemin çağrıldığını gösterir.

Hiyerarşik Görünümler

Değişiklik algılama yürütmesini alev grafiği (flame graph) benzeri bir görünümde de görselleştirebilirsiniz.

Grafikteki her karo, render ağacında belirli bir konumdaki ekrandaki bir öğeyi temsil eder. Örneğin, bir LoggedOutUserComponent bileşeninin kaldırıldığı ve yerine Angular'ın bir LoggedInUserComponent render ettiği bir değişiklik algılama döngüsünü düşünün. Bu senaryoda her iki bileşen de aynı karoda görüntülenecektir.

X ekseni, bu değişiklik algılama döngüsünü render etmek için geçen toplam süreyi temsil eder. Y ekseni, öğe hiyerarşisini temsil eder. Bir öğe için değişiklik algılama çalıştırmak, onun direktiflerinin ve alt bileşenlerinin render edilmesini gerektirir. Bu grafik birlikte, hangi bileşenlerin render edilmesinin en uzun sürdüğünü ve bu sürenin nereye harcandığını görselleştirir.

Her karo, Angular'ın orada ne kadar zaman harcadığına bağlı olarak renklendirilir. Angular DevTools, rengin yoğunluğunu, render işleminin en uzun sürdüğü karoya göre harcanan süreye göre belirler.

Belirli bir karoya tıkladığınızda, sağdaki panelde hakkında ayrıntılar göreceksiniz. Karoya çift tıklamak, iç içe geçmiş alt öğelerini daha kolay görüntüleyebilmeniz için yakınlaştırır.

Değişiklik Algılama ve OnPush Bileşenlerinde Hata Ayıklama

Normalde grafik, herhangi bir değişiklik algılama karesi için bir uygulamayı render etmek için geçen süreyi görselleştirir. Ancak OnPush bileşenleri gibi bazı bileşenler yalnızca input özellikleri değiştiğinde yeniden render edilir. Belirli kareler için bu bileşenler olmadan alev grafiğini görselleştirmek yararlı olabilir.

Bir değişiklik algılama karesinde yalnızca değişiklik algılama sürecinden geçen bileşenleri görselleştirmek için alev grafiğinin üzerindeki Change detection onay kutusunu seçin.

Bu görünüm, değişiklik algılamadan geçen tüm bileşenleri vurgular ve yeniden render edilmeyen OnPush bileşenleri gibi geçmeyenleri gri renkte gösterir.

Kayıtları İçe ve Dışa Aktarma

Dışa aktarmak için kaydedilmiş bir profilleme oturumunun sağ üst köşesindeki Save Profile düğmesine tıklayarak JSON dosyası olarak kaydedin. Daha sonra, profiler'ın başlangıç görünümünde Choose file girişine tıklayarak dosyayı içe aktarın.