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 tasarlanan yeni filtreler uygulanır. Türe özel filtreler aynıdır, net bir çoklu seçim çubuğunda bir dizi rozet bulunur.

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 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 kullanarak HAR biçiminde dışa aktarmak için Ayarlar > Tercihler > Ağ > Hassas veriler içeren HAR oluşturulmasına izin ver'i açın. Ağ panelinde Dışa aktar düğmesi bir okla işaretlenir. Düğmeyi uzun tıklayın ve açılır menüden HAR dosyasını dışa aktar (hassas verilerle birlikte) seçeneğini belirleyin.

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.

Öğeler panelinde iyileştirmeler

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

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:

"metin-vurgulama-*" özellikleri için otomatik tamamlama seçeneğinin eklenmesinden önce ve sonra.

Chromium sorunu: 361471205.

Rozetle işaretlenmiş kaydırma taşmaları

Öğeler paneli, taşan içerik barındıran ve overflow: scroll ya da overflow: auto bulunan öğeleri yeni bir "kaydırma" rozetiyle işaretliyor. Böylece, kaydırma taşmalarını kolayca fark 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 kurallardan sonraki çıplak bildirimler "yukarı kaymaz"

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 sadece bildirim, Chrome'un basamaktaki stilleri beklenmedik bir şekilde yeniden sıralamasına neden olmuyor:

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.

Öneriler almak için Chrome Kullanıcı Deneyimi Raporu'nda (CrUX) alan verileri getirmeyi ayarlayın, varsa her metrik kartında bulunan Yerel test koşullarınızı göz önünde bulundurun bölümünü genişletin ve Ortam ayarları'nda Gerçek kullanıcı ortamlarını göz önünde bulundurun bölümünü genişletin.

Öneriler içeren bölümler genişletildi.

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. Örneğin, içerik haritaları arasında ileri geri "atlayabilir", içerik haritalarının üzerine yazabilir ve birden fazla alt hesabı kaldırabilirsiniz. Daha önce, bir üst içerik haritası seçtiğinizde alt öğeleri kayboluyordu.

Bellek paneli iyileştirmeleri

Bu sürüm, Bellek paneline çeşitli iyileştirmeler getiriyor.

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ü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 temayı devre dışı bırak

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

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 Denemesi: İş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ü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.

Çeşitli öne çıkan anlar

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ımlanmamış olarak ayrıştırılan, ancak boş değerli özel özellikler düzeltildi (365578428).
  • Konsol: cURL komutlarında (352651673) çok satırlı dizelerdeki çıkış karaktersiz "ve" işareti düzeltildi.
  • Bellek: Hizmet işçilerinin bulunduğu sayfalardaki varsayılan seçim düzeltildi. Artık ana iş parçacığı seçili (40669896).
  • Güvenlik: Bir kaynağın güvenlik aşaması değiştikçe (359920086) URL şemasının vurgulanması artık doğru şekilde güncelleniyor.

Önizleme kanallarını indirme

Chrome Canary, Yeni geliştirilenler veya Beta'yı varsayılan geliştirme tarayıcınız olarak 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.