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

Sofia Emelianova
Sofia Emelianova
GitHub

Kaydedici, Firefox için Puppeteer'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 Chrome Geliştirici Araçları Kaydedici panelini kullanarak kullanıcı akışlarını kaydedebilir, dışa aktarabilir ve hem Firefox hem de Chrome'da çalıştırabilirsiniz.

Kaydedici'nin dışa aktarma menüsüne "Firefox için Puppeteer" seçeneği eklenmeden önceki ve sonraki durum.

Daha fazla bilgi için WebDriver BiDi - The future of cross-browser automation başlıklı makaleyi inceleyin.

Performans paneli iyileştirmeleri

Bu sürüm, Performans paneline çeşitli iyileştirmeler getirir.

Canlı metrik gözlemleri

Performans panelinde artık hem yerel makinenizde hem de Chrome UX Report'taki alan verilerine göre Core Web Vitals ile ilgili canlı gözlemler gösteriliyor. Bu sayede, performans izlerini yakalamak zorunda kalmadan performans sorunlarını belirleyebilir ve deneyiminizin kullanıcılarınızla karşılaştırıldığında ne kadar temsil ettiğini anlayabilirsiniz.

LCP ve CLS'de canlı gözlemleri görmek için Performans panelini açın. INP'yi görmek için bir sayfada etkileşim kurun. Yerel metriklerinizi Chrome UX Report'taki toplu kullanıcı deneyimiyle karşılaştırmak için alan verileri ekleyin: Sağdaki Alan verileri bölümünde Ayarla'yı, ardından iletişim kutusunda Tamam'ı tıklayın. Fareyle bir metrik değerinin üzerine gelerek daha fazla bilgi içeren bir ipucu görebilirsiniz.

Performans panelindeki metrikler hakkında canlı gözlemler.

Performans paneli, iyileştirilebilecek metrikleri öne çıkarır ve yerel deneyiminizi kullanıcılarınızın deneyimiyle nasıl eşleştireceğinizle ilgili analiz ve öneriler sunar. Örneğin, CPU'yu veya ağı kısmak isteyebilirsiniz. Bunu aynı ekranda, sağdaki Kayıt ayarları bölümünde yapabilirsiniz.

Performans panelindeki Arama kutusu artık Ağ kanalında da çalışır. Böylece, Ctrl / Cmd + F kısayoluyla istekleri bulabilirsiniz.

Arama yaparak bir ağ isteği bulundu.

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 izlemeleri 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 izlemelerini gösteren önce ve sonra görünümü.

Daha fazla bilgi için Performans verilerinizi genişletilebilirlik API'si ile ö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 sağlamaktadır. Bu sayede, Chrome'da kayıtlı adresiniz yoksa veya Misafir profili kullanıyorsanız web sitenizdeki adres formlarını test etmek daha kolay olur.

Adres formlarını test verileriyle otomatik olarak doldurmak için Otomatik doldurma panelini açın, Otomatik doldurma menüsünde test adreslerini göster ayarını etkinleştirin, sayfanızdaki bir adres formunu sağ tıklayın ve Geliştirici Araçları menüsündeki seçeneklerden birini belirleyin.

Adres formu alanı açılır menüsüne Otomatik doldurma test verileri seçenekleri eklenmeden önceki ve sonraki durum.

Öğeler panelinde iyileştirmeler

Bu sürümde Öğeler panelinde birkaç iyileştirme yapıldı.

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

Öğeler > Stiller içindeki :hov bölümü artık size zorla etkinleştirebileceğiniz daha fazla sözde sınıf sağlıyor. Yeni seçenek grubu, Belirli öğeyi zorla durum açılır menüsünün altındadır ve seçtiğiniz belirli öğelere özeldir. Örneğin, <label> ve <input> farklı seçenek gruplarına sahiptir.

Belirli öğe durumlarını zorunlu kılma özelliğinin eklenmesinden önceki ve sonraki durum.

Chromium sorunu: 40280012.

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

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

Izgara satır adlarını düzenlerken otomatik tamamlama seçenekleri eklemeden önceki ve sonraki seçenekler.

Daha fazla bilgi için CSS ızgara düzenlerini inceleme başlıklı makaleyi ve özellikle de Satır adlarını göster bölümünü inceleyin.

Lighthouse 12.2.0

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

Bu güncellemede çeşitli hata düzeltmeleri mevcut. Değişikliklerin tam listesini inceleyin.

Geliştirici Araçları'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Chromium sorunu: 772558.

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

  • Öğeler:
    • Aşırı yüklenmiş uzunluk özelliklerinin yanlış oluşturulmasıyla ilgili bir hata düzeltildi 357020613.
    • position-try-options, özelliğe göre position-try-fallbacks olarak yeniden adlandırıldı.
    • Sayfa yenileme artık seçilen düğümü bir iframe 40719145 içinde bile geri yüklüyor.
    • Erişilebilirlik: Ekran okuyucular artık Öğeyi göster düğmesini 357382536 okuyacak.
  • 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 gelen hatalar artık Konsol'u (356320158) zorla açmıyor.
    • JS modülünde, 40743793 olarak duraklatıldığında değerlendirilmemeyle ilgili olarak import.meta ile ilgili bir hata düzeltildi.
  • Hafıza: 327337527 kimlikli bir tutucu yoksayıldıktan sonra "Yoksayılan tutucuları geri yükle" seçeneğinin gösterilmemesiyle ilgili bir hata düzeltildi.

Önizleme kanallarını indirme

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

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

Yeni özellikler, güncellemeler veya Geliştirici Araçları ile ilgili başka herhangi bir konu hakkında konuş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.