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üleyip düzenleyebilirsiniz.

Kapsayıcı sorguları, duyarlı tasarıma çok daha dinamik bir yaklaşım sunar. @container @kuralı, @media ile medya sorgusuna benzer şekilde çalışır. Ancak @container, bilgi için görünüm penceresini ve kullanıcı aracısını sorgulamak yerine belirli ölçütlere uyan üst kapsayıcıyı sorgular.

Öğeler panelinde @container at-rule içeren bir DOM öğesini tıkladığınızda, Geliştirici Araçları artık @container bilgilerini Stiller bölmesinde gösteriyor. Boyutu düzenlemek için tıklayın. Stiller bölmesinde ilgili kapsayıcı bilgileri de gösterilir. Fareyle üzerine gelerek sayfadaki kapsayıcı öğeyi vurgulayın ve kapsayıcı boyutunu kontrol edin. Kapsayıcı öğeyi seçmek için bu öğeyi tıklayın.

Kapsayıcı sorguları özelliği şu anda deneyseldir. Test etmek için lütfen chrome://flags bölümünde #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 kapsayan 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 bölümünde #enable-experimental-web-platform-features işaretini etkinleştirin.

web paketi önizlemesi

Chromium sorunu: 1182537

Attribution Reporting API 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 (ör. reklam tıklaması veya görüntüleme) ne zaman dönüşüme yol açtığını ölçmenize yardımcı olan yeni bir API'dir.

Sorunlar sekmesindeki Attribution Reporting API hataları

Chromium sorunu: 1190735

Konsolda 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'daki yeni bağlam menüsü

Chrome 90'da Geliştirme Araçları, Konsol'u dize çıkışlarını her zaman geçerli JSON değişmezleri olarak biçimlendirecek şekilde güncelledi. Geliştiricilerden bu değişikliğin kafa karıştırıcı olabileceği, bazı geliştiricilerin ise kaçış karakteri sayısının fazla olduğunu ve çıkışı okunamaz hale getirdiğini düşündüğü yönünde geri bildirimler aldık.

Console artık dize çıkışlarını geçerli JavaScript değişmezleri olarak biçimlendiriyor ve ayrıca 3 dize kopyalama seçeneği sunuyor. Copy as JavaScript literal (JavaScript değişmez değeri olarak kopyala) seçeneği, uygun özel karakterleri kod dışında bırakır ve dize içeriğine bağlı olarak dizeyi tek tırnak, çift tırnak veya ters tırnak içine alır. Dize içeriklerini kopyala ise yeni satırlar ve diğer özel karakterler dahil olmak üzere dize içeriklerini olduğu gibi panoya kopyalar. Son olarak, JSON değişmez değeri olarak kopyala seçeneği 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'lar artık Ağ paneline ve Sorunlar sekmesine bağlı.

Ağ isteğini görüntülemek veya hata mesajını daha iyi anlamak ve Sorunlar sekmesinde olası çözümleri görmek 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 paneli artık Lighthouse 8.1'i çalıştırıyor.

Deniz Feneri

Siteniz kaynak eşlemelerini Lighthouse'a sunuyorsa gönderilen JavaScript'inizin dökümünü görmek için Ağaç Haritasını Görüntüle düğmesini bulun. Bu döküm, yükleme sırasında boyut ve kapsam temelinde filtrelenebilir.

Rapor ayrıca yeni bir metrik filtresi de içerir (Ekran görüntüsündeki İlgili denetimleri göster filtresine bakın). Yalnızca bu metriği iyileştirmekle en alakalı fırsatlara ve teşhislere odaklanmak için bir metrik seçin.

Performans Kategorisi, diğer performans araçlarıyla uyumlu hale getirilmek ve web'in durumunu daha iyi yansıtmak için puanlamada çeşitli değişiklikler 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österiliyor.

Şu anda ChromeOS'te (CrOS), "new-note" özelliğini bildiren Chrome uygulamaları ve Android uygulamaları, Stylus ayarlarında not alma uygulaması olarak seçilebilir (CrOS cihazı kalemle kullanılmışsa gösterilir). Not alma uygulaması olarak seçildiğinde, uygulama, kalem paletinin "Not Oluştur" düğmesinden başlatılabilir. Uygulama manifestine new-note-url alanı eklemek, web uygulamalarına eşdeğer işlevler ekleme çalışmalarının bir parçasıdır.

Manifest bölmesindeki yeni not URL'si

Chromium sorunu: 1185678

CSS eşleşen seçiciler düzeltildi

Geliştirici Araçları, CSS eşleştirme seçicilerini düzeltti. Bu özellik son sürümde çalışmıyordu.

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

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

CSS eşleşen seçiciler

Chromium sorunu: 1219153

Ağ panelinde JSON yanıtlarını güzel biçimlendirme

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

Ağ panelinde bir JSON yanıtı açın ve {} simgesini tıklayarak biçimlendirin.

Ağ panelinde JSON yanıtlarını güzel biçimlendirme

Chromium hatası: 998674

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

Geliştirici Araçları'ndaki yenilikler

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