Chrome Geliştirici Araçları - Chrome 58'de JavaScript CPU Profili Oluşturma

Kayce Basques

Şu anda Canary sürümünde olan Chrome 58'de Zaman Çizelgesi paneli Performans paneli, Profiller paneli ise Bellek paneli olarak yeniden adlandırıldı. Ayrıca Profiller panelindeki JavaScript CPU Profili'ni Kaydet özelliği daha gizli bir konuma taşındı.

Uzun vadeli hedefimiz, eski JavaScript CPU Profiler'ı kaldırmak ve herkesin yeni iş akışı ile çalışmasını sağlamaktır.

Bu küçük taşıma rehberinde, Performans panelinde JS profilinin nasıl kaydedileceği ve Performans panelinin kullanıcı arayüzünün alıştığınız eski iş akışıyla nasıl eşlendiği gösterilmektedir.

Eski JavaScript CPU profil aracına erişme

Profiller panelinde bulunan eski "JavaScript CPU Profili Kaydetme" iş akışını tercih ediyorsanız bu iş akışına aşağıdaki şekilde erişebilirsiniz:

  1. Geliştirici Araçları ana menüsünü açın.
  2. Diğer araçlar > JavaScript Profil Aracı'nı seçin. Eski profilleyici, JavaScript Profilleyici adlı yeni bir panelde açılır.

JS profili kaydetme

  1. Geliştirici Araçları'nı açın.

  2. Performans sekmesini tıklayın.

    Chrome Geliştirici Araçları performans paneli.
    Şekil 1. Performans paneli.

  3. Aşağıdaki yöntemlerden birini kullanarak kayıt yapın:

    • Sayfa yükleme profili oluşturmak için Sayfa Yüklemesini Kaydet'i tıklayın. Geliştirici Araçları, kaydı otomatik olarak başlatır ve sayfanın yüklenmesi bittiğini algıladığında otomatik olarak durdurur.
    • Çalışan bir sayfanın profilini oluşturmak için Kaydet'i tıklayın, profilini oluşturmak istediğiniz işlemleri gerçekleştirin ve işlemi tamamladığınızda Durdur'u tıklayın.

Eski iş akışı yenisiyle nasıl eşlenir?

Aşağıdaki ekran görüntüsünde, eski iş akışının Grafik görünümünde CPU kullanımı genel bakış grafiğinin (üst ok) ve alev grafiğinin (alt ok) yeni iş akışında konumu gösterilmektedir.

Eski iş akışında ve yeni iş akışında alev grafiği arasında eşleme.
Şekil 2. Eski iş akışında (solda) ve yeni iş akışında (sağda) yanan alev grafiği arasında eşleme.

Ağır (Aşağıdan Yukarıya) görünümü, Aşağıdan Yukarıya sekmesinde kullanılabilir:

Eski iş akışında Aşağıdan Yukarıya görünüm ile yeni iş akışında Aşağıdan Yukarıya görünüm arasında eşleme.
Şekil 3. Eski iş akışında (solda) ve yeni iş akışında (sağda) Aşağıdan Yukarıya görünümü arasında eşleme.

Ağaç (Yukarıdan Aşağı) görünümü ise Arama Ağacı sekmesinde kullanılabilir:

Eski iş akışında ağaç görünümü ile yeni iş akışında ağaç görünümü arasında eşleme.
Şekil 4. Eski iş akışında (solda) ve yeni iş akışında (sağda) ağaç görünümü arasında eşleme.

Atladığımız özellikler varsa veya bu makaleyle ilgili başka sorularınız varsa Twitter'da @ChromeDevTools hesabını etiketleyin ya da dokümanlar veri havuzumuzdaki GitHub sorununu açın.