Bunlar size tanıdık geliyor mu? Chrome Geliştirici Araçları'nda performansla ilgili bir sorunu ayıklı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 parçasının genişliği arasında gezinmek zor olabilir. Performans paneli son derece güçlü olsa da sunduğu kullanışlılık pahasına kullanılabilirlik pahasına olmamalıdır.
Chrome'un performans araçlarını iyileştirme teşebbüsümüzün bir parçası olarak, 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 kısımlarını gizleme
- Alev grafiğinin alakasız kısımlarını gizleme
- Alakasız parçaları gizleme
Bu yayında, bu özelliklerin her birine daha yakından bakacak ve yalnızca en kritik bilgilere odaklanmak için bunları nasıl kullanabileceğinizi göstereceğiz.
Zaman çizelgesinin alakasız kısımlarını gizleyin
Web performansı, milisaniye cinsinden hesaplanır. Bu nedenle, performans kaydınız yalnızca birkaç saniye olsa bile, yerinizi kaybetmeniz için pek çok fırsat vardır.
Chrome 122'de, içerik haritası oluşturma özelliğini ekledik. Bu özellik, zaman çizelgesinin sınırlarını sınırlamanızı sağlar. Böylece, yalnızca seçtiğiniz ilgi alanı içinde yakınlaştırma veya kaydırma yapabilirsiniz. Zaman çizelgesini bu şekilde kısıtlamak, özellikle yanıt verme sorunlarıyla ilgili hata ayıklamaya çalışıyorsanız özellikle faydalı olabilir. Örneğin, dikkatinizi tek bir etkileşime veya sorunlu, uzun bir göreve odaklanabilirsiniz.
Yukarıdaki ekran görüntüsünde, komut dosyası yürütme ve sunum çalışması gibi ana iş parçacığı 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 göre ayarlayan yeni bir düğme görüntülenir. Düğme, milisaniye cinsinden zaman aralığının genişliği ve simgesiyle etiketlenir. İçerik haritaları, zaman çizelgesi genel bakışının üzerinde yer alır ve her biri, zaman aralığının boyutuna göre etiketlenir.
Bu özelliği kullanmak için:
- Zaman çizelgesini ilgi çekici bir alana yakınlaştırın ve kaydırın.
- Zaman çizelgesini daraltmak ve bir içerik haritası ayarlamak için zaman çizelgesine genel bakıştaki büyüteç simgesini tıklayın.
- İç içe yerleştirilmiş ilgi çekici bir alanı yakınlaştırmak için işlemi gerektiği kadar tekrarlayın.
- Önceki ilgi alanlarına veya zaman çizelgesinin tamamına dönmek için içerik haritalarını tıklayın.
Zaman çizelgesini kırpmak, zaman çizelgesinin alakasız bir bölümüne yanlışlıkla sınırların dışına kaydırmamanızı sağlar. Gerektiğinde, içerik haritasını tıklayarak görüntüyü uzaklaştırmayı da tercih edebilirsiniz. Zaman çizelgesi genel bakışının aşağıdaki kanallarla uyumlu kalması da bir diğer avantajdır. Bu, zorunlu yeniden düzenleme gibi performans fırsatlarını tespit etmeyi ve flame grafiğinde bunların temel nedenini bulmayı çok daha kolay hale getirebilir.
Flame grafiğinin alakasız kısımlarını gizleyin
Ana iş parçacığı etkinliğini analiz etmek kolay ve zor bir iş değildir. Performans panelinin bu bölümü, çağrı yığınlarının ne kadar uzun ve dönen bir şekilde olabileceği nedeniyle flame grafiği olarak bilinir. Bazı ekstrem durumlarda bu yığınlar, bütün bir şeyi anlayıp optimize etmeye çalıştığınız şeye odaklanmak zor olabiliyor.
Chrome 124'ten itibaren, flame grafiğinde tam olarak hangi girişlerin gizleneceğini özelleştirerek işlem yapılabilirlik düzeyi en yüksek bilgilere odaklanabilirsiniz.
Flame grafiğindeki bir işlevi sağ tıkladığınızda, girişleri gizlemek için çeşitli seçeneklerin bulunduğu bir içerik menüsü görüntülenir:
- İşlevi gizle: Seçili işlevi flame grafiğinden kaldırın. Alt öğeleri, üst işlevinden hemen sonra görünecek şekilde yukarı taşınır.
- Alt öğeleri gizle: Seçili işlevdeki alev grafiğini, tüm alt öğelerini gizleyerek silin.
- Tekrarlanan alt öğeleri gizle: Seçili işlevin tüm örneklerini flame grafiğinin geri kalanından kaldırın.
Bir işlev seçildiğinde kullanabileceğiniz birkaç yardımcı klavye kısayolu da vardır:
- H: Seçili işlevi gizle
- C: Seçili işlevin alt öğelerini gizle
- R: Seçilen işlevin örneklerini yığında daha sonra gizle
- U: Seçili işlevin gizli alt öğelerini gösterir
Alakasız komut dosyalarını kalıcı olarak gizleyin
Komut dosyasını yoksayılanlar listesine ekle seçeneği, seçilen işlevi alev grafiğinden ve aynı komut dosyası içinde tanımlanan diğer tüm işlevlerden gizler. Komut dosyası ayrıca, Geliştirici Araçları hata ayıklayıcısının işlevlerin üzerinden geçmek ve komut dosyasından kaynaklanan istisnaları göz ardı etmek için kullandığı yoksayılanlar listesine de eklenir.
Yoksayılanlar listesine eklenen komut dosyaları korunacağı için yeni izlerde flame grafiğinde gizlenmeye devam eder. Kontrolünüz dışındaki komut dosyaları, yoksayılanlar listesi için iyi adaylardır. Diğer yandan, tek tek işlevleri gizlemek, mevcut iz için geçicidir ve duruma daha bağlıdır. Örneğin, izinle daha kolay çalışmak için kullanışsız bir yinelenen işlev çağrısı yığınını gizlemek isteyebilirsiniz.
Yoksayılanlar listesini veya flame grafiğindeki diğer gizli işlevleri geri döndürmek için içerik menüsünü kullanarak seçili işlevin alt öğelerini sıfırlayabilir veya izdeki tüm gizli işlevleri sıfırlayabilirsiniz. Gizli alt öğeleri olan işlevlere ▼ simgesiyle not eklenir. Bu simge, tıklandığında alt öğeleri de sıfırlar.
Işık grafiğinden çıkarabileceğiniz gereksiz derinlik ve karmaşıklık düzeyi, grafiği çok daha kullanışlı hale getirecektir. Gerektiğinde, hangi girişleri göreceğinizi özelleştirebilmek ergonomik bir iyileştirmedir ve dikkatinizi mevcut görevle ilgili en önemli bilgiye odaklamanıza yardımcı olur.
Alakasız parçaları gizle
Ana ileti dizisi etkinliği, Performans panelinin yalnızca bir parçasını oluşturur. Performans panelindeki kanallar, bir işlemin etkinliğini görselleştirir ve hata ayıklamaya yardımcı olması için hepsi ortak bir zaman çizelgesine hizalanır. Ana kanala ek olarak, sayfa tarafından kullanılan diğer alt çerçeveler, ileti dizileri ve çalışanların yanı sıra Ağ, Çerçeveler, Animasyonlar ve Etkileşimler için ayrı kanallar vardır. Daha da fazla kanal IO, GPU ve Birleştirici gibi alt düzey Chrome işlemlerinin etkinliğini işaretler. Çok fazla bilgi var. Yine de çoğu performans iş akışında, tek seferde yalnızca birkaç kanaldaki bilgilerle ilgilenebilirsiniz.
Chrome 125'ten itibaren, gereksiz parçaları gizlemenizi veya istediğiniz şekilde yeniden düzenlemenizi sağlayan yeni bir yapılandırma modu bulunmaktadır. Örneğin, yavaş bir etkileşimi optimize ediyorsanız Etkileşimler, Ana ve GPU kanalları dışındaki her şeyi gizlemeyi seçebilirsiniz.
Kanalları düzenlemek için herhangi bir kanalın adını sağ tıklayın ve Kanalları yapılandır... seçeneğini belirleyin. Bu, tek tek kanalları gösterebileceğiniz, gizleyebileceğiniz veya yeniden düzenleyebileceğiniz yapılandırma modunu açar. Tercihlerinizi kaydetmek için Kanal yapılandırmayı tamamla düğmesini tıklayın.
Kanalları yapılandırarak Performans panelinin iş akışınıza kritik bilgileri sunma şeklini denetleyebilirsiniz. Bu ayarları, etkinliği ilgisiz işlemlerden gizlemek ve parkurları, ihtiyacınız olan verilere en kolay şekilde erişmenizi sağlayacak şekilde taşımak için kullanabilirsiniz.
Özet
Bu üç özellik, performans iş akışlarınızı özelleştirmeniz için yeni ve güçlü ergonomik kontroller sunar. Bu özellikleri kullanarak ve gürültü miktarını azaltarak aradığınızı bulmak ve verileri daha iyi anlamak için çok daha iyi bir konuma yerleşirsiniz.
Nelerin işe yaradığını veya deneyiminizi nasıl daha iyi hale getirebileceğimizi öğrenmek isteriz. Herhangi bir sorunuz veya genel geri bildiriminiz varsa @ChromeDevTools ile iletişime geçerek bize bildirebilirsiniz. Bir şeyler çalışmıyorsa veya yeni özelliklerle ilgili öneriniz varsa bu açık soruna yorum yapın.
Bu, Chrome'un performans araçlarını iyileştirme girişimimiz için yalnızca bir başlangıç. Performans panelinin kullanımını her zamankinden daha kolay ve daha güçlü hale getirmek için pişirdiğimiz diğer her şeyi paylaşmaktan heyecan duyuyoruz. Yeni özellik grubunu gösteren bir sonraki yayınımızı burada, Geliştiriciler için Chrome blogunda yayınlayacağız. Bu sırada Geliştirici Araçları ve Chrome'daki yeniliklerden haberdar olmak için Chrome'daki Yenilikler sayfasına göz atabilirsiniz.