Yayınlanma tarihi: 19 Mart 2025
Chrome performans araçlarını iyileştirme girişimi hakkındaki kapsamlı haberlerimize devam ediyoruz. Bu kapsamda, DevTools Performans paneliyle etkileşime geçme şeklinizde daha fazla iyileştirme olduğunu duyurmaktan mutluluk duyuyoruz. Bu iyileştirmeler, performans izlerinde gezinme ve alakasız gürültüyü azaltma özelliğini geliştirmek için tasarlanmıştır. Böylece performans sorunlarını hızlıca tespit edip çözmeye odaklanabilirsiniz.
İyileştirilmiş gezinme
Birçok kullanıcıdan, Performans panelinde kaydırma ve yakınlaştırma işlemlerinin sezgisel olmayabileceğine dair geri bildirimler aldık. Uzun süredir uygulamayı kullananların çoğu bu harekete alışmış olsa da birçok kullanıcı, kaydırma hareketinin kaydırma yapması gerektiğini, izlemeyi yakınlaştırıp uzaklaştırmaması gerektiğini düşünür.
bölümündeki yeni bir seçenek, mevcut "Klasik" kaydırma ve yeni "Modern" yaklaşım arasında geçiş yapmanıza olanak tanır.
Klasik modda, kaydırma (dokunmatik yüzey veya kaydırma tekerleği ile) yakınlaştırmaya ve uzaklaştırmaya devam eder. Üst karakter tuşunu basılı tutarken kaydırarak da alev grafiğini yukarı ve aşağı kaydırabilirsiniz.
Yeni Modern modda bu işlemler tersine çevrilir: Kaydırma işlemi artık alev grafiğini kaydırırken, Üst Karakter ve kaydırma işlemi yakınlaştırma ve uzaklaştırma yapar.
Klavye kısayolları (ör. izlemede gezinmek için WASD tuşlarını kullanmak) aynı şekilde çalışmaya devam eder.
Çift yönlü iletişime genel bakış
Performans panelinin üst kısmında, zaman çizelgesi genel bakışının bir parçası olan CPU grafiği bulunur. İzleme kaydı sırasındaki CPU kullanımının tahminlerini iş türüne göre (ör. komut dosyası yürütme için turuncu, oluşturma işlemleri için mor) ayrılmış olarak gösterir.
Bu, belirli sorunları incelemek için daha da yakınlaştırırken bile zaman çizelgesinin tamamının üst düzey bir özetini sunarak izlemeye genel bir bakış (bazen küçük harita olarak da adlandırılır) sağlar.
Ancak, esas olarak izlemeye bakarken küçük haritada tam yerinizi kaybetmek kolay olabilir (veya tam tersi). Bu nedenle, genel bakışı yakınlaştırılmış görünüme bağlamaya yardımcı olan yeni özellikler kullanıma sunduk. Artık genel bakış üzerine geldiğinizde, alev grafiğinde ilgili dikey bir çizgi görünür. Bu çizgi, alev grafiğinde aynı zamanı işaret eder:
Benzer şekilde, fareyle akış grafiğindeki girişlerin üzerine geldiğinizde artık CPU grafiğinin ilgili kısmı vurgulanır. Bu, CPU'daki ani artışlara tam olarak hangi görevlerin neden olduğunu görmek için mükemmel bir yöntemdir.
İzi filtreleme
Performans sorunlarında hata ayıklama genellikle büyük miktarda veriyi incelemeyi içerir. En alakalı bilgilere odaklanmanıza yardımcı olmak için gereksiz bilgileri filtreleme özelliğini iyileştirdik.
Geçen yıl, Performans panelinde DevTools'un yoksayma listesine komut dosyası ekleme özelliğini kullanıma sunduk. Bu sayede, alev grafiğinde daha az alakalı girişler filtrelendi. Örneğin, sayfanızdaki bir bileşenin performansıyla ilgili hata ayıklama yapıyorsanız çerçevenizin çağrı yığınının, performans panelinde yukarı ve aşağı kaydırmanızı gerektirecek kadar derin olması dikkatinizi dağıtabilir. Ayrıca, önemli bölümlere odaklanmak için genellikle bu çağrı yığınının büyük bir kısmını daraltmak istersiniz.
Alev grafiğindeki bir girişi sağ tıklayıp Komut dosyasını yoksayma listesine ekle'yi seçebilirsiniz. Bu işlem, komut dosyasını DevTools yoksayma listesine ekler ve bu listedeki tüm girişleri alev grafiğinde daraltır.
Ancak artık yoksayma listesini doğrudan Performans panelinin üst kısmındaki seçeneğinden manuel olarak da düzenleyebilirsiniz. Yoksayılanlar listesindeki normal ifade, DevTools'ta paylaşılır. Bu nedenle, eşleşen komut dosyaları Kaynaklar panelinde hata ayıklanırken atlanır ve flame grafiğinde tek girişler halinde daraltılır. Ayrıca, liste DevTools oturumlarında kalıcı olur.
Bu sayede, hangi dosyaların yoksayılacağı üzerinde ayrıntılı kontrol sahibi olur ve çalışırken kuralları etkinleştirip devre dışı bırakmak için kullanışlı bir yer elde edersiniz.
Üçüncü taraf komut dosyalarının görünürlüğünü azaltma
Üçüncü taraf komut dosyaları web sitelerinde yaygındır ancak genellikle kontrolümüz dışında olabilir veya belirli bir hata ayıklama oturumuyla alakasız olabilir. Performans panelinin üst kısmındaki yeni 3. tarafları karart seçeneği, zaman çizelgesinde üçüncü taraf komut dosyasını ve ağ etkinliğini devre dışı bırakarak görsel dağınıklığı azaltır ve birinci taraf performans katkılarına odaklanmanıza olanak tanır.
Ancak bazen belirli bir üçüncü tarafa odaklanmak veya hatta yalnızca kendi API'nizden veya CDN'nizden gelen katkıları kullanmak gibi daha da fazla kontrole sahip olmak istersiniz. Özet sekmesindeki panelin en altında, DevTools'un sayfada bulabileceği birinci ve üçüncü tarafların dökümü yer alır. Fareyle listedeki her bir öğenin üzerine geldiğinizde, ilgili öğeyle ilişkili olmayan etkinlikler devre dışı bırakılır.
Sonuç
Bu yeni özellikler, Performans panelinde daha iyi gezinmenize ve önemli olan izleme bölümlerine odaklanmak için gereksiz bilgileri filtrelemenize yardımcı olacaktır. Bu özellikleri deneyin ve nasıl daha da iyileştirilebileceğini veya görmek istediğiniz diğer iyileştirmeleri bize bildirin.