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

Kayce Baskleri
Kayce Baskçalar
Twitter GitHub Glitch

Şu anda Canary olan Chrome 58'de Zaman Çizelgesi paneli Performans paneli olarak yeniden adlandırıldı, Profiller paneli Bellek paneli olarak yeniden adlandırıldı ve Profiller panelindeki JavaScript CPU Profilini Kaydet özelliği 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 taşıma kılavuzunda, Performans panelinde bir JS profilini nasıl kaydedeceğiniz ve Performans panelindeki kullanıcı arayüzünün alışkın olduğunuz eski iş akışıyla nasıl eşleştiği gösterilmektedir.

Eski JavaScript CPU profil oluşturucusuna erişme

Profiller panelinde bulunan eski "JavaScript CPU Profili Kaydı" iş akışını tercih ederseniz bu iş akışına aşağıdaki şekilde erişmeye devam edebilirsiniz:

  1. Geliştirici Araçları ana menüsünü açın.
  2. Diğer araçlar > JavaScript Profil Aracı'nı seçin. Eski profil aracı, JavaScript Profiler 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:

    • Bir sayfanın yüklenmesi için profil oluşturmak üzere Sayfa Yüklemeyi Kaydet'i tıklayın. Geliştirici Araçları, kaydı otomatik olarak başlatır ve sayfanın yüklenmesinin bittiğini algıladığında otomatik olarak durur.
    • Çalışan bir sayfanın profilini oluşturmak için Kaydet'i tıklayın, profil oluşturmak istediğiniz işlemleri yapın ve tamamladığınızda Durdur'u tıklayın.

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

Eski iş akışının Grafik görünümünde, 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ışındaki flame grafiği ile yeni iş akışındaki eşleme.
Şekil 2. Eski iş akışındaki (sol) ve yeni iş akışındaki (sağ) flame grafiği arasında eşleme.

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

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

Ağaç (Yukarıdan Aşağı) görünümü Çağrı Ağacı sekmesinde de mevcuttur:

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

Twitter'da @ChromeDevTools'a ping gönderin veya herhangi bir özelliği gözden kaçırdıysak veya bu makaleyle ilgili başka sorularınız olursa dokümanlar depomuzdan GitHub sorunu açın.