Performans özellikleri referansı

Bu sayfada, performans analiziyle ilgili Chrome Geliştirici Araçları özelliklerinin kapsamlı bir referansı yer almaktadır.

Chrome Geliştirici Araçları'nı kullanarak bir sayfanın performansını analiz etme hakkında rehberli eğitim için Çalışma zamanı performansını analiz etme başlıklı makaleyi inceleyin.

Anlık metrikler ekranı

Performans panelini ilk açtığınızda, üç Core Web Vitals'ı kullanarak mevcut sayfanın anlık performans özetini sunan Anlık Metrikler ekranını görürsünüz.

Tek sayfalık uygulamalarda istemci tarafında gerçekleşen ve SOFT NAV rozetiyle belirtilen yumuşak gezinmeler de dahil olmak üzere sayfayla etkileşimde bulundukça ve yeni sayfalara gittikçe metrikler güncellenir. Bu, performans sorunlarını (özellikle yalnızca belirli koşullarda görünen INP ve CLS için) belirlemenin iyi bir yoludur. Bir performans sorunu sürekli olarak tekrarlanıyorsa temel sorunda hata ayıklamak için daha fazla ayrıntı almak üzere iz kaydı yapabilirsiniz.

Canlı metrik ekranı özellikleri

Anlık metrikler ekranında, metriklerin yanı sıra aşağıdaki özellikler de bulunur:

• Alan metrikleri panelinde etkinleştirildiğinde CrUX'ten alınan alan metrikleri.
• Yerel metrikler ile alan metrikleri arasındaki önemli farkların özeti.
• LCP öğesi. Fareyle üzerine gelindiğinde sayfada vurgulanır.
• CLS kümesi ve INP türüyle ilgili ayrıntılar
• Metriklerin üzerine gelme hakkında daha fazla bilgi (ör. LCP ve INP alt bölümleri ve alan histogramları)
• Etkileşimlerin ve düzen kaymalarının geçmişini kaydeden bir Etkileşimler ve Düzen kaymaları paneli.
• CrUX verilerinin etkinleştirilebileceği bir Alan metrikleri paneli, bu verilerin dönemine ait ayrıntılar, kaynak ve URL verileri (varsa) ile masaüstü ve mobil veriler arasında geçiş yapma olanağı.
• CrUX verilerine göre hangi cihazın, CPU'nun ve ağ sınırlamanın kullanılacağıyla ilgili yönergelerin yer aldığı bir ortam ayarları paneli.

Daha fazla bilgi için Geliştirici Araçları'nda yerel ve gerçek kullanıcı Core Web Vitals performansınızı izleme blog yayınını inceleyin.

Performansı kaydetme

Ekranın sol üst veya sağ alt kısmındaki düğmeleri kullanarak çalışma zamanı veya yükleme performansını kaydedebilirsiniz:

Çalışma zamanı performansını kaydetme

Bir sayfanın yüklenirken değil, çalışırken performansını analiz etmek istediğinizde çalışma zamanı performansını kaydedin.

1. Analiz etmek istediğiniz sayfaya gidin.
2. Geliştirici Araçları'nda Performans sekmesini tıklayın.
3. Kaydet'i tıklayın.
4. Sayfayla etkileşimde bulunun. DevTools, etkileşimleriniz sonucunda gerçekleşen tüm sayfa etkinliklerini kaydeder.
5. Kaydet'i tekrar tıklayın veya kaydı durdurmak için Durdur'u tıklayın.

Yükleme performansını kaydetme

Bir sayfanın çalışma sırasındaki performansını değil, yüklenme sırasındaki performansını analiz etmek istediğinizde yükleme performansını kaydedin.

1. Analiz etmek istediğiniz sayfaya gidin.
2. Geliştirici Araçları'nın Performans panelini açın.
3. Kaydet ve yeniden yükle'yi tıklayın. Geliştirici Araçları, kalan ekran görüntülerini ve izleri temizlemek için önce about:blank sayfasına gider. Ardından Geliştirici Araçları, sayfa yeniden yüklenirken performans metriklerini kaydeder ve yükleme tamamlandıktan birkaç saniye sonra kaydı otomatik olarak durdurur.

Geliştirici Araçları, kaydın etkinliğin çoğunun gerçekleştiği bölümünü otomatik olarak yakınlaştırır.

Bu örnekte, Performans panelinde bir sayfa yüklenirken gerçekleşen etkinlik gösteriliyor.

Kayıt sırasında ekran görüntüsü alma

Kayıt sırasında her karenin ekran görüntüsünü almak için Ekran görüntüleri onay kutusunu işaretleyin.

Bellek bütçeleri dahilinde görsel kayıt doğruluğunu özelleştirmek için Yakalama ayarları'nı açın ve Ekran görüntüsü yakalama açılır menüsünden bir kare boyutu ve sayı sınırı ön ayarı seçin.

Ekran görüntüleriyle nasıl etkileşim kuracağınızı öğrenmek için Ekran görüntüsünü görüntüleme bölümüne bakın.

Kayıt sırasında atık toplamayı zorunlu kılma

Bir sayfayı kaydederken çöp toplamayı zorunlu kılmak için Çöp topla'yı paspas tıklayın.

Kayıt ayarlarını göster

Geliştirici Araçları'nın performans kayıtlarını nasıl yakaladığıyla ilgili daha fazla ayarı görmek için Yakalama ayarları'nı tıklayın.

JavaScript örneklerini devre dışı bırakma

Varsayılan olarak, bir kaydın Ana kanalı, kayıt sırasında çağrılan JavaScript işlevlerinin ayrıntılı çağrı yığınlarını gösterir. Bu çağrı yığınlarını devre dışı bırakmak için:

1. Çekim ayarları menüsünü açın. Kayıt ayarlarını göster bölümüne bakın.
2. JavaScript Örneklerini Devre Dışı Bırak onay kutusunu işaretleyin.
3. Sayfanın kaydını alın.

Aşağıdaki ekran görüntülerinde, JavaScript örneklerini devre dışı bırakma ve etkinleştirme arasındaki fark gösterilmektedir. Örnekleme devre dışı bırakıldığında, JavaScript çağrı yığınlarının tümü atlandığı için kaydın Ana parçası çok daha kısa olur.

Bu örnekte, JS örnekleri devre dışı bırakılmış bir kayıt gösterilmektedir.

Bu örnekte, JS örnekleri etkinleştirilmiş bir kayıt gösterilmektedir.

Kayıt sırasında ağı kısıtlama

Kayıt sırasında ağın bant genişliğini sınırlamak için:

1. Çekim ayarları menüsünü açın. Kayıt ayarlarını göster bölümüne bakın.
2. Ağ'ı seçilen daraltma düzeyine ayarlayın.

Açılır menüdeki Performans paneli, alan verilerine dayalı olarak kullanıcılarınızın deneyimine yakın bir deneyim sunan bir hazır ayar veya varsayılan bir sınırlama hazır ayarı da önerebilir.

Kayıt sırasında CPU'yu kısıtlama

Kayıt sırasında CPU'yu kısıtlamak için:

1. Yakalama ayarları menüsünü açın. Kayıt ayarlarını gösterme başlıklı makaleyi inceleyin.
2. CPU'yu seçilen kısıtlama düzeyine ayarlayın.

Sınırlama, bilgisayarınızın özelliklerine göre değişir. Örneğin, 2 kat yavaşlama seçeneği, CPU'nuzun normal hızından 2 kat daha yavaş çalışmasını sağlar. Mobil cihazların mimarisi masaüstü ve dizüstü bilgisayarlarınkinden çok farklı olduğundan Geliştirici Araçları, mobil cihazların CPU'larını tam olarak simüle edemez.

Açılır menüdeki Performans paneli, alan verilerine dayalı olarak kullanıcılarınızın deneyimine yakın bir deneyim sunan bir hazır ayar veya varsayılan bir sınırlama hazır ayarı da önerebilir.

CSS seçici istatistiklerini etkinleştirin

Uzun süren Stili Yeniden Hesapla etkinlikleri sırasında CSS kuralı seçicilerinizin istatistiklerini görüntülemek için:

1. Çekim ayarları menüsünü açın. Kayıt ayarlarını göster bölümüne bakın.
2. CSS seçici istatistiklerini etkinleştir onay kutusunu işaretleyin.

Daha fazla bilgi için Stili Yeniden Hesapla etkinlikleri sırasında CSS seçici performansını analiz etme başlıklı makaleyi inceleyin.

Gelişmiş boyama ölçümünü etkinleştirme

Ayrıntılı boyama araçlarını görüntülemek için:

1. Çekim ayarları menüsünü açın. Kayıt ayarlarını göster bölümüne bakın.
2. Gelişmiş boyama araçlarını etkinleştir onay kutusunu işaretleyin.

Boya bilgileriyle nasıl etkileşim kuracağınızı öğrenmek için Katmanları görüntüleme ve Boya profil oluşturucuyu görüntüleme bölümlerini inceleyin.

Özel kanalları göster

İz özetinde, DevTools Extensibility API kullanılarak özelleştirilebilen özel izleri ve özel iz grubu özetlerini etkinleştirir.

Önceki kaydı temizleme

Kayıt yaptıktan sonra Kaydı temizle'ye basarak kaydı Performans panelinden temizleyin.

Performans kaydını analiz etme

Çalışma zamanı performansını kaydettikten veya yükleme performansını kaydettikten sonra Performans paneli, az önce gerçekleşen işlemin performansını analiz etmek için çok sayıda veri sağlar.

Kayıtlara not ekleme ve paylaşma

Performans bulgularınıza not ekleme ve paylaşma başlıklı makaleyi inceleyin.

Uygulanabilir analizler elde etme

Performans panelinde, Lighthouse raporlarında da gösterilen performans analizleri yer alır. Bu analizler, performansı artırmanın yollarını önerebilir ve LCP ve INP alt bölümleri, LCP istek keşfi sorunları, üçüncü taraflar, eski ve yinelenen JavaScript kaynakları gibi performans sorunları hakkında rehberli analizler sunabilir. Tam liste için Performans Analizleri belgelerine bakın.

Sorun algılanmadığında analizler başarılı olur. Analizler sekmesinde, bu analizler en alttaki daraltılmış Geçmiş analizler bölümünde listelenir. Geçmeyen analizler kendi bölümlerinde listelenir.

Analizlerden yararlanmak için:

1. Performans kaydı yapın.
2. Performans panelinin sol kenar çubuğunda Analizler sekmesini açın, farklı bölümleri genişletin, öğelerin üzerine gelin ve öğeleri tıklayın. Performans panelinde, izdeki ilgili etkinlikler vurgulanır.

Kaydı inceleme

Gezinmenize yardımcı olmak için fareyle performans izinin üzerine geldiğinizde Performans paneli şunları yapar:

• Zaman çizelgesi genel bakışı üzerine geldiğinizde, performans izinin tamamını kapsayan dikey bir işaretçi gösterir.
• Ana kanaldaki öğelerin üzerine geldiğinizde Zaman çizelgesine genel bakış bölümünde bir aralığı vurgular.

Performans kaydınızı yakından incelemek için kaydın bir bölümünü seçebilir, uzun bir flame grafiğini kaydırabilir, yakınlaştırıp uzaklaştırabilir ve yakınlaştırma seviyeleri arasında geçiş yapmak için içerik haritasını kullanabilirsiniz.

Gezinmek için klavye kısayollarını kullanma

Kayıtta hızlıca gezinmek için klavye kısayollarını kullanmak istiyorsanız önce tercih ettiğiniz klavye gezinme stilini seçin.

Panelin sağ üst köşesinde yardım Kısayolları göster'i tıklayın ve aşağıdakilerden birini seçin:

• Klasik: Fare tekerleğiyle (dokunmatik yüzey yukarı veya aşağı) yakınlaştırın ve Üst Karakter + fare tekerleğiyle dikey olarak kaydırın.
• Modern: Fare tekerleğiyle dikey kaydırma, üst karakter + fare tekerleğiyle yatay kaydırma ve Command/Control + fare tekerleğiyle yakınlaştırma.

Kısayollar iletişim kutusunda, kullanılabilir kısayolların bir listesi de sunulur.

Kaydın bir bölümünü seçin

Performans panelinin işlem çubuğunun altında ve kaydın üst kısmında, CPU ve NET grafiklerinin yer aldığı Zaman çizelgesine genel bakış bölümünü görebilirsiniz.

Kaydın bir bölümünü seçmek için tıklayıp basılı tutun, ardından Zaman çizelgesine genel bakış'ta sola veya sağa sürükleyin.

Klavyeyi kullanarak bir bölüm seçmek için:

1. Ana parçaya veya komşu parçalardan birine odaklanın.
2. Yakınlaştırmak, sola gitmek, uzaklaştırmak ve sağa gitmek için sırasıyla W, A, S, D tuşlarını kullanın.

Dokunmatik yüzey kullanarak bir bölüm seçmek için:

1. Fareyle Zaman çizelgesine genel bakış bölümünün veya parçalardan herhangi birinin (Ana ve komşuları) üzerine gelin.
2. İki parmağınızı kullanarak uzaklaştırmak için yukarı, sola gitmek için sola, yakınlaştırmak için aşağı ve sağa gitmek için sağa kaydırın.

İçerik haritası oluşturma ve yakınlaştırma seviyeleri arasında geçiş yapma

Zaman çizelgesine genel bakış, art arda birden fazla iç içe yerleştirilmiş gezinme yolu oluşturmanıza, yakınlaştırma seviyelerini artırmanıza ve ardından yakınlaştırma seviyeleri arasında serbestçe geçiş yapmanıza olanak tanır.

İçerik haritaları oluşturmak ve kullanmak için:

1. Zaman çizelgesine genel bakış bölümünde kaydın bir bölümünü seçin.
2. Fareyle seçimin üzerine gelip N ms zoom_in düğmesini tıklayın. Seçim, Zaman çizelgesine genel bakış'ı dolduracak şekilde genişler. Zaman çizelgesine genel bakış'ın üst kısmında bir adres yolu zinciri oluşturulmaya başlar.
3. Başka bir iç içe yerleştirilmiş yol öğesi oluşturmak için önceki iki adımı tekrarlayın. Seçim aralığı 5 milisaniyeden uzun olduğu sürece içerik haritalarını iç içe yerleştirmeye devam edebilirsiniz.
4. Seçilen bir yakınlaştırma seviyesine atlamak için Zaman çizelgesine genel bakış'ın üst kısmındaki zincirde ilgili gezinme yolunu tıklayın.

Bir içerik haritasının alt öğelerini kaldırmak için üst içerik haritasını sağ tıklayıp Alt içerik haritalarını kaldır'ı seçin.

Uzun bir flame grafiğini kaydırma

Ana kanaldaki veya komşu kanallarındaki uzun bir flame grafiğini kaydırmak için tıklayıp basılı tutun, ardından aradığınız öğe görünene kadar herhangi bir yöne sürükleyin.

Flame grafiğindeki alakasız komut dosyalarını yoksayma

Kodunuza daha iyi odaklanmak için alakasız komut dosyalarını yoksayılanlar listesine ekleyebilirsiniz.

Komut dosyalarını yoksaymak için aşağıdakilerden birini yapın:

• Üstteki işlem çubuğunda compress Yoksayılanlar listesi ayarları iletişim kutusunu göster'i tıklayın ve giriş alanına bir normal ifade yazın. Flame grafiği, siz yazarken yeni kuralı uygular.
• Bir komut dosyasını sağ tıklayıp Komut dosyasını yoksayılanlar listesine ekle'yi seçin. Performans paneli, bu komut dosyasını compress Yoksayılanlar listesi ayarları iletişim kutusunu göster'deki listeye ekler.

Panel, bu tür komut dosyaları için aşırı iç içe yerleştirmeyi otomatik olarak daraltır ve bunları On ignore list (REGULAR_EXPRESSION) olarak işaretler.

compress Yoksayılanlar listesi ayarları iletişim kutusunu göster bölümünde yoksayılanlar listesi kurallarını etkinleştirebilir ve devre dışı bırakabilirsiniz.

Bir komut dosyasını yoksayılanlar listesinden kaldırmak için flame grafiğinde komut dosyasını sağ tıklayıp Komut dosyasını yoksayılanlar listesinden kaldır'ı seçin veya compress Yoksayılanlar listesi ayarları iletişim kutusunu göster bölümünde fareyle komut dosyasının üzerine gelip delete Kaldır'ı tıklayın.

DevTools, ayarlar Ayarlar > Yoksayılanlar listesi bölümüne eklediğiniz yoksayılanlar listesi kurallarını kaydeder.

Ayrıca, yalnızca birinci taraf komut dosyalarına odaklanmak için check_box Üçüncü tarafları karart'ı işaretleyin. Performans panelinde üçüncü taraf komut dosyaları devre dışı bırakılır.

Arama etkinlikleri

Ana kanaldaki etkinlikler ve Ağ kanalındaki istekler arasında arama yapabilirsiniz.

Performans panelinin alt kısmında bir arama kutusu açmak için şunlara basın:

• macOS: Command+F
• Windows, Linux: Control+F

Bu örnekte, alttaki arama kutusunda E ile başlayan tüm etkinlikleri bulan bir normal ifade gösterilmektedir.

Sorgunuzla eşleşen etkinlikler arasında geçiş yapmak için:

• expand_less Önceki veya expand_more Sonraki düğmelerini tıklayın.
• Önceki öğeyi seçmek için Üst Karakter+Enter tuşlarına, sonraki öğeyi seçmek için Enter tuşuna basın.

Performans panelinde, arama kutusunda seçilen etkinliğin üzerinde bir ipucu gösterilir.

Sorgu ayarlarını değiştirmek için:

• Sorguyu büyük/küçük harfe duyarlı hale getirmek için match_case Büyük/küçük harf eşleştir'i tıklayın.
• Sorgunuzda normal ifade kullanmak için regular_expression Normal ifade'yi tıklayın.

Arama kutusunu gizlemek için İptal'i tıklayın.

Parçaların sırasını değiştirme ve parçaları gizleme

Performans izini düzenlemek için parçaların sırasını değiştirebilir ve parça yapılandırma modunda alakasız olanları gizleyebilirsiniz.

Parçaları taşımak ve gizlemek için:

1. Yapılandırma moduna girmek için bir kanal adını sağ tıklayın ve Kanalları yapılandır'ı seçin.
2. Bir parçayı yukarı veya aşağı taşımak için arrow_upward yukarı veya arrow_downward aşağı simgesini tıklayın. Gizlemek için visibility_off simgesini tıklayın.
3. İşlemi tamamladığınızda yapılandırma modundan çıkmak için en alttaki Kanalları yapılandırmayı tamamla'yı tıklayın.

Bu iş akışının nasıl çalıştığını görmek için videoyu izleyin.

Performans paneli, yeni izler için iz yapılandırmasını kaydeder ancak sonraki Geliştirici Araçları oturumlarında kaydetmez.

Ana ileti dizisi etkinliğini görüntüleme

Sayfanın ana iş parçacığında gerçekleşen etkinliği görüntülemek için Main (Ana) kanalını kullanın.

Bir etkinliği tıklayarak Özet sekmesinde etkinlikle ilgili daha fazla bilgi görüntüleyebilirsiniz. Bu bilgiler arasında süre (ve kendi süresi), kaynak komut dosyasındaki ilgili satırın bağlantısı, kaynak URL (biliniyorsa varlık adıyla birlikte), varsa yığın izleme ve pasta grafikte zamanlama dökümü yer alır ancak bunlarla sınırlı değildir.

Performans panelinde seçilen etkinlik mavi renkle gösterilir.

Bu örnekte, Özet sekmesindeki get işlev çağrısı etkinliği hakkında daha fazla bilgi gösterilmektedir.

Birinci ve üçüncü taraf etkinlikleri arasındaki farkı ayırt etme

Üçüncü taraf koduna aşırı bağımlılık, yükleme performansını olumsuz etkileyebilir. Performans paneli, izlemedeki birinci ve üçüncü taraf etkinlikleri arasında görsel olarak ayrım yapmanıza yardımcı olabilir. Böylece, sayfanızdaki içeriklere öncelik vermek için üçüncü taraf kodlarının yüklenmesini azaltma veya geciktirme konusunda daha bilinçli bir karar verebilirsiniz.

Yalnızca birinci taraf kodunun performansına odaklanmak için:

1. Performans izinde veya Analizler sekmesinde hiçbir şeyin seçili olmadığından emin olun. Bunu yapmak için izdeki boş bir alanı tıklayın.
2. Üstteki işlem çubuğunda check_box Üçüncü tarafları karart'ı işaretleyin. Performans paneli, performans izindeki üçüncü tarafla ilgili etkinlikleri grileştirir ve yalnızca birinci tarafı vurgulanmış olarak bırakır.

"1./3. taraf" tablosuyla etkinlikleri vurgulama

Zaman çizelgesine genel bakış bölümünde seçilen bir aralıkta ve hiçbir etkinlik seçilmediğinde Özet sekmesinde, aşağıdakilerin ilgili aktarım boyutlarını ve ana iş parçacığı sürelerini listeleyen bir 1. taraf / 3. taraf tablosu gösterilir:

• 1st party rozetiyle işaretlenmiş birinci taraf tüzel kişisi.
• Seçilen aralıkta algılanan tüm üçüncü taraf öğeleri işaretlenmemiş.
• Extension rozetleriyle işaretlenmiş uzantılar.
• Diğer [unattributed] varlık.

İzde vurgulanan ilgili etkinlikleri ve gri renkte gösterilen diğer etkinlikleri görmek için fareyle tablodaki varlıkların üzerine gelin. Bir öğenin etkinliklerinin vurgulanmasını kaldırmak için tablodan ilgili öğeyi seçin. Vurgulamayı kaldırmak için izdeki boş bir alanı tıklayın.

Bu öğeye göre gruplandırılmış etkinlikleri Aşağıdan yukarıya sekmesinde açmak için tablodaki öğenin üzerine gelin ve yanındaki account_tree Aşağıdan yukarıya'yı tıklayın.

Flame grafiğini okuma

Performans panelinde, ana iş parçacığı etkinliği bir flame grafiğinde gösterilir. X ekseni, kaydın zaman içindeki ilerleyişini gösterir. Y ekseni, çağrı yığınını gösterir. En üstteki etkinlikler, alttaki etkinliklere neden olur.

Bu örnekte, Ana kanaldaki bir flame grafiği gösterilmektedir. Bir click etkinliği, anonim bir işlev çağrısına neden oldu. Bu işlev de onEndpointClick_ işlevini, o da handleClick_ işlevini çağırdı ve bu şekilde devam etti.

Performans paneli, alev grafiğini bölmek ve daha okunabilir hale getirmek için komut dosyalarına rastgele renkler atar. Önceki örnekte, bir komut dosyasından gelen işlev çağrıları açık mavi renkle gösterilmiştir. Başka bir komut dosyasından gelen çağrılar açık pembe renkle gösterilir. Daha koyu sarı renk, komut dosyası oluşturma etkinliğini, mor renk ise oluşturma etkinliğini gösterir. Bu koyu sarı ve mor etkinlikler tüm kayıtlarda tutarlıdır.

Uzun süren görevler de kırmızı bir üçgenle vurgulanır ve 50 milisaniyenin üzerindeki kısım kırmızı renkle gölgelenir:

Bu örnekte görev 400 milisaniyeden uzun sürdüğü için son 350 milisaniyeyi temsil eden kısım kırmızı renkle gölgelendirilirken ilk 50 milisaniye gölgelendirilmez.

Ayrıca, Ana izde profile() ve profileEnd() konsol işlevleriyle başlatılan ve durdurulan CPU profilleriyle ilgili bilgiler gösterilir. Kodunuzda veya Konsol'da console.profileEnd() işlevini çağırdığınızda Performans paneli otomatik olarak açılır ve kaydedilen izleme gösterilir.

JavaScript çağrılarının ayrıntılı flame grafiğini gizlemek için JavaScript örneklerini devre dışı bırakma bölümüne bakın. JS örnekleri devre dışı bırakıldığında yalnızca Event (click) ve Function Call gibi üst düzey etkinlikleri görürsünüz.

Etkinlik başlatıcılarını izleme

Ana iz, aşağıdaki başlatıcıları ve neden oldukları etkinlikleri bağlayan oklar gösterebilir:

• Stil veya düzen geçersiz kılma -> Stilleri yeniden hesapla veya Düzen
• Animasyon karesi iste -> Animasyon karesi tetiklendi
• Boşta Geri Çağırma İste -> Boşta Geri Çağırmayı Tetikle
• Zamanlayıcı Yükle -> Zamanlayıcı Tetiklendi
• WebSocket oluştur -> Gönder... ve WebSocket el sıkışması al veya WebSocket'i kaldır
• postTask planlayın -> postTask'ı etkinleştirin veya postTask'ı iptal edin

Okları görmek için flame grafiğinde bir başlatıcı veya neden olduğu etkinliği bulup seçin.

Seçildiğinde, Özet sekmesinde başlatıcılar için Başlatıcı bağlantıları ve neden oldukları etkinlikler için Başlatan bağlantıları gösterilir. İlgili etkinlikler arasında geçiş yapmak için bunları tıklayın.

Flame grafiğinde işlevleri ve alt öğelerini gizleme

Ana ileti dizisindeki alev grafiğini düzenlemek için seçili işlevleri veya bunların alt öğelerini gizleyebilirsiniz:

1. Ana parçada bir işlevi sağ tıklayın ve aşağıdaki seçeneklerden birini belirleyin veya ilgili kısayola basın:

   • İşlevi gizleme (H)
   • Alt öğeleri gizle (C)
   • Yinelenen alt öğeleri gizle (R)
   • Alt öğeleri sıfırla (U)
   • İzi sıfırla (T)
   • Komut dosyasını yoksayılanlar listesine ekleme (I)

   

   Gizli alt öğeleri olan işlev adının yanında bir arrow_drop_down açılır düğmesi görünür.

2. Gizli alt öğelerin sayısını görmek için fareyle arrow_drop_down açılır düğmesinin üzerine gelin.

   

3. Gizli alt öğeleri olan bir işlevi veya flame grafiğinin tamamını sıfırlamak için işlevi seçip U tuşuna basın veya herhangi bir işlevi sağ tıklayıp İzi sıfırla'yı seçin.

Flame grafiğindeki komut dosyalarını yoksayma

Yoksayılanlar listesine komut dosyası eklemek için grafikteki bir komut dosyasını sağ tıklayıp Komut dosyasını yoksayılanlar listesine ekle'yi seçin.

Grafik, yoksayılan komut dosyalarını daraltır, bunları Yoksayılanlar listesinde olarak işaretler ve ayarlar Ayarlar > Yoksayılanlar listesi bölümündeki Özel hariç tutma kurallarına ekler. Yoksayılan komut dosyaları, siz bunları izden veya Özel hariç tutma kuralları'ndan kaldırana kadar kaydedilir.

Etkinlikleri tabloda görüntüleme

Bir sayfayı kaydettikten sonra, etkinlikleri analiz etmek için yalnızca Ana kanala güvenmeniz gerekmez. Geliştirici Araçları, etkinlikleri analiz etmek için üç tablo görünümü de sunar. Her görünüm, etkinliklere farklı bir bakış açısı kazandırır:

• En çok işe neden olan temel etkinlikleri görüntülemek istediğinizde Çağrı ağacı sekmesini kullanın.
• Doğrudan en fazla zaman harcanan etkinlikleri görüntülemek istediğinizde Aşağıdan yukarıya sekmesini kullanın.
• Etkinlikleri kayıt sırasında gerçekleşme sırasına göre görüntülemek istediğinizde Olay günlüğü sekmesini kullanın.

Üç tablodan herhangi birindeki (ve Özet sekmesindeki 1. taraf / 3. taraf tablosundaki) bir öğeyi tıklayarak ilgili etkinliklerin izde vurgulanmasını ve performans izine göz atarken geri kalanların karartılmasını sağlayabilirsiniz.

Aradığınızı daha hızlı bulmanıza yardımcı olmak için üç sekmenin tümünde Filtre çubuğunun yanında gelişmiş filtreleme düğmeleri bulunur:

• match_case Büyük/küçük harf eşleştir.
• regular_expression Normal ifade.
• match_word Tüm kelimeyi eşleştir.

Performans panelindeki her tablo görünümünde, işlev çağrıları gibi etkinliklerin bağlantıları gösterilir. Geliştirici Araçları, hata ayıklamanıza yardımcı olmak için kaynak dosyalarda ilgili işlev bildirimlerini bulur. Ayrıca, uygun kaynak haritaları varsa ve etkinleştirilmişse Geliştirici Araçları orijinal dosyaları otomatik olarak bulur.

Bir kaynak dosyasını Kaynaklar panelinde açmak için bağlantıyı tıklayın.

Kök etkinlikler

Çağrı ağacı sekmesi, Aşağıdan yukarı sekmesi ve Olay günlüğü bölümlerinde bahsedilen kök etkinlikler kavramının açıklaması aşağıda verilmiştir.

Kök etkinlikler, tarayıcının bir işlem yapmasına neden olan etkinliklerdir. Örneğin, bir sayfayı tıkladığınızda tarayıcı, kök etkinlik olarak bir Event etkinliği tetikler. Bu Event, bir işleyicinin yürütülmesine neden olabilir.

Ana izleme şeridinin alev grafiğinde, kök etkinlikler grafiğin en üstünde yer alır. Çağrı ağacı ve Olay günlüğü sekmelerinde, kök etkinlikler üst düzey öğelerdir.

Kök etkinlik örneği için Çağrı Ağacı sekmesine bakın.

Çağrı ağacı sekmesi

En çok işe neden olan kök etkinlikleri görüntülemek için Çağrı ağacı sekmesini kullanın.

Çağrı ağacı sekmesinde yalnızca kaydın seçilen bölümündeki etkinlikler gösterilir. Bölümleri nasıl seçeceğinizi öğrenmek için Kaydın bir bölümünü seçme başlıklı makaleyi inceleyin.

Bu örnekte, Etkinlik sütunundaki öğelerin üst düzeyi (ör. Event, Paint ve Composite Layers) kök etkinliklerdir. İç içe yerleştirme, çağrı yığınını temsil eder. Bu örnekte Event, Function Call'e neden oldu. Bu da button.addEventListener'ye, o da b'ye neden oldu ve bu şekilde devam etti.

Özel Süre, doğrudan ilgili etkinlikte harcanan süreyi temsil eder. Toplam Süre, söz konusu etkinlikte veya alt etkinliklerinden herhangi birinde geçirilen süreyi temsil eder.

Tabloyu ilgili sütuna göre sıralamak için Kendi Süreniz, Toplam Süre veya Etkinlik'i tıklayın.

Etkinlikleri etkinlik adına göre filtrelemek için Filtre kutusunu kullanın.

Varsayılan olarak Gruplama menüsü Gruplama yok olarak ayarlanır. Etkinlik tablosunu çeşitli ölçütlere göre sıralamak için Gruplandırma menüsünü kullanın.

Aşağıdan yukarıya sekmesi

Doğrudan en çok zaman alan etkinlikleri toplu olarak görüntülemek için Aşağıdan yukarıya sekmesini kullanın.

Aşağıdan yukarı sekmesinde yalnızca kaydın seçilen bölümündeki etkinlikler gösterilir. Bölümleri nasıl seçeceğinizi öğrenmek için Kaydın bir bölümünü seçme başlıklı makaleyi inceleyin.

Bu örneğin Main (Ana) kanal flame grafiğinde, zamanın neredeyse tamamının wait() için üç çağrıyı yürütmekle geçtiğini görebilirsiniz. Buna göre, Aşağıdan yukarı sekmesindeki en üst etkinlik wait olur. Flame grafiğinde, wait çağrılarının altındaki sarı renk aslında binlerce Minor GC çağrısını temsil eder. Buna göre, Aşağıdan yukarıya sekmesinde, en pahalı ikinci etkinliğin Minor GC olduğunu görebilirsiniz.

Kendi Süresi sütunu, bu etkinlikte doğrudan harcanan ve tüm oluşumları kapsayan toplam süreyi gösterir.

Toplam Süre sütunu, söz konusu etkinlikte veya alt etkinliklerinden herhangi birinde harcanan toplam süreyi gösterir.

En ağır yığın tablosu

Arama ağacı veya Aşağıdan yukarıya sekmelerinin sağ tarafında, right_panel_open En ağır yığını göster'i tıklayarak En ağır yığın tablosunu gösterin.

Bu tabloda, seçilen etkinliğin alt etkinliklerinden hangilerinin yürütülmesinin en uzun sürdüğü gösterilir. Tablodaki bir öğenin üzerine gelerek ilgili etkinliğin Ana parçada vurgulanmasını ve diğerlerinin soluklaşmasını sağlayabilirsiniz.

Bu sayede, performans izinde en çok zaman alan çağrı yığınındaki iç içe geçmiş etkinlikleri görsel olarak bulabilirsiniz.

Olay günlüğü sekmesi

Kayıt sırasında gerçekleşen etkinlikleri oluşma sırasına göre görüntülemek için Olay günlüğü sekmesini kullanın.

Olay günlüğü sekmesinde yalnızca kaydın seçilen bölümündeki etkinlikler gösterilir. Bölümleri nasıl seçeceğinizi öğrenmek için Kaydın bir bölümünü seçme başlıklı makaleyi inceleyin.

Başlangıç Zamanı sütunu, kaydın başlangıcına göre söz konusu etkinliğin başladığı noktayı gösterir. Bu örnekte seçilen öğe için 1573.0 ms başlangıç zamanı, etkinliğin kaydın başlamasından 1.573 ms sonra başladığı anlamına gelir.

Öz Süre sütunu, doğrudan ilgili etkinlikte harcanan süreyi gösterir.

Toplam süre sütunları, doğrudan bu etkinlikte veya alt öğelerinde geçirilen süreyi gösterir.

Tabloyu ilgili sütuna göre sıralamak için Başlangıç Zamanı, Kendi Süresi veya Toplam Süre'yi tıklayın.

Etkinlikleri ada göre filtrelemek için Filtre kutusunu kullanın.

1 ms veya 15 ms'den kısa süren etkinlikleri filtrelemek için Süre menüsünü kullanın. Süre menüsü varsayılan olarak Tümü şeklinde ayarlanır. Bu da tüm etkinliklerin gösterildiği anlamına gelir.

Bu kategorilerdeki tüm etkinlikleri filtrelemek için Yükleme, Komut dosyası oluşturma, Oluşturma veya Boyama onay kutularını devre dışı bırakın.

Performans işaretçilerini görüntüleme

Performans izi boyunca dikey çizgiler içeren bir yer paylaşımında, aşağıdaki gibi önemli performans işaretlerini görebilirsiniz:

• First Contentful Paint (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded Etkinliği (DCL)
• Onload Etkinliği (L)

İzlemenin alt kısmındaki işaretçi adlarının üzerine gelerek zaman damgalarını görebilirsiniz.

Özel zamanlamaları görüntüleme

Zamanlamalar kanalında, özel performans işaretçilerinizi görüntüleyin. Örneğin:

• performance.mark() aramalar. Aşağıda, 813,44 ms'de JavaScript çalıştırılmaya başlanıyor etiketli, ipucu içeren ayrı bir işaret gösterilmektedir.
• performance.measure() aramaları. Aşağıda, Yavaş Etkileşim etiketli sarı bir aralık gösterilmektedir.

Zaman damgası, toplam süre, kendi süresi ve detail nesnesi dahil olmak üzere Özet sekmesinde daha fazla ayrıntı görmek için bir işaretçi seçin. performance.mark() ve performance.measure() çağrıları için sekmede yığın izlemeler de gösterilir.

Etkileşimleri görüntüleme

Olası yanıt verme hızı sorunlarını tespit etmek için Etkileşimler kanalında kullanıcı etkileşimlerini görüntüleyin.

Etkileşimleri görüntülemek için:

1. Örneğin, bu demo sayfasında Geliştirici Araçları'nı açın.
2. Performans panelini açıp kayıt başlatın.
3. Bir öğeyi (kahve) tıklayın ve kaydı durdurun.
4. Zaman çizelgesinde Etkileşimler parçasını bulun.

Bu örnekte, Etkileşimler parçasında İşaretçi etkileşimi gösterilmektedir. Etkileşimlerde, işleme süresi sınırlarında giriş ve sunum gecikmelerini gösteren bıyıklar bulunur. Giriş gecikmesi, işleme süresi ve sunum gecikmesiyle ilgili ipucunu görmek için etkileşimin üzerine gelin.

Etkileşimler kanalı, Özet sekmesinde ve fareyle üzerine gelindiğinde gösterilen bir ipucunda 200 milisaniyeden uzun süren etkileşimler için Interaction to Next Paint (INP) uyarılarını da gösterir:

Etkileşimler parçası, 200 milisaniyeden uzun etkileşimleri sağ üst köşede kırmızı bir üçgenle işaretler.

Düzen kaymalarını görüntüleme

Düzen kaymaları kanalında düzen kaymalarını görüntüleyin. Vardiyalar mor elmaslar olarak gösterilir ve zaman çizelgesindeki yakınlıklarına göre kümeler (mor çizgiler) halinde gruplandırılır.

Görüntü alanında düzen kaymasına neden olan bir öğeyi vurgulamak için fareyle ilgili elmasın üzerine gelin.

Zamanlamalar, puanlar, öğeler ve olası nedenlerle birlikte Özet sekmesinde bir düzen kayması veya kaymalar hakkında daha fazla bilgi görmek için ilgili elması ya da kümeyi tıklayın.

Daha fazla bilgi için Cumulative Layout Shift (CLS) başlıklı makaleyi inceleyin.

Animasyonları görüntüleme

Animasyonlar parçasındaki animasyonları görüntüleyin. Animasyonlar, varsa ilgili CSS özellikleri veya öğeleri olarak adlandırılır (ör. transform veya my-element). Birleştirme dışı animasyonlar, sağ üst köşede kırmızı üçgenlerle işaretlenir.

Birleştirme hatalarının nedenleri de dahil olmak üzere Özet sekmesinde daha fazla ayrıntı görmek için bir animasyon seçin.

GPU etkinliğini görüntüleme

GPU bölümünde GPU etkinliğini görüntüleyin.

Raster etkinliğini görüntüleme

İş Parçacığı Havuzu bölümünde raster etkinliğini görüntüleyin.

Saniyedeki kare sayısını (FPS) analiz etme

Geliştirici Araçları, saniyedeki kare sayısını analiz etmek için çeşitli yöntemler sunar:

• Belirli bir karenin ne kadar sürdüğünü görmek için Kareler bölümünü kullanın.
• Sayfa çalışırken FPS'nin gerçek zamanlı bir tahmini için FPS ölçeri kullanın. FPS ölçer ile saniyedeki kare sayısını anlık olarak görüntüleme başlıklı makaleyi inceleyin.

Kareler bölümü

Kareler bölümü, belirli bir karenin tam olarak ne kadar sürdüğünü gösterir.

Bir kare hakkında daha fazla bilgi içeren ipucunu görüntülemek için fareyle karenin üzerine gelin.

Bu örnekte, fareyle bir karenin üzerine geldiğinizde ipucu gösterilir.

Kareler bölümünde dört tür kare gösterilebilir:

1. Boşta kalan çerçeve (beyaz). Değişiklik yok.
2. Çerçeve (yeşil). Beklendiği gibi ve zamanında oluşturuldu.
3. Kısmen gösterilen kare (seyrek geniş kesikli çizgi desenli sarı). Chrome, en azından bazı görsel güncellemeleri zamanında oluşturmak için elinden geleni yaptı. Örneğin, oluşturucu işleminin ana iş parçacığının (canvas animasyonu) çalışması gecikmiş ancak birleştirici iş parçacığı (kaydırma) zamanında çalışmışsa.
4. Atlanan çerçeve (yoğun, kesintisiz çizgi desenli kırmızı). Chrome, kareyi makul bir sürede oluşturamıyor.

Bu örnekte, kısmen sunulan bir karenin üzerine geldiğinizde ipucu gösterilmektedir.

Özet sekmesinde kare hakkında daha fazla bilgi görüntülemek için bir kareyi tıklayın. Geliştirici Araçları, seçili kareyi mavi renkle vurgular.

Ağ isteklerini görüntüleme

Performans kaydı sırasında gerçekleşen ağ isteklerinin şelalesini görüntülemek için Ağ bölümünü genişletin.

Ağ parça adının yanında, renk kodlu istek türlerini içeren bir açıklama bulunur.

Oluşturmayı engelleyen istekler, sağ üst köşede kırmızı bir üçgenle işaretlenir.

Aşağıdaki bilgileri içeren bir ipucu görmek için fareyle isteğin üzerine gelin:

• İsteğin URL'si ve yürütülmesi için gereken toplam süre.
• Öncelik veya öncelik değişikliği (ör. Medium -> High).
• İsteğin Render-blocking olup olmadığı.
• İstek zamanlamalarının dökümü (daha sonra açıklanacaktır).

Bir isteği tıkladığınızda Ağ kanalı, başlatıcısından isteğe doğru bir ok çizer.

Ayrıca, Performans paneli, İlk Öncelik ve (son) Öncelik alanları dahil ancak bunlarla sınırlı olmamak üzere istekle ilgili daha fazla bilgi içeren Özet sekmesini gösterir. Değerleri farklıysa isteğin getirme önceliği kayıt sırasında değişmiştir. Daha fazla bilgi için Fetch Priority API ile kaynak yüklemeyi optimize etme başlıklı makaleyi inceleyin.

Özet sekmesinde, isteğin zamanlamalarının dökümü de gösterilir.

Bu örnekte, www.google.com talebi solda bir çizgi (|–), ortada koyu ve açık renkli bir çubuk ve sağda bir çizgi (–|) ile gösterilmiştir.

Varsa Özet sekmesinde, sunucu tarafı oluşturma teknolojilerini uygulayan ağ istekleri için sunucu zamanlamalarının dökümü de gösterilir. Bu istekler için Performans paneli, verileri Server-Timing yanıt başlığından alır.

Diğer zamanlama dökümünü Ağ sekmesinde bulabilirsiniz. Ağ kanalındaki isteği veya Özet sekmesindeki URL'sini sağ tıklayıp Ağ panelinde göster'i tıklayın. Geliştirici Araçları sizi Ağ paneline yönlendirir ve ilgili isteği seçer. Zamanlama sekmesini açın.

Bu iki dökümün birbiriyle eşleşme şekli aşağıda açıklanmıştır:

• Soldaki çizgi (|–), Connection start etkinlik grubuna kadar olan her şeyi kapsar. Başka bir deyişle, Request Sent işaretinden önceki her şeydir.
• Çubuğun açık renkli kısmı Request sent ve Waiting for server response.
• Çubuğun koyu kısmı Content download.
• Sağdaki çizgi (–|), ana iş parçacığının beklenirken geçen süreyi gösterir. Ağ > Zamanlama sekmesinde gösterilmez.

Bellek metriklerini görüntüleme

Son kayıttaki hafıza metriklerini görüntülemek için Hafıza onay kutusunu etkinleştirin.

Geliştirici Araçları, Özet sekmesinin üzerinde yeni bir Bellek grafiği gösterir. Ayrıca, NET grafiğinin altında HEAP adlı yeni bir grafik de bulunur. HEAP grafiği, Bellek grafiğindeki JS Yığını satırıyla aynı bilgileri sağlar.

Bu örnekte, Özet sekmesinin üzerinde bellek metrikleri gösterilmektedir.

Grafikteki renkli çizgiler, grafiğin üstündeki renkli onay kutularıyla eşleşir. Bir kategoriyi grafikten gizlemek için ilgili onay kutusunun işaretini kaldırın.

Grafikte yalnızca kaydın seçili bölgesi gösterilir. Önceki örnekte, Bellek grafiği yalnızca kaydın başlangıcından yaklaşık 1.000 ms işaretine kadar olan bellek kullanımını gösterir.

Kaydın bir bölümünün süresini görüntüleme

Ağ veya Ana gibi bir bölümü analiz ederken bazen belirli etkinliklerin ne kadar sürdüğüne dair daha kesin bir tahmine ihtiyacınız olur. Üst Karakter tuşunu basılı tutun, tıklayıp basılı tutun ve kaydın bir bölümünü seçmek için sola veya sağa sürükleyin. Geliştirici Araçları, seçtiğiniz bölümün ne kadar sürdüğünü seçimin en altında gösterir.

Bu örnekte, seçilen bölümün altındaki 488.53ms zaman damgası, bu bölümün ne kadar sürdüğünü gösterir.

Ekran görüntüsünü görüntüleme

Ekran görüntüsü almayı etkinleştirmeyi öğrenmek için Kayıt sırasında ekran görüntüsü alma başlıklı makaleyi inceleyin.

Kaydın o anında sayfanın nasıl göründüğünün ekran görüntüsünü görüntülemek için Zaman çizelgesine genel bakış'ın üzerine gelin. Zaman çizelgesine genel bakış, CPU, FPS ve NET grafiklerini içeren bölümdür.

Ekran görüntülerini, Kareler bölümünde bir kareyi tıklayarak da görüntüleyebilirsiniz. Geliştirici Araçları, Özet sekmesinde ekran görüntüsünün küçük bir sürümünü gösterir.

Bu örnekte, Kareler bölümünde tıkladığınızda Özet sekmesindeki 195.5ms karesinin ekran görüntüsü gösterilmektedir.

Ekran görüntüsünü yakınlaştırmak için Özet sekmesindeki küçük resmi tıklayın.

Bu örnekte, Özet sekmesinde küçük resmini tıkladığınız bir ekran görüntüsünün yakınlaştırılmış hali gösterilmektedir.

Katman bilgilerini görüntüleme

Bir kareyle ilgili gelişmiş katman bilgilerini görüntülemek için:

1. Gelişmiş boyama araçlarını etkinleştirin.
2. Çerçeveler bölümünde bir çerçeve seçin. DevTools, katmanlarıyla ilgili bilgileri Olay günlüğü sekmesinin yanındaki yeni Katmanlar sekmesinde gösterir.

Bir katmanın üzerine gelerek diyagramda vurgulayın.

Bu örnekte, fareyle üzerine gelindiğinde #39 numaralı katmanın vurgulandığı gösterilmektedir.

Diyagramı taşımak için:

• X ve Y eksenleri boyunca hareket etmek için Kaydırma Modu'nu tıklayın.
• Z ekseni boyunca döndürmek için Döndürme Modu'nu tıklayın.
• Diyagramı orijinal konumuna sıfırlamak için Dönüşümü Sıfırla'yı tıklayın.

Katman analizinin nasıl çalıştığını görün:

Boyama profil aracını görüntüle

Bir boyama etkinliğiyle ilgili gelişmiş bilgileri görüntülemek için:

1. Gelişmiş boyama araçlarını etkinleştirin.
2. Main kanalında bir Paint etkinliği seçin.

Oluşturma sekmesiyle oluşturma performansını analiz etme

Sayfanızın oluşturma performansını görselleştirmek için Oluşturma sekmesinin özelliklerini kullanın.

Oluşturma sekmesini açın.

FPS ölçer ile saniyedeki kare sayısını gerçek zamanlı olarak görüntüleme

Kare oluşturma istatistikleri, görüntü alanınızın sağ üst köşesinde görünen bir yer paylaşımıdır. Sayfa çalışırken FPS'nin anlık tahminini sağlar.

Çerçeve oluşturma istatistikleri'ne bakın.

Paint Flashing ile boyama etkinliklerini gerçek zamanlı olarak görüntüleme

Sayfadaki tüm boyama etkinliklerinin anlık görünümünü elde etmek için Paint Flashing'i kullanın.

Boya parlaması bölümüne bakın.

Katman kenarlıklarıyla katmanların yer paylaşımını görüntüleme

Sayfanın üst kısmında katman kenarlıklarının ve karoların yer paylaşımını görüntülemek için Katman Kenarlıkları'nı kullanın.

Katman kenarlıkları başlıklı makaleyi inceleyin.

Kaydırma performansıyla ilgili sorunları anında bulma

Sayfanın performansına zarar verebilecek kaydırmayla ilgili etkinlik işleyicileri olan sayfa öğelerini belirlemek için Kaydırma Performansı Sorunları'nı kullanın. DevTools, sorunlu olabilecek öğeleri turkuaz renkle vurgular.

Kaydırma performans sorunları başlıklı makaleyi inceleyin.