Geliştirici Araçları'ndaki Yenilikler (Chrome 93)

Jecelyn Yeen

Stiller bölmesinde düzenlenebilir CSS kapsayıcı sorguları

Artık Stiller bölmesinde CSS kapsayıcı sorgularını görüntüleyebilir ve düzenleyebilirsiniz.

Kapsayıcı sorguları, duyarlı tasarıma çok daha dinamik bir yaklaşım sunar. @container at-kuralı, @media içeren bir medya sorgusuna benzer şekilde çalışır. Ancak @container, bilgi için görüntü alanı ve kullanıcı aracısını sorgulamak yerine belirli ölçütlerle eşleşen üst kapsayıcıyı sorgulanır.

Öğeler panelinde, @container at-kuralı içeren bir DOM öğesini tıklayın. DevTools artık @container bilgilerini Stiller bölmesinde gösterir. Boyutu düzenlemek için tıklayın. Stiller bölmesinde ilgili kapsayıcı bilgileri de gösterilir. Fareyle üzerine gelerek sayfadaki kapsayıcı öğesini vurgulayın ve kapsayıcı boyutunu kontrol edin. Kapsayıcı öğesini seçmek için tıklayın.

Kapsayıcı sorguları özelliği şu anda deneyseldir. Test etmek için lütfen chrome://flags altındaki #enable-container-queries işaretini etkinleştirin.

Stiller bölmesinde düzenlenebilir CSS kapsayıcı sorguları

Chromium sorunu: 1146422

Ağ panelinde web paketi önizlemesi

Web paketi, bir veya daha fazla HTTP kaynağını tek bir dosyada kapsüllemek için kullanılan bir dosya biçimidir. Artık web paketi içeriğini Ağ panelinde önizleyebilirsiniz.

Web paketi özelliği şu anda deneyseldir. Test etmek için lütfen chrome://flags altındaki #enable-experimental-web-platform-features işaretini etkinleştirin.

web paketi önizlemesi

Chromium sorunu: 1182537

Attribution Reporting API'de hata ayıklama

Attribution Reporting API hataları artık Sorunlar sekmesinde bildiriliyor.

Attribution Reporting, siteler arası tanımlayıcıları kullanmadan bir kullanıcı işleminin (reklam tıklaması veya görüntüleme gibi) dönüşümle sonuçlanıp sonuçlanmadığını ölçmenize yardımcı olan yeni bir API'dir.

Sorunlar sekmesindeki Attribution Reporting API hataları

Chromium sorunu: 1190735

Console'da daha iyi dize işleme

Konsol'daki yeni içerik menüsü, herhangi bir dizeyi içerik, JavaScript değişmez değeri veya JSON değişmez değeri olarak kopyalamanıza olanak tanır.

Konsol'da yeni içerik menüsü

Chrome 90'da DevTools, Konsol'u her zaman dize çıkışlarını geçerli JSON değişmez dizeleri olarak biçimlendirecek şekilde güncelledi. Geliştiricilerden, bu değişikliğin kafa karıştırıcı olabileceğine dair geri bildirimler aldık. Bazıları, kaçış karakteri miktarının fazla olduğunu ve çıktının okunamaz hale geldiğini düşünüyor.

Console artık dize çıkışlarını geçerli JavaScript değişmez ifadeleri olarak biçimlendiriyor ve ayrıca size 3 kopyalama dizesi seçeneği sunuyor. JavaScript değişmez değeri olarak kopyala seçeneği, uygun özel karakterleri kod dışında bırakır ve dizeyi, dize içeriğine bağlı olarak tek tırnak, çift tırnak veya ters eğik çizgi içine alır. Dize içeriklerini kopyala seçeneği ise ham dize içeriklerini (yeni satırlar ve diğer özel karakterler dahil) olduğu gibi panoya kopyalar. Son olarak, JSON değişmez değeri olarak kopyala, dizeyi geçerli bir JSON değişmez değeri olarak biçimlendirir ve panoya kopyalar.

Chromium sorunu: 1208389

Geliştirilmiş CORS hata ayıklama

Konsol'daki CORS ile ilgili TypeError'ler artık Ağ paneline ve Sorunlar sekmesine bağlandı.

Ağ isteğini görüntülemek veya hata mesajını daha ayrıntılı şekilde anlamak ve Sorunlar sekmesinde olası çözümler almak için CORS ile ilgili hata mesajının yanındaki iki yeni simgeyi tıklayın.

CORS ile ilgili hata mesajının yanındaki simgeler

Chromium sorunu: 1213393

Lighthouse 8.1

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

Deniz Feneri

Siteniz Lighthouse'a kaynak eşlemeleri sunuyorsa gönderilen JavaScript'inizin dökümünü görmek için Ağaç haritasını görüntüle düğmesini arayın. Bu döküm, boyuta ve yükleme kapsamına göre filtrelenebilir.

Raporda yeni bir metrik filtresi de yer alır (Ekran görüntüsünde İlgili denetimleri göster filtresine bakın). Yalnızca bu metriği iyileştirmeyle en alakalı fırsatlara ve teşhislere odaklanmak için bir metrik seçin.

Performans kategorisinde, diğer performans araçlarıyla uyumlu hale getirmek ve web'in durumunu daha iyi yansıtmak için puanlamada bir dizi değişiklik yapıldı.

Değişikliklerin tam listesi için sürüm notlarına göz atın.

Chromium sorunu: 772558

Manifest bölmesinde yeni not URL'sini görüntüleme

Manifest bölmesinde artık yeni not URL'si gösterilir.

Şu anda ChromeOS'te (CrOS), "new-note" özelliğini açıklayan Chrome uygulamaları ve Android uygulamaları, not alma uygulaması olarak ekran kalemi ayarlarında seçilebilir (CrOS cihaz ekran kalemi ile kullanılıyorsa gösterilir). Not alma uygulaması olarak seçildiğinde uygulama, ekran kalemi paletindeki "Not Oluştur" düğmesinden başlatılabilir. Uygulama manifest dosyasına new-note-url alanı eklemek, web uygulamalarına eşdeğer işlevler ekleme çalışmalarımızın bir parçasıdır.

Manifest bölmesinde yeni not URL'si

Chromium sorunu: 1185678

CSS eşleme seçicileri düzeltildi

DevTools, CSS eşleme seçicilerini düzeltti. Bu özellik son sürümde çalışmıyordu.

Stiller bölmesinde virgülle ayrılmış seçiciler, seçilen DOM düğümüyle eşleşip eşleşmediklerine bağlı olarak farklı renklerde gösterilir:

  • Eşleşmeyen kısım açık gri renkte gösterilir.
  • Eşleşen seçici bölümü siyah renkte gösterilir.

CSS eşleme seçicileri

Chromium sorunu: 1219153

Ağ panelinde JSON yanıtlarını güzel bir şekilde yazdırma

Artık Ağ panelinde JSON yanıtlarını güzel bir şekilde yazdırabilirsiniz.

Ağ panelinde bir JSON yanıtını açın, güzel bir şekilde yazdırmak için {} simgesini tıklayın.

Ağ panelinde JSON yanıtlarını güzel bir şekilde yazdırma

Chromium hatası: 998674

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