Performans özellikleri referansı

Bu sayfada, performans analiziyle ilgili Chrome Geliştirici Araçları özelliklerine kapsamlı bir referans verilmiştir.

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 Etmeye Başlama bölümüne bakın.

Performansı kaydedin

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

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

Çalışma zamanı performansını, çalışırken bir sayfanın yükleme yerine performansını analiz etmek istediğinizde 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. Geliştirici Araçları, etkileşimleriniz sonucunda gerçekleşen tüm sayfa etkinliğini kaydeder.

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

Yük performansını kaydedin

Yükleme performansını, yüklenen bir sayfanın performansını çalıştırmanın aksine analiz etmek istediğinizde 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. Geliştirici Araçları, kalan ekran görüntülerini ve izleri temizlemek için önce about:blank uygulamasına gider. Daha sonra 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 paneli sayfa yükleme sırasındaki etkinliği gösterir.

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

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şimde bulunacağınızı öğrenmek için Ekran görüntüsü görüntüleme bölümüne bakın.

Kayıt sırasında atık toplamaya zorla

Bir sayfayı kaydederken atık toplamayı zorlamak için Çöp kutusu topla'yı 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ırak

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. Yakalama 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 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ışı bırakıldığında, kaydın Ana yolu çok daha kısa olur, çünkü tüm JavaScript çağrı yığınları atlanır.

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

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

Kayıt sırasında ağı daraltın

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

1. Yakalama ayarları menüsünü açın. Kayıt ayarlarını göster bölümüne bakın.
2. Ağ'ı seçtiğiniz kısıtlama düzeyine ayarlayın.

Kayıt sırasında CPU'yu kısıtlayın

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

1. Yakalama ayarları menüsünü açın. Kayıt ayarlarını göster bölümüne bakın.
2. CPU'yu seçtiğiniz kısıtlama düzeyine ayarlayın.

Kısıtlama, bilgisayarınızın yeteneklerine bağlıdır. Örneğin, 2x yavaşlama seçeneği CPU'nuzun normal kapasitesinden 2 kat daha yavaş çalışmasına neden olur. Mobil cihazların mimarisi, masaüstü ve dizüstü bilgisayarların mimarisinden çok farklı olduğu için Geliştirici Araçları, mobil cihazların CPU'larını tam anlamıyla simüle edemez.

Gelişmiş boyama enstrümantasyonunu etkinleştir

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

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

Boya bilgileriyle nasıl etkileşimde bulunacağınızı öğrenmek için Katmanları görüntüleme ve Boya profil aracını görüntüleme konularına bakın.

Donanım eşzamanlılığı emülasyonu

Uygulama performansını farklı işlemci çekirdeği sayılarıyla test etmek için navigator.hardwareConcurrency özelliği tarafından bildirilen değeri yapılandırabilirsiniz. Bazı uygulamalar, bu özelliği uygulamalarının paralellik derecesini kontrol etmek için kullanır (örneğin, Emscripten pthread havuzu boyutunu kontrol etmek).

Donanım eşzamanlılığını emüle etmek için:

1. Yakalama ayarları menüsünü açın. Kayıt ayarlarını göster bölümüne bakın.
2. Donanım eşzamanlılığı'nı işaretleyin ve giriş kutusunda çekirdek sayısını ayarlayın.

Geliştirici Araçları, Performans sekmesinin yanında donanım eşzamanlı emülasyonunun etkin olduğunu hatırlatmak için bir uyarı simgesi görüntüler.

Varsayılan 10 değerine geri dönmek için Geri al düğmesini tıklayın.

Kayıt kaydetme

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

Kayıt yükle

Bir kaydı yüklemek için sağ tıklayın ve Profil Yükle'yi seçin.

Önceki kaydı temizle

Kayıt yaptıktan sonra Performans panelinden bu kaydı temizlemek için Kaydı temizle düğmesine basın.

Performans kaydını analiz etme

Çalışma zamanı performansını veya yükleme performansını kaydettikten sonra Performans paneli, olanların performansını analiz etmek için birçok veri sağlar.

Kayıtta gezinme

Performans kaydınızı yakından incelemek için kaydın bir bölümünü seçebilir, uzun bir ateş 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 haritalarını kullanabilirsiniz.

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

Performans panelindeki işlem çubuğunun altında ve kaydın üst kısmında CPU ve NET grafiklerinin bulunduğu 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 ve ardından Zaman çizelgesine genel bakış boyunca sola veya sağa sürükleyin.

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

1. Ana kanala veya komşularına odaklanın.
2. Sırasıyla yakınlaştırmak, sola, uzaklaştırmak ve sağa gitmek için W, A, S, D tuşlarını kullanın.

Dokunmatik yüzey kullanarak bir kısmı seçmek için:

1. Fareyle Zaman çizelgesine genel bakış bölümünün veya kanallardan 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ğı, sağa gitmek için de sağa kaydırın.

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

Zaman çizelgesine genel bakış, iç içe yerleştirilmiş birden fazla içerik haritasını arka arkaya oluşturmanıza, böylece yakınlaştırma seviyesini artırmanıza ve ardından seçilen seviyeye atlamanıza olanak tanır.

İçerik haritası 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 gelin ve N ms zoom_in düğmesini tıklayın. Seçim, Zaman çizelgesine genel bakış bölümünü dolduracak şekilde genişler. Zaman çizelgesine genel bakış bölümünün en üstünde bir içerik haritası zinciri oluşturulmaya başlar.
3. İç içe yerleştirilmiş başka bir içerik haritası 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. Belirli bir yakınlaştırma düzeyine atlamak için Zaman çizelgesine genel bakış sayfasının üst kısmındaki zincirde ilgili içerik haritasını tıklayın.

Uzun bir flame grafiğini kaydır

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

Arama etkinlikleri

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

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

Bu örnekte, E ile başlayan tüm etkinlikleri bulan, alt kısımdaki arama kutusunda bulunan bir normal ifade gösterilmektedir.

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

• expand_less Önceki veya expand_less Sonraki düğmelerini tıklayın.
• Öncekini seçmek için üst karakter+Enter, sonrakini seçmek için Enter tuşlarına basın.

Performans paneli, arama kutusunda seçilen etkinlikle ilgili bir ipucu gösterir.

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 seçeneğini tıklayın.

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

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

Performans takibindeki dağınıklığı ortadan kaldırmak için, parçaların sırasını değiştirebilir ve izleme 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 simgesini tıklayın. Gizlemek için visibility_off'u tıklayın.
3. İşiniz bittiğinde yapılandırma modundan çıkmak için alt kısımdaki Kanalları yapılandırmayı tamamla seçeneğini tıklayın.

Bu iş akışını uygulamalı olarak görmek için videoyu izleyin.

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

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

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

Özet sekmesinde bir etkinlikle ilgili daha fazla bilgi görüntülemek için etkinliği tıklayın. Performans panelinde seçili etkinlik mavi renkle özetlenir.

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

Fonksiyonları ve alt öğelerini flame grafiğinde gizle

Ana ileti dizisindeki flame grafiğindeki dağınıklığı ortadan kaldırmak için seçili işlevleri veya alt öğelerini gizleyebilirsiniz:

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

   • İşlevi gizle (H)
   • Alt öğeleri gizle (C)
   • Yinelenen alt öğeleri gizle (R)
   • Alt öğeleri sıfırla (U)
   • İzi sıfırla

   

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

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

   

3. Bir işlevi gizli alt öğeler veya tüm flame grafiğinde sıfırlamak için, işlevi seçin ve U tuşuna basın ya da herhangi bir işlevi sağ tıklayıp sırasıyla İzyi sıfırla'yı seçin.

Flame grafiğindeki komut dosyalarını yoksay

Yoksayılanlar listesine komut dosyası 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 > Yoksayma listesi'ndeki Özel hariç tutma kurallarına ekler. Yok sayılan komut dosyaları, siz izlemeden veya Özel hariç tutma kuralları'ndan kaldırana kadar kaydedilir.

Flame grafiğini okuyun

Performans paneli, flame grafiğindeki ana iş parçacığı etkinliğini temsil eder. X ekseni, zaman içinde kaydı temsil eder. Y ekseni, çağrı yığınını temsil eder. En üstteki etkinlikler aşağıdaki etkinliklere neden olur.

Bu örnekte, Ana kanalda flame grafiği gösterilmektedir. Bir click etkinliği, anonim işlev çağrısına neden oldu. onEndpointClick_ adlı bu işlev de handleClick_ olarak adlandırıldı.

Performans paneli, flame grafiğini ayırmak 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 renktedir. Başka bir alfabeden yapılan aramalar açık pembe renktedir. Koyu sarı etkinlik komut dosyası oluşturma etkinliğini, mor etkinlik ise oluşturma etkinliğini temsil eder. Bu koyu sarı ve mor etkinlikler tüm kayıtlarda tutarlıdır.

Uzun görevler de kırmızı bir üçgenle, 50 milisaniyeden uzun olan kısmı da kırmızıyla vurgulanır:

Bu örnekte, görev 400 milisaniyeden fazla sürmüştür. Bu nedenle, son 350 milisaniyeyi temsil eden kısım kırmızıyla gölgeli olarak gösterilirken, ilk 50 milisaniye için böyle bir hata söz konusu değildir.

Ayrıca Ana kanalda profile() ve profileEnd() konsol işlevleriyle başlatılan ve durdurulan CPU profilleri hakkında bilgiler gösterilir.

JavaScript çağrılarının ayrıntılı yan 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 kanalda, aşağıdaki başlatıcılar ile bunların neden olduğu etkinlikler arasında bağlantı kuran oklar gösterilebilir:

• Stil veya düzen geçersiz kılması -> Stilleri yeniden hesapla veya Düzen
• Animasyon Karesi İste -> 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

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

Özet sekmesi seçildiğinde, başlatanlar için Başlatan: bağlantıları ve sebep oldukları etkinlikler için Başlatan bağlantıları gösterilir. İlgili etkinlikler arasında geçiş yapmak için etkinlikleri tıklayın.

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 size etkinliklere farklı bir bakış açısı kazandırır:

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

Aradığınızı daha hızlı bulmanıza yardımcı olmak için üç sekmede de Filtre çubuğunun yanında gelişmiş filtreleme için düğmeler 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 bir tablo görünümü, işlev çağrıları gibi etkinliklere ilişkin bağlantıları gösterir. Geliştirici Araçları, hata ayıklamanıza yardımcı olmak için kaynak dosyalardaki ilgili işlev bildirimlerini bulur. Ayrıca, uygun kaynak eşlemeleri varsa ve etkinse Geliştirici Araçları orijinal dosyaları otomatik olarak bulur.

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

Kök etkinlikler

Arama Ağacı sekmesi, Aşağıdan Yukarı sekmesi ve Etkinlik Günlüğü bölümlerinde bahsedilen kök etkinlikler kavramının bir açıklamasını burada bulabilirsiniz.

Kök etkinlikler, tarayıcının bir miktar 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 kanalın flame grafiğinde, kök etkinlikleri grafiğin üst kısmında yer alır. Arama Ağacı ve Olay Günlüğü sekmelerinde kök etkinlikleri üst düzey öğelerdir.

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

Çağrı Ağacı sekmesi

Hangi temel etkinliklerin en fazla işe neden olduğunu görmek için Arama Ağacı sekmesini kullanın.

Arama Ağacı sekmesi, yalnızca kaydın seçilen bölümündeki etkinlikleri gösterir. Bölümleri nasıl seçeceğinizi öğrenmek için Kaydın bir bölümünü seçme konusuna bakın.

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 nedeniyle button.addEventListener sorununa yol açmış ve bu da b sonucunu doğurmuştur.

Kendi Kendine Zaman, doğrudan bu etkinlikte harcanan zamanı temsil eder. Toplam Süre, bu etkinlik veya herhangi bir alt etkinliği için harcanan süreyi temsil eder.

Tabloyu ilgili sütuna göre sıralamak için Etkinlik Süresi, 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 Gruplandırma menüsü Gruplandırma Yok şeklinde 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ğ tarafında başka bir tablo görüntülemek için En Ağır Yığını Göster seçeneğini 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ı sekmesi

Hangi etkinliklerin toplu olarak doğrudan en fazla zamanı aldığını görmek için Aşağıdan Yukarıya sekmesini kullanın.

Aşağıdan Yukarı sekmesi, yalnızca kaydın seçilen bölümündeki etkinlikleri gösterir. Bölümleri nasıl seçeceğinizi öğrenmek için Kaydın bir bölümünü seçme konusuna bakın.

Bu örneğin Ana kanal yanan grafiğinde, zamanın neredeyse tamamının wait()'ye yapılan üç çağrıyı yürütmek için harcandığını görebilirsiniz. Bu nedenle, Aşağıdan Yukarı sekmesinde en üstte yer alan etkinlik wait. Yangın grafiğinde wait çağrılarının altındaki sarı renkli aslında binlerce Minor GC çağrısıdır. Buna göre, Aşağıdan Yukarı sekmesinde bir sonraki en pahalı etkinliğin Minor GC olduğunu görebilirsiniz.

Kendi Kendine Zaman sütunu, etkinliğin tüm tekrarlarında doğrudan o etkinlikte harcanan toplam süreyi temsil eder.

Toplam Süre sütunu, bu etkinlik veya alt öğeleri arasında harcanan toplam süreyi gösterir.

Olay Günlüğü sekmesi

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

Olay Günlüğü sekmesi, yalnızca kaydın seçilen bölümündeki etkinlikleri görüntüler. Bölümleri nasıl seçeceğinizi öğrenmek için Kaydın bir bölümünü seçme konusuna bakın.

Başlangıç Zamanı sütunu, kaydın başlangıcına göre o etkinliğin başladığı noktayı temsil eder. Bu örnekte, seçilen öğe için 1573.0 ms başlangıç zamanı, etkinliğin kayıt başladıktan 1573 ms sonra başladığı anlamına gelir.

Kendi kendine zaman sütunu, doğrudan bu etkinlikte harcanan süreyi temsil eder.

Toplam Süre sütunları, doğrudan söz konusu etkinlikte veya onun alt öğelerinden birinde harcanan süreyi temsil eder.

Başlangıç Zamanı, Çalışma Süresi veya Toplam Süre'yi tıklayarak tabloyu bu sütuna göre sıralayı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. Varsayılan olarak Süre menüsü, tüm etkinliklerin gösterileceği anlamına gelen Tümü değerine ayarlanmıştır.

Yükleme, Komut Dosyası, Oluşturma veya Boya onay kutularını devre dışı bırakarak bu kategorilerdeki tüm etkinlikleri filtreleyebilirsiniz.

Zamanlamaları görüntüle

Zamanlamalar kanalında aşağıdakiler gibi önemli işaretçileri görüntüleyin:

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

Özet sekmesinde daha fazla ayrıntı görmek için bir işaretçi seçin. İşaretçinin zaman damgasını görmek için fareyle Zamanlamalar kanalının üzerine gelin.

Etkileşimleri görüntüle

Olası yanıt verme sorunlarını izlemek için Etkileşimler kanalındaki 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 bir kayıt başlatın.
3. Bir öğeyi (kahve) tıklayıp kaydı durdurun.
4. Zaman çizelgesinde Etkileşimler kanalını bulun.

Bu örnekte, Etkileşimler kanalı İşaretçi etkileşimini gösterir. Etkileşimlerde, işleme süresi sınırlarında giriş ve sunum gecikmelerini gösteren bıyıklar vardır. Giriş gecikmesi, işleme süresi ve sunu gecikmesi bilgilerini içeren bir ipucu görmek için fareyle etkileşimin üzerine gelin.

Etkileşimler kanalı, 200 milisaniyeden uzun etkileşimler için Sonraki Boyamayla Etkileşim (INP) uyarılarını da Özet sekmesinde ve fareyle üzerine geldiğinizde bir ipucunda gösterir:

Etkileşimler kanalı, 200 milisaniyeden uzun süren etkileşimleri sağ üst köşesinde kırmızı bir üçgenle işaretler.

GPU etkinliğini görüntüle

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

Kafes etkinliğini göster

Kafes etkinliğini Thread Pool bölümünde görüntüleyebilirsiniz.

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

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 gerçek zamanlı FPS tahmini için FPS ölçer'i kullanın. FPS sayacıyla saniyedeki kare sayısını gerçek zamanlı olarak görüntüleme bölümüne bakın.

Çerçeveler bölümü

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

hakkında daha fazla bilgi içeren ipucunu görüntülemek için fareyle bir çerçevenin üzerine gelin.

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

Çerçeveler bölümünde dört kare türü gösterilebilir:

1. Boşta ç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 çerçeve (seyrek geniş çizgi çizgisi deseni olan 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ığı çalışmasının (tuval animasyonu) geciktiğinde ancak birleştirici iş parçacığının (kaydırma) zamanında olduğu durumlarda.
4. Atlanmış çerçeve (yoğun düz çizgi desenli kırmızı). Chrome, çerçeveyi makul bir süre içinde oluşturamıyor.

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

Özet sekmesinde bir çerçeveyle ilgili daha fazla bilgi görüntülemek için ilgili kareyi tıklayın. Geliştirici Araçları, seçilen kareyi mavi renkle gösterir.

Ağ isteklerini görüntüle

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

İstekler aşağıdaki gibi renklerle kodlanmıştır:

• HTML: Mavi
• CSS: Mor
• JS: Sarı
• Resimler: Yeşil

Bir istekle ilgili daha fazla bilgi görüntülemek için Özet sekmesinde isteği tıklayın. Önceki örnekte, Özet sekmesinde seçilen yeşil istekle ilgili bilgiler görüntülenmektedir.

Bir isteğin sol üst tarafındaki koyu mavi kare bunun daha yüksek öncelikli bir istek olduğu anlamına gelir. Daha açık mavi bir kare daha düşük öncelikli anlamına gelir. Önceki örnekte, seçilen istek yüksek önceliğe sahiptir ve üstündeki mavi istek en yüksek önceliğe sahiptir.

Özet bölümü, İlk Öncelik ve (son) Öncelik alanlarını içerir. Bunların 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 bölümüne bakın.

Önceki örnekte, www.google.com isteği solda bir çizgi, ortada koyu bir kısım ile aydınlık bir kısmı olan bir çubuk ve sağda bir çizgiyle temsil edilmektedir. Bir sonraki ekran görüntüsünde, Ağ panelinin Zamanlama sekmesinde aynı isteğin karşılık gelen gösterimi gösteriliyor. Bu iki gösterimin birbiriyle nasıl eşleştiği aşağıda açıklanmıştır:

• Sol satırda, Connection Start etkinlik grubuna kadar olan her şey (dahil) gösterilir. Diğer bir deyişle, Request Sent öncesi her şey, özeldir.
• Çubuğun ışıklı kısmı Request Sent ve Waiting (TTFB).
• Çubuğun karanlık kısmı Content Download.
• Doğru satır, esasen ana iş parçacığını beklerken harcanan süredir. Bu, Zamanlama sekmesinde temsil edilmez.

Bu örnekte www.google.com isteğinin çizgi çubuğu temsili gösterilmektedir.

Bu örnekte www.google.com isteğinin Zamanlama sekmesi temsili gösterilmektedir.

Bellek metriklerini göster

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

Geliştirici Araçları, Özet sekmesinin üzerinde yeni bir Bellek grafiği gösterir. NET grafiğinin altında HEAP adlı yeni bir grafik de vardır. HEAP grafiği, Bellek grafiğindeki JS Yığın 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şleşir. Kategoriyi grafikte gizlemek için onay kutusunu devre dışı bırakın.

Grafikte yalnızca seçilen kaydın bulunduğu bölge gösterilir. Önceki örnekte, Bellek grafiğinde yalnızca kaydın başlangıcındaki bellek kullanımını (yaklaşık 1.000 ms'ye kadar) gösterir.

Kaydın 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 olur. 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 ya da sağa sürükleyin. Geliştirici Araçları, seçiminizin alt kısmındaki bu bölümün ne kadar sürdüğünü 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ü göster

Ekran görüntülerini nasıl etkinleştireceğinizi öğrenmek için Kayıt sırasında ekran görüntüsü alma bölümüne bakın.

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.

Kareler bölümünde bir kareyi tıklayarak da ekran görüntülerini 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, Özet sekmesindeki Kareler bölümünde tıkladığınızda 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ıklamanızın ardından yakınlaştırılmış bir ekran görüntüsü gösterilmektedir.

Katman bilgilerini görüntüleme

Bir çerçeveyle ilgili gelişmiş katmanlar bilgilerini görüntülemek için:

1. Gelişmiş boyama enstrümantasyonunu etkinleştirin.
2. Çerçeveler bölümünde bir kare seçin. Geliştirici Araçları, katmanlarıyla ilgili bilgileri Etkinlik Günlüğü sekmesinin yanındaki yeni Katmanlar sekmesinde görüntüler.

Diyagramda bir katmanı vurgulamak için fareyle katmanın üzerine gelin.

Bu örnekte, siz üzerine geldiğinizde #39 numaralı katman vurgulanmış olarak 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 analizini iş başında görün:

Boya profil aracını göster

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 Paint etkinliği seçin.

Oluşturma sekmesini kullanarak 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 sayacıyla saniyedeki kare sayısını gerçek zamanlı olarak görüntüleme

Çerçeve 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ıştırılırken gerçek zamanlı FPS tahmini sağlar.

Kare oluşturma istatistikleri konusuna bakın.

Yanıp sönen boya ile boyama etkinliklerini gerçek zamanlı olarak görüntüleyin

Sayfadaki tüm boyama etkinliklerini gerçek zamanlı olarak görüntülemek için Yanıp Sönen Boya özelliğini kullanın.

Yanıp sönen boya bölümüne bakın.

Katman Kenarlıkları bulunan katmanların yer paylaşımını görüntüleme

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

Katman kenarlıkları konusuna bakın.

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

Kaydırmayla ilgili olarak sayfa performansına zarar verebilecek etkinlik işleyicilerin bulunduğu sayfa öğelerini tanımlamak için Kaydırma Performansı Sorunları'nı kullanın. Geliştirici Araçları, sorunlu olabilecek öğeleri turkuaz renkle ana hatlarıyla belirliyor.

Kaydırma performansı sorunları bölümünü inceleyin.