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

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 bölümünde #enable-experimental-web-platform-features işaretini etkinleştirin.

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.

Chromium sorunu: 1190735

Konsolda daha iyi dize işleme

Konsol'daki yeni bağlam 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.

Chrome 90'da, Geliştirme Araçları Konsol'u güncelleyerek dize çıkışlarını her zaman geçerli JSON değişmezleri olarak biçimlendirdi. 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.

Konsol 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. 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 de dahil olmak üzere ham dize içeriklerini panoya olduğu gibi 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

Console'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.

Chromium sorunu: 1213393

Lighthouse 8.1

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

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.

Chromium sorunu: 1185678

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

DevTools, CSS eşleştirme seçicilerini düzeltti. Bu seçiciler 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.

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 güzel yazdırın.

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.

• 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'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına 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.