Geliştirici Araçları'ndaki yenilikler, Chrome 129

Sofia Emelianova
Sofia Emelianova
GitHub

Kaydedici, Firefox için Puppeteer'a dışa aktarmayı destekler

WebDriver BiDi desteği kapsamında, Kaydedici paneli artık kayıtları Firefox için Puppeteer'a aktarabilir. Puppeteer'ın Firefox desteği sayesinde artık kullanıcı akışlarını Chrome Geliştirici Araçları Kaydedici panelini kullanarak kaydedebilir, dışa aktarabilir ve hem Firefox hem de Chrome'da çalıştırabilirsiniz.

Kaydedici 'nin dışa aktarma menüsüne "Puppeteer for Firefox" seçeneği eklenmeden önce ve eklendikten sonraki görünümü.

Daha fazla bilgi için WebDriver BiDi - The future of cross-browser automation (WebDriver BiDi - Tarayıcılar arası otomasyonun geleceği) başlıklı makaleyi inceleyin.

Performans paneli iyileştirmeleri

Bu sürümde Performans panelinde çeşitli iyileştirmeler yapıldı.

Canlı metrik gözlemleri

Performans paneli artık hem yerel makinenizde hem de Chrome Kullanıcı Deneyimi Raporu'ndaki alan verilerine göre Core Web Vitals ile ilgili canlı gözlemleri gösteriyor. Bu sayede, performans izlerini yakalamanıza gerek kalmadan performans sorunlarını tespit edebilir ve deneyiminizin kullanıcılarınızın deneyimlerine kıyasla ne kadar temsili olduğunu anlayabilirsiniz.

LCP ve CLS ile ilgili canlı gözlemleri görmek için Performans panelini açın. INP'yi görmek için sayfada bir etkileşim gerçekleştirin. Yerel metriklerinizi Chrome UX Report'taki toplanan kullanıcı deneyimiyle karşılaştırmak için alan verileri ekleyin: Sağdaki Alan verileri bölümünde Ayarla'yı, iletişim kutusunda ise Tamam'ı tıklayın. Daha fazla bilgi içeren bir ipucu görmek için fareyle bir metrik değerinin üzerine gelin.

Performans panelindeki metriklerle ilgili canlı gözlemler.

Performans paneli, iyileştirilebilecek metrikleri vurgular ve yerel deneyiminizi kullanıcılarınızın deneyimiyle nasıl eşleştireceğiniz konusunda analizler ve öneriler sunar. Örneğin, CPU veya ağ kullanımını sınırlamak isteyebilirsiniz. Bunu, sağ taraftaki Kayıt ayarları bölümünde aynı ekranda yapabilirsiniz.

Performans panelindeki Arama kutusu artık Ağ izinde de çalışıyor. Böylece Ctrl / Cmd + F kısayolunu kullanarak istekleri bulabilirsiniz.

Arama ile bulunan bir ağ isteği.

performance.mark ve performance.measure çağrılarının yığın izlemelerini görme

Özet sekmesindeki Performans panelinde artık performance.mark ve performance.measure çağrılarının yığın izleri gösteriliyor. Performans izlemeyi özel verilerinizle genişletmek için bu çağrıları kullanabilirsiniz.

performance.mark ve performance. measure çağrıları için yığın izlerini gösteren önceki ve sonraki durum.

Daha fazla bilgi için Genişletilebilirlik API'si ile performans verilerinizi özelleştirme başlıklı makaleyi inceleyin.

Otomatik doldurma panelinde test adresi verilerini kullanma

Otomatik Doldurma paneli artık adres formları için test verileri sunuyor. Bu sayede, Chrome'da kayıtlı adresiniz yoksa veya misafir profili kullanıyorsanız web sitenizdeki adres formlarını test etmek kolaylaşır.

Adres formlarını test verileriyle otomatik olarak doldurmak için Otomatik doldurma panelini açın, Otomatik doldurma menüsünde test adreslerini göster'i etkinleştirin, sayfanızda doldurulmuş bir adres formunu sağ tıklayın ve Geliştirici araçları menüsünden bir seçeneği belirleyin.

Otomatik doldurma test verileri, adres formu alanı açılır menüsüne eklenmeden önce ve eklendikten sonraki seçenekler.

Nesne paneli iyileştirmeleri

Bu sürümde Nesneler panelinde bazı iyileştirmeler yapıldı.

Belirli öğeler için daha fazla durumu zorunlu kılma

Öğeler > Stiller bölümündeki :hov bölümünde artık zorunlu olarak etkinleştirebileceğiniz daha fazla sözde sınıf yer alıyor. Yeni seçenek grubu, Belirli öğeyi zorunlu kıl durum açılır listesinde yer alır ve seçtiğiniz belirli öğelere özgüdür. Örneğin, <label> ve <input> farklı seçeneklere sahiptir.

Belirli öğe durumlarını zorunlu kılma özelliği eklenmeden önce ve sonra

Chromium sorunu: 40280012.

Öğeler > Stiller artık daha fazla ızgara özelliğini otomatik olarak tamamlıyor

Öğeler > Stiller sekmesi artık ızgara alanı ve satır adlarını düzenlerken otomatik tamamlama seçenekleri sunuyor.

Kılavuz çizgisi adlarını düzenlerken otomatik tamamlama seçeneklerinin eklenmesinden önceki ve sonraki durum.

Daha fazla bilgi için CSS ızgara düzenlerini inceleme ve özellikle Çizgi adlarını gösterme bölümüne bakın.

Lighthouse 12.2.0

Lighthouse paneli artık Lighthouse 12.2.0'ı çalıştırıyor.

Bu güncelleme, çeşitli hata düzeltmeleri içerir. Değişikliklerin tam listesini inceleyin.

Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 772558.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

  • Öğeler:
    • Aşırı yüklenmiş uzunluk özelliklerinin yanlış oluşturulmasıyla ilgili hata düzeltildi 357020613.
    • position-try-options, spesifikasyona göre position-try-fallbacks olarak yeniden adlandırıldı.
    • Sayfa yenilendiğinde artık seçili düğüm, iframe içinde bile geri yükleniyor 40719145.
    • Erişilebilirlik: Ekran okuyucular artık Öğeyi göster düğmesini duyuracak 357382536.
  • Performans > Ağ: Ağda Göster menü seçeneği artık ilgili ağ isteğinin Başlıklar sekmesini açıyor.
  • Konsol:
    • C/C++ uzantısından kaynaklanan hatalar artık Konsol'u zorunlu olarak açmıyor 356320158.
    • Bir JS modülündeki import.meta ile ilgili, duraklatıldığında değerlendirilmeme hatası düzeltildi 40743793.
  • Anılar: Tutucu yoksayıldıktan sonra Yoksayılan tutucuları geri yükle seçeneğinin gösterilmemesiyle ilgili hata düzeltildi 327337527.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanıza yardımcı olur.

Chrome Geliştirici Araçları Ekibi ile iletişime geçme

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.