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, flame grafiğinin derinliği ve birçok farklı veri yolunun genişliği arasında gezinmek zor olabilir. Performans paneli son derece güçlü olsa da kullanışlılığından ödün vermemek gerek.
Chrome'un performans araçlarını iyileştirme girişimi kapsamında, bilgi yoğunluğunu azaltmayı ve geliştiricilerin iş akışlarını özelleştirmelerine yardımcı olmayı amaçlayan üç yeni özelliği kısa süre önce 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 cinsinden çalışır. Bu nedenle performans kaydınız yalnızca birkaç saniye uzunluğunda olsa bile yerinizi kaybetme ihtimaliniz vardır.
Chrome 122'de ekmek kırıntıları oluşturma özelliğini ekledik. Bu özellik, zaman çizelgesinin sınırlarını, yalnızca sizin tarafınızdan belirlenen ilgi çekici bir alanın içinde yakınlaştırma veya kaydırma yapabilmenizi sağlayacak şekilde sınırlandırmanızı sağlar. 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 sunum çalışması gibi ana ileti dizisi etkinliğini görselleştiren zaman çizelgesine genel bakışın yakından görünümü yer alıyor. İşaretçiyi üzerinde tuttuğunuzda, 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. Yine de gerektiğinde yeniden uzaklaştırmak için içerik haritalarını tıklayabilirsiniz. Zaman çizelgesi genel bakışı, diğer parçalarla uyumlu kalır. Bu, zorunlu yeniden düzenlemeler gibi performans fırsatlarını tespit etmeyi ve flame grafiğinde temel nedenleri belirlemeyi çok daha kolay bir hale getirebilir.
Flame grafiğinin alakasız bölümlerini gizleme
Ana iş parçacığı etkinliğini analiz etmek kolay bir iş değildir. Performans panelinin bu bölümü, çağrı yığınlarının ne kadar uzun ve ince olabileceği için flame grafiği olarak bilinir. Bazı aşırı durumlarda bu gruplar o kadar kontrolsüz olabilir ki, her şeyi anlamak ve optimize etmek istediğiniz şeye odaklanmak zor olabilir.
Chrome 124'ten itibaren, flame grafiğinde tam olarak hangi girişlerin gizleneceğini özelleştirerek üzerinde işlem yapabileceğiniz en yüksek bilgilere odaklanabilirsiniz.
Flame grafiğindeki bir işlevi sağ tıkladığınızda, girişleri gizlemeye yönelik çeşitli seçeneklerin bulunduğu bir içerik menüsü görünür:
- İşlevi gizle: Seçili işlevi flame grafiğinden kaldırın. Alt öğeleri, ebeveyn işlevinin hemen ardından görünecek şekilde yukarı taşınır.
- Alt öğeleri gizle: Seçili işlevde, flame grafiğini ayıklayarak tüm alt öğelerini gizleyin.
- 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çili 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çilen işlevi ve aynı komut dosyası dosyasında tanımlanan diğer tüm işlevleri alev grafiğinden gizler. Komut dosyası aynı zamanda yoksayılanlar listesine de eklenir. Geliştirici Araçları hata ayıklayıcısı, işlevlerin üzerinden geçmek ve komut dosyasından kaynaklanan istisnaları göz ardı etmek için kullanır.
Yoksayılanlar listesine eklenen komut dosyaları kalıcıdır. Böylece, yeni izlerdeki flame grafiğinde gizlenmeye devam ederler. Kontrolünüz dışındaki komut dosyaları, yoksayılanlar listesi için iyi birer adaydır. Diğer yandan, tek tek işlevlerin gizlenmesi mevcut iz için geçicidir ve daha çok duruma bağlıdır. Örneğin, izinle çalışmayı kolaylaştırmak için uğraştırıcı bir yinelemeli işlev çağrıları yığını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.
Yangın grafiğinden çıkarabileceğiniz herhangi bir gereksiz derinlik ve karmaşıklık, onu çok daha kullanışlı hale getirecektir. 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ı gizle
Ana ileti dizisi etkinliği, Performans panelinin yalnızca bir kanalı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 çizelgesiyle uyumlu olması gerekir. Ana kanala ek olarak, sayfa tarafından kullanılan diğer alt çerçeveler, iş parçacıkları ve çalışanların yanı sıra Ağ, Çerçeveler, Animasyonlar ve Etkileşimler kanalları için ayrı kanallar vardır. Daha da fazla parça; IO, GPU ve Birleştirici gibi alt düzey Chrome işlemlerinin etkinliğini gösterir. 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, tek tek kanalları 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.
Kanalları yapılandırmak, Performans panelinin iş akışınız için kritik bilgileri nasıl sunacağını kontrol etmenizi sağlar. 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 yeni ergonomik 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.
Nelerin iyi gittiğini veya deneyiminizin nasıl daha iyi hale getirilebileceğini öğrenmek isteriz. Herhangi bir sorunuz veya genel geri bildiriminiz varsa @ChromeDevTools adresinden bizimle 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 özellik grubunun tanıtıldığı bir sonraki yayınımızı burada, Geliştiriciler için Chrome blogunda yayınlayacağız. Bu sırada, DevTools ve Chrome'daki yeniliklerden haberdar olmak için Chrome'daki Yenilikler sayfasına göz atın.