Chrome 130'taki DevTools'daki yenilikler

Sofia Emelianova

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 ekleniyor. Türe özel filtreler aynı kalır. Bu filtreler, temiz bir çoklu seçim çubuğundaki bir dizi rozettir.

Kullanıcı arayüzünü düzenlemek için gizleme, engelleme ve üçüncü taraflarla ilgili onay kutuları açılır listenin altına taşınır. Listedeki sayı, açılır listede kaç filtrenin işaretli olduğunu gösterir.

Eski filtre tasarımını geri getirmek için ayarları temizleyin: Ayarlar > Deneysel Özellikler > check_box_outline_blank Ağ panelindeki filtre çubuğunun yeniden tasarımı.

Yenilenen tasarım 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ızdırılma 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 veriler ile birlikte HAR biçiminde dışa aktarmak için ayarlar Ayarlar > Tercihler > Ağ > check_box Hassas verilerle HAR oluşturmaya izin ver'i etkinleştirin. Ağ panelinde, indirme Dışa aktar düğmesi okla işaretlenir. Düğmeyi uzun tıklayın ve açılır menüden HAR'ı dışa aktar (hassas verilerle) seçeneğini belirleyin.

Chromium sorunu: 361717594.

Nesne paneliyle ilgili iyileştirmeler

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

text-emphasis-* özellikleri 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 kısaltma
• text-emphasis-style
• text-emphasis-color
• text-emphasis-position

Chromium sorunu: 361471205.

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

Öğeler panelinde, taşan içerik barındıran ve overflow: scroll veya overflow: auto içeren öğeler artık yeni bir "kaydırma" rozetiyle işaretleniyor. Böylece kaydırma taşmaları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.

Chromium sorunu: 40670442.

İç içe yerleştirilmiş kurallardan sonraki yalın bildirimler "yukarı kaydırılmaz"

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

Aşağıdaki kod örneğinde, iç içe yerleştirilmiş kuraldan sonraki çıplak bildirim artık Chrome'un basamaklı stili beklenmedik şekilde yeniden sıralamasına neden olmuyor:

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

  background-color: green;
}

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 mümkün olduğunca yakın bir şekilde yapılandırmanıza yardımcı olan metriğe özgü öneriler sunabilir.

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

Kullanıcılarınızın deneyimini tahmin etmek için önerileri uygulayın.

Gezinme içerik haritaları

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

Bellek paneliyle ilgili iyileştirmeler

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

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

Bellek paneline yeni bir profil türü olan Ayrılmış öğeler eklendi. JavaScript referansı tarafından saklanan nesneleri gösterir.

Chromium sorunu: 350519222.

Düz JS nesnelerinin adlandırılması iyileştirildi

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

• İçerdikleri özelliklere göre adlandırılır. Örneğin, {firstProperty, secondProperty, ..., *nthProperty}.
• DevTools tarafından oluşturulan bu adlara göre aranabilir.
• Aynı özelliklere sahipse birlikte gruplandırılır.

Chromium sorunu: 350519222.

Dinamik temayı 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 temayı devre dışı bırakmak için settings Ayarlar > Tercihler > Görünüm > check_box_outline_blank Chrome renk düzeniyle eşleştir'i temizleyin ve Geliştirici Araçları'nı yeniden yükleyin.

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.

Geliştirici Araçları açıkken "Bu sekme, diğer sekmelerle kaynak paylaşıyor..." bilgi çubuğunu görüyorsanız İşlem paylaşımı denemesinin etkin olduğu küçük bir grubun üyesisinizdir.

İşlem paylaşımı, kesme noktası hata ayıklamayı 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üncelleme, yalnızca anlamlı dosya boyutu tasarruflarına odaklanmanıza yardımcı olmak için kaynak sıkıştırma önerileriyle ilgili < 20 KB yok sayma eşiğini kullanıma sunar. Değişikliklerin tam listesini inceleyin.

Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 772558.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

• Öğeler:
  • İç içe yerleştirilmiş CSS'leri düzenlemeyle ilgili birden fazla düzeltme yapıldı (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ı dizelerde çıkışı alınmamış bir ve işareti düzeltildi (352651673).
• Bellek: Hizmet çalışanlarının bulunduğu sayfalarda varsayılan seçim düzeltildi. Artık ana iş parçacığı seçiliyor (40669896).
• Güvenlik: URL düzeni vurgulama, artık bir kaynağın güvenlik aşaması değiştikçe doğru şekilde güncelleniyor (359920086).

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.