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

Kayce Basques

Şu anda Canary olan Chrome 58'de, Zaman Çizelgesi paneli Performans paneli, Profiller paneli Bellek paneli olarak, Profiller panelindeki JavaScript CPU Profili Kaydet özelliği ise daha gizli bir konuma taşındı.

Uzun vadeli hedef, eski JavaScript CPU Profil Aracı'nı kaldırmak ve herkesin yeni iş akışıyla çalışmasını sağlamaktır.

Bu küçük geçiş kılavuzunda, Performans panelinde bir JS profilinin nasıl kaydedileceği ve Performans panelinin kullanıcı arayüzünün, alışkın olduğunuz eski iş akışıyla nasıl eşlendiği gösterilmektedir.

Eski JavaScript CPU profil aracına erişme

Profiller panelinde daha önce bulunan eski "JavaScript CPU Profilini Kaydet" iş akışını tercih ediyorsanız şu şekilde erişmeye devam edebilirsiniz:

  1. Geliştirici Araçları ana menüsünü açın.
  2. Diğer araçlar > JavaScript Profiler'ı seçin. Eski profil oluşturucu, JavaScript Profil Aracı 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üklemesinde profil oluşturmak için Sayfa Yüklemesini Kaydet seçeneğini tıklayın. Geliştirici Araçları kaydı otomatik olarak başlatır ve ardından sayfanın yüklenmesinin tamamlandığını algıladığında otomatik olarak durur.
    • Çalışan bir sayfanın profilini çıkarmak için Kaydet'i tıklayın, profilini çıkarmak istediğiniz işlemleri gerçekleştirin ve işiniz bittiğinde Durdur'u tıklayın.

Eski iş akışı yeni iş akışı ile nasıl eşlenir?

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

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

Kalın (Aşağıdan Yukarı) görünümü, Aşağıdan Yukarı sekmesinde mevcuttur:

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

Ağaç (Yukarıdan Aşağı) görünümü, Çağrı Ağacı sekmesindedir:

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

Gözümüzden kaçan bir özellik varsa veya bu makaleyle ilgili başka sorularınız varsa Twitter'da @ChromeDevTools hesabınızı pingleyin veya doküman depomuzda bir GitHub sorunu açın.