Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Jecelyn Yeen

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

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

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

Öğeler panelinde, kuralı @container olan bir DOM öğesini tıklayın. DevTools artık Stiller bölmesinde @container bilgisini görüntüler. Boyutu düzenlemek için simgeyi tıklayın. Stiller bölmesinde ilgili kapsayıcı bilgileri de görüntülenir. Sayfadaki kapsayıcı öğesini vurgulamak için fareyle öğenin üzerine gelin ve kapsayıcı boyutunu kontrol edin. Kapsayıcı öğeyi seçmek için kapsayıcıyı tıklayın.

Kapsayıcı sorguları özelliği şu anda deneme aşamasındadır. 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 dosyaya sığdırmaya yönelik bir dosya biçimidir. Artık web paketi içeriğini Ağ panelinde önizleyebilirsiniz.

Web paketi özelliği şu anda deneme aşamasındadır. Lütfen test etmek için chrome://flags altında #enable-experimental-web-platform-features işaretini etkinleştirin.

web paketi önizlemesi

Chromium sorunu: 1182537

Attribution Reporting API hata ayıklaması

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

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

Sorunlar sekmesinde Attribution Reporting API hataları

Chromium sorunu: 1190735

Console'da daha iyi dize işleme

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

Geliştirici Araçları, Chrome 90'da Konsol'u güncelleyerek dize çıkışlarını her zaman geçerli JSON değişmez değerleri olarak biçimlendirdi. Geliştiricilerden bu değişikliğin kafa karıştırıcı olabileceğine, bazıları da kaçış kullanımının aşırıya kaçtığını ve sonucu okunamaz hale getirdiğine dair geri bildirimler aldık.

Konsol artık dize çıkışlarını geçerli JavaScript değişmez değerleri olarak biçimlendiriyor. Ayrıca, size 3 kopyalama dizesi seçeneği de sunuyor. JavaScript değişmez değeri olarak kopyala seçeneği, uygun özel karakterleri atlar ve dize içeriğine bağlı olarak dizeyi tek tırnak, çift tırnak veya vurgu işaretleri içine alır. Dize içeriklerini kopyala seçeneği, ham dize içeriklerini (yeni satırlar ve diğer özel karakterler dahil) kelimesi kelimesine 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

İyileştirilmiş CORS hata ayıklaması

Konsol'daki CORS ile ilgili TypeError'lar artık Ağ paneli ve Sorunlar sekmesine bağlanmıştır.

Ağ isteğini görüntülemek için CORS ile ilgili hata mesajının yanındaki iki yeni simgeyi tıklayın veya hata mesajını daha iyi anlayıp Sorunlar sekmesinde olası çözümleri görün.

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

Chromium sorunu: 1213393

Lighthouse 8.1

Lighthouse paneli artık Lighthouse 8.1'i çalıştırmaktadır.

Deniz Feneri

Siteniz kaynak eşlemelerini Lighthouse'a sunuyorsa gönderilen JavaScript'inizin, boyut ve yükleme üzerindeki kapsama göre filtrelenebilir bir dökümünü görmek için Treemap'i Görüntüle düğmesini arayın.

Raporda ayrıca yeni bir metrik filtresi de bulunmaktadır (Ekran görüntüsündeki Şununla ilgili 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 Kategorisi'nde, diğer performans araçlarıyla uyum sağlamak ve web'in durumunu daha iyi yansıtmak için bir dizi puanlama değişikliği yapıldı.

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

Chromium sorunu: 772558

Yeni not URL'sini Manifest bölmesinde görüntüle

Manifest bölmesinde artık yeni not URL'si görüntülenir.

Şu anda ChromeOS'te (CrOS) kullanılan Chrome Uygulamaları ve "yeni not" özelliği bulunan Android Uygulamaları, ekran kalemi ayarlarında not alma uygulaması olarak seçilebilir (CrOS cihazı ekran kalemiyle kullanılıyorsa gösterilir). Not alma uygulaması olarak seçildiğinde, uygulama ekran kalemi paletinin "Not Oluştur" düğmesinden başlatılabilir. Uygulama manifest dosyasına new-note-url alanının eklenmesi, web uygulamalarına eşdeğer işlevler ekleme çabasının bir parçasıdır.

Manifest bölmesinde yeni not URL'si

Chromium sorunu: 1185678

CSS eşleştirme seçicileri düzeltildi

Geliştirici Araçları, CSS eşleştirme seçicilerini düzeltti ve son sürümde çalışmadı.

Stiller bölmesindeki virgülle ayrılmış seçiciler, seçilen DOM düğümüyle eşleşip eşleşmediğine bağlı olarak farklı şekilde renklendirilir:

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

CSS eşleşen seçiciler

Chromium sorunu: 1219153

JSON yanıtlarını Ağ panelinde okunaklı şekilde yazdırma

Artık JSON yanıtlarını Ağ panelinde düzgün şekilde yazdırabilirsiniz.

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

JSON yanıtlarını Ağ panelinde okunaklı ş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'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.