Bu size tanıdık geldi mi? Chrome Geliştirici Araçları'nda bir performans sorunuyla ilgili hata ayıklama işlemi yapıyorsunuz ancak Performans panelindeki çok fazla bilgi, yalnızca en alakalı ve işlem yapılabilir bölümlere odaklanmayı zorlaştırıyor. Zaman çizelgesinin uzunluğu, alev grafiğinin derinliği ve birçok farklı veri kanalının genişliği nedeniyle gezinmek zor olabilir. Performans paneli ne kadar güçlü olursa olsun, kullanışlılığının kullanılabilirlik pahasına olması gerekmez.
Chrome'un performans araçlarını iyileştirmeye yönelik çalışmalarımızın bir parçası olarak kısa süre önce bilgi yoğunluğunu azaltmayı ve geliştiricilerin iş akışlarını özelleştirmelerine yardımcı olmayı amaçlayan üç yeni özellik kullanıma sunduk:
- Zaman çizelgesinin alakasız bölümlerini gizleme
- Alev grafiğinin alakasız bölümlerini gizleme
- Alakasız parçaları gizleme
Bu yayında, bu özelliklerin her birine daha yakından bakacak ve yalnızca en önemli bilgilere odaklanmak için bunları nasıl kullanabileceğinizi göstereceğiz.
Zaman çizelgesinin alakasız bölümlerini gizleme
Web performansı milisaniye ölçeğinde çalıştığından, performans kaydınız yalnızca birkaç saniye uzunluğunda olsa bile yerinizi kaybetmeniz için birçok fırsat vardır.
Chrome 122'de ekmek kırıntıları oluşturma özelliğini ekledik. Bu özellik, zaman çizelgesinin sınırlarını sabitlemenize olanak tanır. Böylece, yalnızca sizin belirlediğiniz bir ilgi alanı içinde yakınlaştırma veya kaydırma yapabilirsiniz. Zaman çizelgesini bu şekilde kısıtlamak, özellikle yanıt verme sorunlarını gidermeye çalışıyorsanız yararlı olabilir. Böylece, dikkatinizi tek bir etkileşime veya sorunlu uzun bir göreve odaklayabilirsiniz.
Önceki ekran görüntüsünde, komut dosyası yürütme ve sunu çalışması gibi ana iş parçacığı etkinliğini görselleştiren zaman çizelgesi genel bakışına yakın bir görünüm gösterilmektedir. İşaretçiyi üzerine getirdiğinizde, zaman çizelgesinin sınırlarını geçerli pencereye ayarlayacak yeni bir düğme görünür. Düğme, milisaniye cinsinden zaman aralığının genişliği ve simgesiyle etiketlenir. Zaman çizelgesi genel bakışı üzerinde bulunan içerik haritaları, zaman aralığının boyutuna göre etiketlenir.
Bu özelliği kullanmak için:
- Zaman çizelgesini yakınlaştırıp ilginizi çeken bir alana kaydırın.
- Zaman çizelgesine genel bakış bölümündeki büyüteç simgesini tıklayarak zaman çizelgesini sabitleyin ve bir içerik haritası ayarlayın.
- İç içe yerleştirilmiş bir ilgi alanını yakınlaştırmak için bu işlemi gerektiği kadar tekrarlayın.
- Önceki ilgi alanlarına veya zaman çizelgesinin tamamına dönmek için içerik haritasını tıklayın.
Zaman çizelgesini kırpmak, yanlışlıkla zaman çizelgesinin dışına çıkıp alakasız bir bölüme kaydırma yapmamanızı sağlar. Ancak gerektiğinde, uzaklaştırmak için içerik haritasını tıklayabilirsiniz. Zaman çizelgesi genel bakışı, diğer parçalarla uyumlu kalır. Bu sayede, zorunlu yeniden akımlar gibi performans fırsatlarını tespit etmek ve alev grafiğinde bunların temel nedenini belirlemek çok daha kolay olabilir.
Alev grafiğinin alakasız bölümlerini gizleme
Ana mesaj dizisinin etkinliğini analiz etmek kolay bir iş değildir. Performans panelinin bu kısmı, çağrı yığınlarının çok uzun ve ince olabileceğinden alev grafiği olarak bilinir. Bazı uç durumlarda bu gruplar o kadar hantal olabilir ki tümünü anlamakta ve optimize etmeye çalıştığınız şeye odaklanmakta zorlanabilirsiniz.
Chrome 124'ten itibaren, alev grafiğinde hangi girişlerin gizleneceğini tam olarak özelleştirebilirsiniz. Böylece, en fazla işlem yapılabilir bilgilere odaklanabilirsiniz.
Alev grafiğinde bir işlevi sağ tıkladığınızda, girişleri gizlemeyle ilgili çeşitli seçeneklerin bulunduğu bir içerik menüsü gösterilir:
- İşlevi gizle: Seçilen işlevi alev grafiğinden kaldırır. Alt öğeleri, ebeveyn işlevinin hemen ardından görünecek şekilde yukarı taşınır.
- Alt öğeleri gizle: Seçilen işlevdeki tüm alt öğeleri gizleyerek alev grafiğini budayın.
- Tekrar eden alt öğeleri gizle: Seçilen işlevin tüm örneklerini alev grafiğinin geri kalanından kaldırır.
Bir işlev seçiliyken kullanabileceğiniz birkaç faydalı klavye kısayolu da vardır:
- H: Seçilen işlevi gizle
- C: Seçilen işlevin alt öğelerini gizle
- R: Seçilen işlevin yığının sonraki kısımlarındaki örneklerini gizle
- U: Seçilen işlevin gizli alt öğelerini göster
Alakasız komut dosyalarını kalıcı olarak gizleme
Komut dosyasını yoksayılanlar listesine ekle seçeneği, seçili işlevi ve aynı komut dosyası dosyasında tanımlanan diğer tüm işlevleri alev grafiğinden gizler. Komut dosyası, DevTools hata ayıklayıcısının işlevleri atlamak ve komut dosyasından kaynaklanan istisnaları yoksaymak için kullandığı yoksayılanlar listesine de eklenir.
Yoksayılanlar listesine eklenen komut dosyaları kalıcı olduğundan yeni izlerde alev grafiğinde gizlenmeye devam eder. Kontrolünüz dışındaki komut dosyaları, yoksayılanlar listesi için iyi adaylardır. Öte yandan, işlevleri tek tek gizlemek mevcut izleme için geçicidir ve duruma bağlıdır. Örneğin, izlemenin daha kolay çalışmasını sağlamak için hantal bir yığın yinelenen işlev çağrısını gizlemek isteyebilirsiniz.
Yoksayılanlar listesini veya alev grafiğindeki diğer gizli işlevleri geri almak için seçili işlevin alt öğelerini veya izleme boyunca tüm gizli işlevleri sıfırlamak üzere bağlam menüsünü kullanabilirsiniz. Gizli alt öğeleri olan işlevler, ▼ simgesiyle ek açıklamaya sahiptir. Bu simge, tıklandığında alt öğeleri de sıfırlar.
Alev grafiğinden kaldırabileceğiniz gereksiz derinlik ve karmaşıklık, grafiği çok daha kullanılabilir hale getirir. Gerekirse hangi girişleri göreceğinizi özelleştirebilme özelliği, dikkatinizi mevcut görevle ilgili en önemli bilgilere odaklamanıza yardımcı olacak ergonomik bir iyileştirmedir.
Alakasız parçaları gizleme
Ana iş parçacığı etkinliği, Performans panelinin yalnızca bir parçasını oluşturur. Performans panelindeki kanallar, bir sürecin etkinliğini görselleştirir ve hata ayıklama işlemine yardımcı olmak için hepsinin ortak bir zaman çizelgesine göre düzenlenir. Ana kanala ek olarak, sayfanın kullandığı diğer alt çerçeveler, iş parçacığı ve işleyiciler için ayrı kanallar ve ayrıca Ağ, Çerçeveler, Animasyonlar ve Etkileşimler kanalları bulunur. Daha da fazla kanal, IO, GPU ve Compositor gibi alt düzey Chrome işlemlerinin etkinliğini işaretler. Bu çok fazla bilgi. Ancak çoğu performans iş akışında, aynı anda yalnızca birkaç kanaldan gelen bilgilerle ilgilenirsiniz.
Chrome 125'ten itibaren, gereksiz parçaları gizlemenizi veya istediğiniz gibi yeniden düzenlemenizi sağlayan yeni bir yapılandırma modu mevcuttur. Örneğin, yavaş bir etkileşimi optimize ediyorsanız Etkileşimler, Ana ve GPU kanalları dışındaki her şeyi gizlemeyi seçebilirsiniz.
Parçaları düzenlemek için herhangi bir parçanın adını sağ tıklayın ve Parçaları yapılandır…'ı seçin. Bu işlem, parçaları tek tek gösterebileceğiniz, gizleyebileceğiniz veya yeniden düzenleyebileceğiniz yapılandırma modunu açar. Tercihlerinizi kaydetmek için Kanalları yapılandırmayı tamamla düğmesini tıklayın.
Parçaları yapılandırarak Performans panelinin iş akışınıza kritik bilgileri sunma şeklini kontrol edebilirsiniz. Etkinliği alakasız işlemlerden gizlemek ve parçaları, ihtiyacınız olan verilere en kolay şekilde erişmenizi sağlayacak şekilde taşımak için bu ayarları kullanabilirsiniz.
Özet
Bu üç özellik, performans iş akışlarınızı özelleştirmek için güçlü ve ergonomik yeni kontroller sunar. Bu özellikleri kullanarak ve gürültü miktarını azaltarak, aradığınızı bulmak ve verilerden anlam çıkarmak için kendinizi çok daha iyi bir konuma yerleştirirsiniz.
Hangi özelliklerin iyi çalıştığını veya deneyiminizin nasıl iyileştirilebileceğini öğrenmekten memnuniyet duyarız. Sorularınız veya genel geri bildirimleriniz varsa @ChromeDevTools ile iletişime geçebilirsiniz. Bir sorunla karşılaşırsanız veya yeni özelliklerle ilgili öneriniz varsa bu açık sorun hakkında yorum bırakın.
Bu, Chrome'un performans araçlarını iyileştirme girişimimizin yalnızca başlangıcı. Performans panelinin kullanımını kolaylaştırmak ve her zamankinden daha güçlü hale getirmek için üzerinde çalıştığımız diğer tüm özellikleri paylaşmaktan heyecan duyuyoruz. Bir sonraki blog yayınımızda, yeni özellik grubunu burada, Geliştiriciler için Chrome blogunda paylaşacağız. Bu sırada, DevTools ve Chrome'daki yeniliklerden haberdar olmak için Chrome'daki Yenilikler sayfasına göz atın.