Chrome 130'taki DevTools'daki yenilikler

Sofia Emelianova
Sofia Emelianova
GitHub

Ağ paneli iyileştirmeleri

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

Yeniden tasarlanan ağ filtreleri

Ağ panelinde, geri bildirimleriniz doğrultusunda yeniden tasarlanan yeni filtreler kullanıma sunuldu. Türe özel filtreler aynı kalır. Temiz bir çoklu seçim çubuğunda bir dizi rozet gösterilir.

Kullanıcı arayüzünün dağınıklığını azaltmak için gizleme, engelleme ve üçüncü taraflarla ilgili onay kutuları bir açılır listenin altına taşındı. Listede, açılır menünün altında kaç filtrenin işaretli olduğunu gösteren bir sayı bulunur.

Gizleme, engelleme ve üçüncü taraflarla ilgili filtreleri açılır menünün altına taşımadan önce ve sonra.

Eski filtre tasarımını geri getirmek için Ayarlar > Deneysel > Ağ panelindeki filtre çubuğunun yeniden tasarımı'nı temizleyin.

Yeniden tasarlanan dizayn hakkındaki düşüncelerinizi bizimle paylaşın.

Chromium sorunu: 362672528.

HAR dışa aktarma işlemleri artık varsayılan olarak hassas verileri hariç tutuyor

Hassas bilgilerin yanlışlıkla sızma olasılığını azaltmak için HAR biçiminde dışa aktarılan ağ günlüğü artık varsayılan olarak Cookie, Set-Cookie ve Authorization üstbilgilerini içermeyecek.

Günlükleri hassas verilerle birlikte HAR biçiminde dışa aktarmak için Settings > Preferences > Network > Allow to generate HAR with sensitive data seçeneğini etkinleştirin. Ağ panelinde, Dışa aktar düğmesi bir okla işaretlenir. Düğmeyi uzun basılı tutun ve açılır menüden HAR'ı dışa aktar (hassas verilerle)'ı seçin.

HAR dışa aktarma işlemine hassas veriler içeren ve içermeyen dışa aktarma seçenekleri eklemeden önce ve sonra.

Chromium sorunu: 361717594.

Öğe paneli iyileştirmeleri

Bu sürümde Öğeler panelinde çeşitli iyileştirmeler yapılmıştır.

text-emphasis-* mülkleri için otomatik tamamlama değerleri

Stiller sekmesindeki otomatik tamamlama özelliği artık aşağıdaki CSS özellikleri için değerler öneriyor:

"text-emphasis-*" mülkleri için otomatik tamamlama seçeneği eklemeden önce ve sonra.

Chromium sorunu: 361471205.

Kaydırma taşmaları rozetlerle işaretlenir

Öğeler panelinde artık taşkın içerik barındıran ve overflow: scroll veya overflow: auto içeren öğeler yeni bir "kaydırma" rozeti ile işaretleniyor. Böylece kaydırma taşkınlarını kolayca tespit edebilirsiniz. Diğer rozetler gibi bu rozet de mevcut DOM'u yansıtır ve içerik, örneğin boyut değişikliği nedeniyle taşmayı durdurursa kaybolur.

Kaydırma taşmalarını rozet ile işaretlemeden önce ve sonra.

Chromium sorunu: 40670442.

İç içe yerleştirilmiş kurallardan sonra "yukarı kaydırılan" çıplak bildirimler

CSS Çalışma Grubu'nun iç içe yerleştirilmiş kuralların ardından salt bildirimlerin gelmesine izin verme kararının ardından Stiller sekmesi, ayrıştırma sırasında bu bildirimleri artık "yukarı kaydırmıyor".

Aşağıdaki kod örneğinde, iç içe yerleştirilmiş kuraldan sonraki salt beyan artık Chrome'un basamaktaki stilleri beklenmedik bir şekilde yeniden sıralamasına neden olmaz:

p {
  width: 100px;
  height: 100px;
  @media screen {
    background-color: red;
  }

  background-color: green;
}

İç içe yerleştirilmiş kuralların ardından salt beyanların gelmesine izin vermeden önce ve sonra.

Chromium sorunu: 358119261.

Performans paneli iyileştirmeleri

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

Canlı metriklerdeki öneriler

Canlı metrikler artık geliştirme ortamınızı kullanıcılarınızın deneyimine olabildiğince yakın şekilde yapılandırmanıza yardımcı olacak metriklere özel öneriler sunabilir.

Öneri almak için Chrome UX Report (CrUX)'tan alan verisi getirmeyi ayarlayın ve her metrik kartında (varsa) Yerel test koşullarınızı göz önünde bulundurun bölümünü ve Ortam ayarlarında Gerçek kullanıcı ortamlarını göz önünde bulundurun'u genişletin.

Önerileri içeren genişletilmiş bölümler.

Kullanıcılarınızın deneyimine benzer bir deneyim sunmak için önerileri uygulayın.

Artık performans kaydının zaman çizelgesinde içerik haritaları arasında gezinebilirsiniz: İçerik haritaları arasında ileri geri "atlayabilir", bir alt içerik haritasının üzerine yazabilir ve birden fazla alt öğeyi kaldırabilirsiniz. Daha önce, bir üst breadcrumb'i seçtiğinizde alt öğeleri kayboluyordu.

Bellek paneli iyileştirmeleri

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

Yeni "Ayrılmış öğeler" profili

Bellek paneline yeni bir profil türü eklendi: Bağımsız öğeler. Bir JavaScript referansı tarafından saklanan nesneleri gösterir.

Bellek paneline "Bağımsız öğeler" profil türünü eklemeden önce ve sonra.

Chromium sorunu: 350519222.

Basit JS nesnelerinin adlandırması iyileştirildi

Yığın anlık görüntülerindeki Object kategorisini düzenlemek ve dağınıklığı azaltmak için artık basit JavaScript nesneleri:

  • İçerdikleri özelliklere göre adlandırılır (ör. {firstProperty, secondProperty, ..., *nthProperty}).
  • Geliştirici Araçları tarafından oluşturulan bu adlara göre aranabilir.
  • Aynı özelliklere sahiplerse birlikte gruplandırılır.

Yığın anlık görüntülerinde nesne kategorisini düzenlemeden önce ve sonra.

Chromium sorunu: 350519222.

Dinamik tema oluşturmayı devre dışı bırakma

Artık Chrome'da Geliştirici Araçları renklerinin özel tema renklerinizle otomatik olarak eşleştirilmesini devre dışı bırakabilirsiniz.

Dinamik temaları devre dışı bırakmak için Ayarlar > Tercihler > Görünüm > Chrome renk şemasına uygun'u temizleyin ve DevTools'u yeniden yükleyin.

Dinamik temalandırmayı devre dışı bırakmadan önce ve sonra.

Chromium sorunu: 328472696.

Chrome denemesi: İşlem paylaşımı

Normalde, aynı web sitesinden (ör. Google Dokümanlar) birden fazla sekme açtığınızda Chrome her biri için ayrı bir oluşturma işlemi oluşturur. İşlem paylaşımı denemesi, performansı artırmak için birden fazla sekmenin aynı oluşturma işlemini paylaşmasına izin vererek bu durumu değiştirir.

DevTools açıkken "Bu sekme, diğer sekmelerle kaynak paylaşıyor..." bilgi çubuğu mesajını görüyorsanız İşlem paylaşımı denemesinin etkin olduğu küçük grubun üyesisiniz demektir.

"Bu sekme, diğer sekmelerle kaynak paylaşıyor..." bilgi çubuğu.

İşlem paylaşımı, kesme noktası hata ayıklama ve performans analizini etkileyebilir. Daha fazla bilgi için Chrome Deneyimi: İşlem paylaşımı başlıklı makaleyi inceleyin.

Lighthouse 12.2.1

Lighthouse panelinde artık Lighthouse 12.2.1 sürümü kullanılıyor.

Bu güncelleme, yalnızca anlamlı dosya boyutu tasarruflarına odaklanmanıza yardımcı olmak için kaynak sıkıştırma önerileri için < 20 KB yoksayma eşiği sunar. 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:
    • İç içe yerleştirilmiş CSS'yi düzenlemeyle ilgili birden fazla düzeltme (41486635, 361477264, 328263458, 41487826).
    • Tanımlanmış ancak boş değerli özel özelliklerin "tanımlanmamış" olarak ayrıştırılması sorunu düzeltildi (365578428).
  • Konsol: cURL komutlarındaki çok satırlık dizelerde kaçış karakteri kullanılmayan & işareti düzeltildi (352651673).
  • Bellek: Hizmet işçilerinin bulunduğu sayfalardaki varsayılan seçim düzeltildi. Artık ana iş parçacığı seçili (40669896).
  • Güvenlik: URL şeması vurgulaması, bir kaynağın güvenlik aşaması değiştikçe artık doğru şekilde güncelleniyor (359920086).

Ö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ı 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.