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

Ağ filtreleri yeniden tasarlandı

Ağ paneline, geri bildirimleriniz doğrultusunda yeniden tasarlanmış yeni filtreler uygulanır. Türe özel filtreler aynı kalır. Temiz bir çoklu seçim çubuğunda bir dizi rozet gösterilir.

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

Gizle, engelle ve üçüncü taraflarla ilgili filtreleri bir açılır menü altına taşımadan önce ve taşıdıktan sonra.

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

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

Chromium sorunu: 362672528.

HAR dışa aktarma işlemlerinde artık hassas veriler varsayılan olarak hariç tutuluyor

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 veri içeren ve içermeyen dışa aktarma seçenekleri eklenmeden önce ve sonra.

Chromium sorunu: 361717594.

Öğe paneli iyileştirmeleri

Bu sürüm, Öğeler paneline çeşitli iyileştirmeler getirir.

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

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

'metin-vurgusu-*' için otomatik tamamlama seçeneği eklenmeden önce ve sonra özellikler.

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 geçerli DOM'u yansıtır ve içerik, örneğin boyut değişikliği nedeniyle taşmayı durdurursa kaybolur.

Kaydırma işaretleme işleminden önce ve sonra bir rozetle taşıyor.

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üm, Performans paneline çeşitli iyileştirmeler getirir.

Canlı metriklerdeki öneriler

Canlı metrikler artık geliştirme ortamınızı kullanıcılarınızın deneyimlerine mümkün olduğunca benzer şekilde yapılandırmanıza yardımcı olacak metriğe ö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 deneyimini en iyi şekilde değerlendirmek için önerileri uygulayın.

Artık bir performans kaydının zaman çizelgesindeki içerik haritalarında gezinebilirsiniz: "atlama" içerik haritaları arasında sürekli geçiş yapabilir, bir içerik haritasının üzerine yazabilir ve birden fazla alt öğeyi kaldırabilirsiniz. Daha önce, bir üst içerik haritası 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.

"Ayrılan öğeler"i eklemeden önce ve sonra profil türünü seçin.

Chromium sorunu: 350519222.

Basit JS nesnelerinin adlandırması iyileştirildi

Yığın anlık görüntülerinde Object kategorisini düzenlemek ve sadeleştirmek için artık düz JavaScript nesneleri:

  • İçerdikleri özelliklere göre adlandırılır (ör. {firstProperty, secondProperty, ..., *nthProperty}).
  • Geliştirici Araçları tarafından oluşturulan bu adlarla 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 Geliştirici Araçları renklerinin, Chrome'da ö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ıyla eşleştir'i temizleyin ve DevTools'u yeniden yükleyin.

Dinamik temalamayı 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şturucu 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.

"Bu sekme, kaynakları diğer sekmelerle paylaşıyor..." şeklinde bir mesaj görürseniz Geliştirici Araçları açıkken bilgi çubuğunda yer alırsa Süreç paylaşımı denemesinin etkin olduğu küçük grubun bir parçası olursunuz.

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

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

Lighthouse 12.2.1

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

Bu güncellemeyle, yalnızca önemli dosya boyutu tasarruflarına odaklanmanıza yardımcı olmak amacıyla kaynak sıkıştırma önerileri için < 20 KB yoksayma eşiği kullanıma sunuluyor. 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 önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

  • Öğeler:
    • İç içe yerleştirilmiş CSS'yi düzenlemeye yönelik birden çok 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ında (352651673) çok satırlı dizelerdeki çıkış karaktersiz "ve" işareti düzeltildi.
  • Bellek: Service Worker'ların bulunduğu sayfalarda varsayılan seçim düzeltildi, ana iş parçacığı artık seçili (40669896).
  • Güvenlik: URL şeması vurgusu, 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, Geliştirici veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları sayesinde en son Geliştirici Araçları özelliklerine erişebilir, en yeni web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce bulabilirsiniz.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da DevTools ile ilgili başka 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.