JavaScript Profil Aracı paneli Chrome 124'te kullanımdan kaldırılıyor. Bundan sonra, Node.js CPU performansını görüntülemek için Performans panelini kullanın.
JavaScript Profil Aracı'nı neden kullanımdan kaldırıyoruz? (JS Profil Aracı)
Chrome 58'den itibaren Geliştirici Araçları ekibi, JS Profiler'ı zaman içinde kullanımdan kaldırmayı planlıyordu. Bunun birkaç nedeni vardır:
- Artık aktif olarak geliştirilmiyor. JS Profiler birkaç yıldır önemli bir güncelleme almamıştır ve ekibin bu profili geliştirmeye devam etmek için gereken kaynakları bulunmamaktadır.
- Daha kolay bir profil oluşturma deneyimi. Performans paneli zaten her türlü performans analizi için kullanılmaktadır. JavaScript CPU performansını Node.js'de profilleyebilme özelliği sayesinde, tutarlılık ve verimlilik için her şeyi tek bir yerde toplamak mantıklıdır.
- Performans paneli daha iyidir. Yeni özellikler ve iyileştirmeler ekleyerek ve Google Analytics'i performans analizi için daha güçlü ve kullanıcı dostu bir araç haline getirerek geliştirmeye devam ediyoruz.
Desteğin sonlandırılmasından sonra ne yapmanız gerekir?
JavaScript CPU performansını belirleme hakkında daha fazla bilgi edinmek için Node.js profili profilini inceleyin.
Performans panelini kullanmayla ilgili bazı ipuçlarını aşağıda bulabilirsiniz:
- Performans sorunlarını belirlemek için flame grafiğini kullanın.
- İşlevler arasındaki ilişkileri anlamak için Aşağıdan yukarıya ve Çağrı ağacı sekmelerini kullanın.
Kullanımdan kaldırma sürecini nasıl ele alabiliriz?
Geliştiricilerden geri bildirim almak amacıyla bir prototip geliştirdik ve GitHub'da herkese açık olarak Yorum İsteği (RFC) özelliğini yayınladık.
Ayrıca, Performans panelinin temel profil oluşturma ihtiyaçlarını karşıladığından emin olmak için prototipi test etmek üzere geliştirici uzmanlarıyla aktif bir şekilde iletişime geçerek endişeleri veya sorunları gideriyoruz.
Geliştiricilere, gerekli ayarlamaları yapıp benimsemeleri için yeterli zaman tanımak amacıyla JS Profiler'ı 4 aşamada aşamalı olarak kullanımdan kaldırıyoruz.
Önemli sorunlar ve bunları nasıl düzelttiğimiz
Aldığımız geri bildirimler arasında, en acil endişeleri üç ana soruna yoğunlaştı:
.cpuprofiledosya biçimini destekleme. JS Profiler farklı bir dosya biçimi kullanır. Performans paneli bunu desteklemelidir.- Yavaş yükleme hızı. Panelin yükleme hızı yavaş görünüyor ve profil oluşturma işlemini etkiliyor.
- JavaScript sanal makine seçici eksik. JavaScript sanal makine örneği seçicinin olmaması belirli senaryolarda profil oluşturma özelliklerini sınırlandırmıştır.
Şimdi bu sorunların her birini inceleyip nasıl düzelttiğimizi görelim.
Yavaş yükleme hızı
Geliştiriciler, Performans panelinin büyük veri dosyalarını yüklemesinin çok uzun sürdüğünü, hatta bazen çöktüğünü bildirdi.
Geliştirici Araçları'nı analiz etmek için Geliştirici Araçları'nı kullandık (buna "DevTools-on-DevTools" adını verdik). Sorunlar tespit ettik ve çeşitli optimizasyonlar yaptık:
Set,Arrayveri yapılarıyla değiştirildi.- Gereksiz
Mapveri yapıları kaldırıldı. - Bellek yığını kullanımını azaltmak için yinelemeli işlevler, yinelemeli (döngüler için) olarak yeniden düzenlendi.
Bu performans sorunlarını düzelterek büyük boyutlu dosyaların yüklenme hızını% 80 artırdık. 🎉
Şu blog yayınından öğrendiklerimizle ilgili daha fazla bilgi edinin: Performansı artırma ile% 400 daha hızlı Performans paneli.
Eksik JavaScript sanal makine seçici
İlk prototipte JavaScript sanal makine seçici eksikti. Geliştiriciler, ayrıntılı inceleme yapmak ve belirli bir sanal makine örneğini analiz etmeye odaklanmak için bu sanal makineden yararlanır.
Performans paneline JavaScript sanal makine seçicisi ekledik. Burada, kullanılabilir tüm JavaScript sanal makine örneklerinin yer aldığı bir açılır liste gösterilir. Bir örnek seçtiğinizde Performans paneli söz konusu örneğe ilişkin CPU profilini yükler.
cpuprofile dosya biçimini destekleme
Önceden, Performans paneli yalnızca izleme etkinlikleri dizisine sahip JSON dosyaları olan izleme dosyalarını destekliyordu.
Diğer yandan, JS Profiler JSON nesnesi içeren .cpuprofile uzantısına sahip dosyalar olan CPU profillerini destekler. Bu simgeler şu şekilde görünür:
{
// The list of profile nodes. First item is the root node.
nodes: ProfileNode[];
// Profiling start timestamp in microseconds.
startTime: number;
// Profiling end timestamp in microseconds.
endTime: number;
// Ids of samples at top nodes.
samples?: integer[];
// Time intervals between adjacent samples in microseconds.
// The first delta is relative to the profile startTime.
timeDeltas?: integer[];
}
Yeni iş akışı, geliştiricilerin mevcut cpuprofile öğesini analiz etmesini engellememelidir. Bu nedenle, Performans paneli artık hem izleme dosyalarını hem de CPU profillerini desteklemektedir. cpuprofile dosyasını Performans'a içe aktardığınızda dosya doğru şekilde yüklenir.
Perde arkasında, normal ifade kullanarak nesne yapısı farklılıklarını tespit ederiz. Dosya içeriği {"nodes":[ ile başlıyorsa bu bir CPU profilidir. Aksi takdirde bu bir izleme dosyasıdır.
İçerik türü tanımlandıktan sonra uygun şekilde işlenir. İzleme dosyası için etkinlikleri ayrıştırır ve bir zaman çizelgesi oluştururuz. CPU profili için JSON nesnesini ayrıştırır ve bir flame grafiği oluştururuz.
Sonuç
Hem web sitelerine hem de Node.js ve Deno uygulamalarında CPU performansının profilini çıkarmaya yönelik daha basit bir profil oluşturma deneyimi için Performans panelini kullanın.
Geri bildiriminiz veya önerileriniz varsa bu hataya yorum ekleyin ya da aşağıdaki seçeneklerden birini kullanarak bize ulaşın.
Önizleme kanallarını indirme
Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!
Chrome Geliştirici Araçları ekibiyle iletişim kurma
Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.
- crbug.com adresinden öneri veya geri bildirim gönderin.
- Geliştirici Araçları'nda, Diğer seçenekler
> Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin. - @ChromeDevTools adresine tweet gönderin.
- Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.