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 - 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 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ı 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 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ı ve 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 metriklerle ilgili canlı gözlemler.

Performans paneli, iyileştirilebilecek metrikleri vurgular ve yerel deneyiminizin kullanıcılarınızın deneyimiyle nasıl eşleştirileceğine dair analizler ve öneriler sunar. Örneğin, CPU'yu veya ağı kısıtlamak isteyebilirsiniz. Bunu aynı ekrandaki sağ taraftaki Kayıt ayarları bölümünden yapabilirsiniz.

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

Arama sırasında 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 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ğlıyor. 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 doldurmak için Otomatik doldurma panelini açın, Otomatik doldurma menüsünde test adreslerini göster seçeneğini etkinleştirin, sayfanızdaki bir adres formunu sağ tıklayın ve Geliştirici araçları menüsünden seçeneklerden birini belirleyin.

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

Öğe paneli iyileştirmeleri

Bu sürümde Öğeler panelinde birkaç iyileştirme 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 zorla etkinleştirebileceğiniz daha fazla sözde sınıf bulunmaktadır. Yeni seçenek grubu, Belirli öğeyi zorla durum açılır menüsünün altında yer alı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 olarak tamamlıyor

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

Grid çizgisi adlarını düzenlerken otomatik tamamlama seçeneklerini eklemeden önce ve sonra.

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 panelinde artık Lighthouse 12.2.0 sürümü kullanılıyor.

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

Geliştirici Araçları'ndaki Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

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 işlemi artık bir iframe içinde bile seçili düğümü geri yükler 40719145.
    • Erişilebilirlik: Ekran okuyucular artık Öğeyi göster düğmesini 357382536 olarak duyuracak.
  • Performans > Ağ: Ağda Göster menü seçeneği artık alakalı ağ isteğinin Başlıklar sekmesini açar.
  • Konsol:
    • C/C++ uzantısındaki hatalar artık Konsol'u zorla açmıyor 356320158.
    • Bir JS modülünde import.meta'ün duraklatıldığında değerlendirilmemesiyle ilgili hata düzeltildi 40743793.
  • 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şmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.