Performans özellikleri referansı

Kayce Basques

Sofia Emelianova

Bu sayfa, performansı analiz etmekle ilgili Chrome Geliştirici Araçları özelliklerinin kapsamlı bir referansıdır.

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

Kayıt performansı

Çalışma süresini veya yükleme performansını kaydedebilirsiniz.

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

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

1. Analiz etmek istediğiniz sayfaya gidin.
2. DevTools'ta Performans sekmesini tıklayın.

3. Kaydet'i tıklayın.

   

4. Sayfayla etkileşim kurun. Geliştirici Araçları, etkileşimleriniz sonucunda gerçekleşen tüm sayfa etkinliklerini kaydeder.

5. Kaydı durdurmak için tekrar Kaydet'i veya Durdur'u tıklayın.

Kayıt yükleme performansı

Bir sayfanın performansını çalışırken değil, yüklenirken 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. Profil oluşturmaya başla ve sayfayı yeniden yükle'yi tıklayın. DevTools, kalan ekran görüntülerini ve izlerini temizlemek için önce about:blank'e gider. Ardından DevTools, sayfa yeniden yüklenirken performans metriklerini kaydeder ve yükleme işlemi tamamlandıktan birkaç saniye sonra kaydı otomatik olarak durdurur.

   

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

Bu örnekte, Performans panelinde sayfa yükleme sırasındaki etkinlik gösterilmektedir.

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 etkinleştirin.

Ekran görüntüleriyle nasıl etkileşime geçeceğinizi öğrenmek için Ekran görüntüsünü görüntüleme başlıklı makaleyi inceleyin.

Kayıt sırasında atık toplamayı zorlama

Bir sayfayı kaydederken, çöp toplamayı zorlamak için Çöp toplama mop'unu tıklayın.

Kayıt ayarlarını gösterme

DevTools'un performans kayıtlarını yakalama şekliyle ilgili daha fazla ayar görmek için Kayıt ayarları'nı tıklayın.

JavaScript örneklerini devre dışı bırakma

Bir kaydın Ana parçasında varsayılan olarak, kayıt sırasında çağrılan JavaScript işlevlerinin ayrıntılı çağrı yığınları gösterilir. Bu çağrı yığınlarını devre dışı bırakmak için:

1. Kayıt ayarları menüsünü açın. Kayıt ayarlarını gösterme bölümüne bakın.
2. JavaScript Örneklerini Devre Dışı Bırak onay kutusunu etkinleştirin.
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ışıyken kaydın Ana parçası, tüm JavaScript çağrı yığınlarını atladığı için çok daha kısadır.

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

Bu örnekte, etkin JS örnekleri içeren bir kayıt gösterilmektedir.

Kayıt sırasında ağ bağlantısını sınırlama

Kayıt sırasında ağı kısıtlamak için:

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

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

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

1. Kayıt ayarları menüsünü açın. Kayıt ayarlarını gösterme bölümüne bakın.
2. CPU'yu, seçilen tıkanma düzeyine ayarlayın.

Azaltma, bilgisayarınızın özelliklerine göre yapılır. Örneğin, 2 kat yavaşlatma seçeneği CPU'nuzun normal kapasitesinden 2 kat daha yavaş çalışmasını sağlar. Mobil cihazların mimarisi masaüstü ve dizüstü bilgisayarlardan çok farklı olduğu için DevTools, mobil cihazların CPU'larını gerçek anlamda simüle edemez.

CSS seçici istatistiklerini etkinleştirme

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

1. Kayıt ayarları menüsünü açın. Kayıt ayarlarını gösterme 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 enstrümantasyonunu etkinleştir

Ayrıntılı boyama enstrümantasyonunu görüntülemek için:

1. Kayıt ayarları menüsünü açın. Kayıt ayarlarını gösterme bölümüne bakın.
2. Gelişmiş boyama enstrümantasyonunu etkinleştir onay kutusunu işaretleyin.

Boya bilgileriyle nasıl etkileşime geçeceğinizi öğrenmek için Katmanları görüntüleme ve Boya profilleyiciyi görüntüleme başlıklı makaleleri inceleyin.

Kaydı kaydetme

Bir kaydı kaydetmek için sağ tıklayıp Profili Kaydet'i seçin.

Kayıt yükleme

Kayıt yüklemek için sağ tıklayıp Profili Yükle'yi seçin.

Önceki kaydı temizleme

Kayıt yaptıktan sonra, Performans panelinden kaydı silmek için Kaydı temizle'ye basın.

Performans kaydını analiz etme

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

Kaydın içinde gezinme

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

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

Performans panelinin işlem çubuğu 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.

Bir 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 kanala veya komşu kanallardan birine odaklanın.
2. Sırasıyla yakınlaştırmak, sola gitmek, uzaklaştırmak ve sağa gitmek için W, A, S, D tuşlarını kullanın.

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

1. Fare imlecini Zaman çizelgesine genel bakış bölümünün veya parçalardan birinin (Ana ve komşuları) üzerine getirin.
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.

Kırıntı oluşturma ve yakınlaştırma düzeyleri arasında atlama

Zaman çizelgesi genel bakışı, yakınlaştırma düzeylerini artırarak art arda birden fazla iç içe yerleştirilmiş içerik haritası oluşturmanıza ve ardından yakınlaştırma düzeyleri arasında özgürce geçiş yapmanıza olanak tanır.

Sayfa gezinme menüsü 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 çizelgesi genel bakışını dolduracak şekilde genişler. Zaman çizelgesine genel bakış'ın üst kısmında bir içerik haritası zinciri oluşturulmaya başlar.
3. Başka bir iç içe yerleştirilmiş içerik haritası oluşturmak için önceki iki adımı tekrarlayın. Seçim aralığı 5 milisaniyeden uzun olduğu sürece ekmek kırıntılarını iç içe yerleştirmeye devam edebilirsiniz.
4. Belirli bir yakınlaştırma düzeyine atlamak için Zaman çizelgesi genel bakış'ının üst kısmındaki zincirdeki ilgili içerik haritası öğesini tıklayın.

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

Uzun bir flame grafiğinde gezinme

Ana kanaldaki veya komşu kanallardaki uzun bir alev grafiğinde gezinmek için grafiği tıklayıp basılı tutun, ardından aradığınız öğe görünene kadar herhangi bir yönde sürükleyin.

Etkinlikleri arama

Ana kanaldaki etkinliklerde ve Ağ kanalındaki isteklerde arama yapabilirsiniz.

Performans panelinin alt kısmındaki arama kutusunu açmak için:

• macOS: Command+F
• Windows, Linux: Ctrl+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 seçeneği belirlemek için Üst Karakter+Enter, sonraki seçeneği belirlemek 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 harfe duyarlı eşle'yi 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 izlemenin karmaşıklığını azaltmak için parçaların sırasını değiştirebilir ve parça yapılandırması modunda alakasız olanları gizleyebilirsiniz.

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

1. Yapılandırma moduna girmek için bir parça adını sağ tıklayın ve Parçaları yapılandır'ı seçin.
2. Bir parçayı yukarı veya aşağı taşımak için arrow_upward yukarı oku veya arrow_downward aşağı oku tıklayın. Gizlemek için visibility_off'u 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ı çalışırken görmek için videoyu izleyin.

Performans paneli, yeni izlemeler için kanal yapılandırmasını kaydeder ancak sonraki DevTools oturumlarında kaydetmez.

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

Sayfanın ana mesaj dizisinde gerçekleşen etkinliği görüntülemek için Ana kanalını kullanın.

Özet sekmesinde bir etkinlikle ilgili daha fazla bilgi görüntülemek için etkinliği tıklayın. 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.

Flame grafiğini okuma

Performans paneli, ana mesaj dizisi etkinliğini bir alev grafiğinde gösterir. X ekseni, zaman içindeki kaydı gösterir. Y ekseni, çağrı yığınını temsil eder. Üstteki etkinlikler aşağıdaki etkinliklere neden olur.

Bu örnekte, Ana kanaldaki bir alev grafiği gösterilmektedir. click etkinliği, anonim işlev çağrısına neden oldu. Bu işlev sırayla onEndpointClick_, handleClick_ ve benzeri işlevleri çağırır.

Performans paneli, alev grafiğini bölmek ve daha okunaklı 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 renktedir. Başka bir komut dosyasından gelen çağrılar açık pembe renktedir. Koyu sarı, komut dosyası etkinliğini, mor etkinlik ise oluşturma etkinliğini temsil eder. Bu koyu sarı ve mor etkinlikler tüm kayıtlarda aynıdır.

Uzun görevler de kırmızı üçgenle vurgulanır ve 50 milisaniyeden uzun olan kısım kırmızıyla gölgelenir:

Bu örnekte, görev 400 milisaniyeden uzun sürdü. Bu nedenle, son 350 milisaniyeyi temsil eden kısım kırmızıyla gölgelendirilirken ilk 50 milisaniye gölgelenmez.

Ayrıca Ana kanalında, profile() ve profileEnd() konsol işlevleriyle başlatılan ve durdurulan CPU profilleriyle ilgili bilgiler gösterilir.

JavaScript çağrılarının ayrıntılı alev grafiğini gizlemek için JavaScript örneklerini devre dışı bırakma başlıklı makaleyi inceleyin. 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.

Etkinliği başlatanları izleme

Ana kanalında, aşağıdaki başlatıcıları ve neden oldukları etkinlikleri birbirine bağlayan oklar gösterilebilir:

• Stil veya düzen geçersizliği -> Stili 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ı Yükle -> Zamanlayıcı Tetiklendi
• WebSocket Oluştur -> Gönder... ve WebSocket El Sıkışması Al veya WebSocket'i Kaldır

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

Özet sekmesi seçildiğinde, başlatıcılar için Başlatıcı bağlantıları ve başlatıcıların neden olduğu etkinlikler için Başlatıcısı bağlantıları gösterilir. İlgili etkinlikler arasında geçiş yapmak için bunları tıklayın.

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

Ana ileti dizisindeki alev grafiğinin karmaşıklığını azaltmak için seçili işlevleri veya alt öğelerini gizleyebilirsiniz:

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

   • İşlevi gizle (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 ekle (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 çocukların 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 alev 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 İzleme sıfırla'yı seçin.

Alev grafiğinde komut dosyalarını yoksayma

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

Grafik, yoksayılan komut dosyalarını daraltır, 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ı izlemeden 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 kanalına güvenmeniz gerekmez. Geliştirici Araçları, etkinlikleri analiz etmek için üç tablo görünümü de sunar. Her görünüm, etkinliklerle ilgili farklı bir bakış açısı sunar:

• En fazla işe neden olan kök etkinlikleri görüntülemek istediğinizde Arama Ağacı sekmesini kullanın.
• En çok zamanın doğrudan harcandığı etkinlikleri görüntülemek için Aşağıdan Yukarı sekmesini kullanın.
• Etkinlikleri kayıt sırasında gerçekleştikleri sırayla görüntülemek istediğinizde Olay Günlüğü sekmesini kullanın.

Aradığınızı daha hızlı bulmanıza yardımcı olmak için üç sekmenin de 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ü, işlev çağrıları gibi etkinliklerin bağlantılarını gösterir. Geliştirici Araçları, hata ayıklamanıza yardımcı olmak için kaynak dosyalarda ilgili işlev tanımlarını bulur. Ayrıca, uygun kaynak eşlemeleri mevcutsa ve etkinse Geliştirici Araçları orijinal dosyaları otomatik olarak bulur.

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

Not: Sonraki üç bölümün tümü aynı demoyu ifade eder. Demoyu Etkinlik Sekmeleri Demo'sunda kendiniz çalıştırabilir ve kaynağı GoogleChrome/devtools-samples/perf/activitytabs.html adresinde görebilirsiniz.

Kök etkinlikleri

Ç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 bazı işlemler 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 kanalın alev grafiğinde kök etkinlikler grafiğin en üstünde yer alır. Çağrı Ağacı ve Etkinlik Günlüğü sekmelerinde kök etkinlikler en üst düzey öğelerdir.

Kök etkinliklere örnek olarak Çağrı ağacı sekmesine bakın.

Çağrı ağacı sekmesi

En fazla çalışmayı hangi kök etkinliklerin yaptığını görmek için Çağrı ağacı sekmesini kullanın.

Arama ağacı sekmesi yalnızca kaydın seçili kısmındaki etkinlikleri gösterir. 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 Event, Paint ve Composite Layers gibi üst düzey öğeler kök etkinliklerdir. İç içe yerleştirme, çağrı yığınını temsil eder. Bu örnekte, Event Function Call'e, Function Call button.addEventListener'ye, button.addEventListener b'a ve bu şekilde devam etti.

Kendi kendine zaman, doğrudan ilgili etkinlikte harcanan süreyi gösterir. Toplam Süre, ilgili etkinlikte veya alt etkinliklerden birinde harcanan süreyi temsil eder.

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

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

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

Etkinlik tablosunun sağındaki başka bir tabloyu göstermek için En Ağır Paketi Göster'i tıklayın. En Ağır Yığın tablosunu doldurmak için bir etkinliği tıklayın. En Ağır Yığın tablosu, seçilen etkinliğin hangi alt öğelerinin yürütülmesinin en uzun sürdüğünü gösterir.

Aşağıdan yukarıya sekmesi

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

Aşağıdan Yukarı sekmesi yalnızca kaydın seçili kısmındaki etkinlikleri gösterir. 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 Ana kanal alev grafiğinde, zamanın neredeyse tamamının wait() çağrısının üç kez yürütülmesiyle harcandığını görebilirsiniz. Buna göre, Aşağıdan Yukarı sekmesindeki en üst etkinlik wait'dir. Alev grafiğinde, wait aramalarının altındaki sarı renk aslında binlerce Minor GC aramasıdır. Buna göre, Aşağıdan Yukarı sekmesinde en pahalı ikinci etkinliğin Minor GC olduğunu görebilirsiniz.

Kendi kendine çalışma süresi sütunu, tüm gerçekleşmelerinde doğrudan bu etkinlikte harcanan toplam süreyi gösterir.

Toplam Süre sütunu, ilgili etkinlikte veya alt etkinliklerden herhangi birinde harcanan toplam süreyi gösterir.

Olay Günlüğü sekmesi

Etkinlikleri kayıt sırasında gerçekleştikleri sırayla görüntülemek için Etkinlik Günlüğü sekmesini kullanın.

Etkinlik Günlüğü sekmesi yalnızca kaydın seçili kısmındaki etkinlikleri gösterir. 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, ilgili etkinliğin kaydın başlangıcına göre başladığı noktayı gösterir. Bu örnekte, seçili öğe için 1573.0 ms başlangıç zamanı, etkinliğin kayıt başladıktan 1.573 ms sonra başladığı anlamına gelir.

Kendi kendine çalışma süresi sütunu, doğrudan ilgili etkinlikte harcanan süreyi gösterir.

Toplam Süre sütunları, doğrudan ilgili etkinlikte veya alt öğelerinden herhangi birinde harcanan süreyi gösterir.

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

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

1 ms veya 15 ms'den kısa süren tüm etkinlikleri filtrelemek için Süre menüsünü kullanın. Varsayılan olarak Süre menüsü Tümü olarak ayarlanmıştır. Bu durumda tüm etkinlikler gösterilir.

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

Zamanlamaları görüntüleme

Zaman çizelgesi kanalında aşağıdaki gibi önemli işaretçileri görüntüleyebilirsiniz:

• İlk Boyama (FP)
• İlk Zengin İçerikli Boyama (FCP)
• Largest Contentful Paint (LCP)
• DOMContentLoaded Etkinliği (DCL)
• Yükleme etkinliği (L)
• Özel performance.mark() aramalarınız. Aşağıda, 813,44 ms'de JavaScript'i çalıştırmaya başlıyor etiketli, ipucu içeren bir işaret gösterilmektedir.
• Özel performance.measure() aramalarınız. Aşağıda Yavaş Etkileşim etiketli sarı bir span gösterilmektedir.

Bir işaretçi seçerek Özet sekmesinde işaretçinin zaman damgası, toplam süre, kendi zamanı ve detail nesnesi gibi daha fazla ayrıntıyı görebilirsiniz. performance.mark() ve performance.measure() çağrıları için sekmede yığın izlemeleri de gösterilir.

Etkileşimleri görüntüleme

Olası yanıt verme sorunlarını tespit etmek için Etkileşim 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 kanalını bulun.

Bu örnekte, Etkileşim parçası İşaretçi etkileşimini göstermektedir. Etkileşimler, işleme süresi sınırlarında giriş ve sunum gecikmelerini gösteren antenlere sahiptir. Giriş gecikmesi, işleme süresi ve sunum gecikmesini içeren bir ipucu görmek için fareyle etkileşimin üzerine gelin.

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

Etkileşim sayısı metriği, 200 milisaniyeden uzun etkileşimleri sağ üst köşede kırmızı bir üçgenle işaretler.

GPU etkinliğini görüntüleme

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

Rastgele etkinliği 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

DevTools, saniyedeki kare sayısını analiz etmenin birçok yolunu sunar:

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

Çerçeveler bölümü

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

Bir çerçevenin üzerine gelerek ilgili çerçeve hakkında daha fazla bilgi içeren bir ipucu görüntüleyebilirsiniz.

Bu örnekte, fareyle bir çerçevenin üzerine geldiğinizde gösterilen ipucu gösterilmektedir.

Çerçeveler bölümünde dört tür çerçeve 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şturulur.
3. Kısmen gösterilen kare (seyrek geniş çizgi desenli sarı). Chrome, en azından bazı görsel güncellemeleri zamanında oluşturmak için elinden geleni yaptı. Örneğin, oluşturma işleminin ana iş parçacığının (tuval animasyonu) çalışması gecikmişse ancak derleyici iş parçacığı (kaydırma) zamanındaysa.
4. Atlanan kare (yoğun düz çizgi desenli kırmızı). Chrome, çerçeveyi makul bir sürede oluşturamıyor.

Bu örnekte, fareyle kısmen sunulan bir çerçevenin üzerine geldiğinizde gösterilen bir ipucu gösterilmektedir.

Özet sekmesinde bir çerçeveyle ilgili daha fazla bilgi görüntülemek için çerçeveyi tıklayın. DevTools, seçili çerçevenin ana hatlarını mavi renkle çizer.

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 yer alır.

Oluşturma işlemini engelleyen istekler sağ üst köşede kırmızı üçgenle işaretlenir.

Fareyle bir isteğin üzerine gelerek aşağıdaki bilgileri içeren bir ipucu görebilirsiniz:

• İsteğin URL'si ve yürütülmesi için geçen 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 bir ok çizer.

Ayrıca Performans panelinde, Başlangıç Önceliği ve (nihai) Öncelik alanları dahil ancak bunlarla sınırlı olmamak üzere istek hakkında daha fazla bilgi içeren Özet sekmesi gösterilir. 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 zamanlamasının dökümü de gösterilir.

www.google.com isteği solda bir çizgi (|–), ortada koyu ve açık bölümleri olan bir çubuk ve sağda bir çizgiyle (–|) gösterilir.

Ağ sekmesinde başka bir zaman planlaması dökümü bulabilirsiniz. Ağ kanalındaki isteği veya Özet sekmesindeki URL'sini sağ tıklayın ve Ağ panelinde göster'i tıklayın. DevTools sizi Ağ paneline götürür ve ilgili isteği seçer. Zamanlama sekmesini açın.

Bu iki dökümün birbirine nasıl eşlendiği aşağıda açıklanmıştır:

• Soldaki satır (|–), Connection start etkinlik grubuna kadar olan her şeyi içerir. Başka bir deyişle, Request Sent karakterinden önceki her şeydir.
• Çubuğun ışıklı kısmı Request sent ve Waiting for server response'dur.
• Çubuğun koyu kısmı Content download'tir.
• Sağdaki satır (–|), ana iş parçacığını beklerken geçen süredir. Ağ > Zamanlama sekmesinde gösterilmez.

Bellek metriklerini görüntüleme

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

DevTools, Özet sekmesinin üzerinde yeni bir Bellek grafiği gösterir. NET grafiğinin altında HEAP adlı yeni bir grafik de bulunur. HEAP grafiği, Bellek grafiğindeki JS Heap satırıyla aynı bilgileri sağlar.

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

Grafikteki renkli çizgiler, grafiğin üzerindeki renkli onay kutularıyla eşlenir. Bir kategoriyi grafikte gizlemek için ilgili onay kutusunu devre dışı bırakın.

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

Bir kaydın belirli bir kısmı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 olabilir. Kaydın bir bölümünü seçmek için Üst Karakter tuşunu basılı tutun, tıklayıp basılı tutun ve sola veya sağa sürükleyin. Seçiminizin alt kısmında, ilgili bölümün ne kadar sürdüğü DevTools tarafından gösterilir.

Bu örnekte, seçili bölümün alt kısmı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ülerini nasıl etkinleştireceğinizi öğrenmek için Kayıt sırasında ekran görüntüsü alma başlıklı makaleyi inceleyin.

Kayıt sırasında sayfanın nasıl göründüğünün ekran görüntüsünü görüntülemek için fareyle 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ündeki bir kareyi tıklayarak da görüntüleyebilirsiniz. Geliştirici Araçları, ekran görüntüsünün küçük bir sürümünü Özet sekmesinde gösterir.

Bu örnekte, Kareler bölümünde 195.5ms karesini tıkladığınızda Özet sekmesinde gösterilen ekran görüntüsü yer almaktadır.

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ıktan sonra yakınlaştırılmış bir ekran görüntüsü 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 enstrümantasyonunu etkinleştirin.
2. Çerçeveler bölümünde bir çerçeve seçin. DevTools, katmanlarıyla ilgili bilgileri Etkinlik Günlüğü sekmesinin yanındaki yeni Katmanlar sekmesinde gösterir.

Bir katmanın üzerine gelerek şemada vurgulayabilirsiniz.

Bu örnekte, fareyle üzerine geldiğinizde #39 katmanını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 işlemini sıfırla'yı tıklayın.

Katman analizini uygulamada görün:

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

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

1. Gelişmiş boyama enstrümantasyonunu etkinleştirin.
2. Ana kanalda bir Boya etkinliği seçin.

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

Sayfanızın oluşturma performansını görselleştirmeye yardımcı olması için Oluşturma sekmesinin özelliklerini kullanın.

Oluşturma sekmesini açın.

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

Çerçeve oluşturma istatistikleri, görüntü alanının sağ üst köşesinde görünen bir yer paylaşımıdır. Sayfa çalışırken FPS'nin gerçek zamanlı tahminini sağlar.

Çerçeve oluşturma istatistikleri başlıklı makaleyi inceleyin.

Boya vurgulama özelliğiyle boyama etkinliklerini gerçek zamanlı olarak görüntüleme

Sayfadaki tüm boyama etkinliklerinin gerçek zamanlı görüntüsünü almak için Boya Yanıp Sönme'yi kullanın.

Boya vurgulama başlıklı makaleyi inceleyin.

Katman Sınırları ile katmanların yer paylaşımını görüntüleme

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

Katman sınırları başlıklı makaleyi inceleyin.

Kaydırma performansı sorunlarını gerçek zamanlı olarak bulma

Sayfanın performansını olumsuz yönde etkileyebilecek, kaydırmayla ilgili etkinlik dinleyicileri içeren öğeleri belirlemek için Kaydırma Performansı Sorunları'nı kullanın. Geliştirici Araçları, soruna neden olabilecek öğeleri turkuaz renkle gösterir.

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