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 sağlar. @container kuvveti, @media içeren bir medya sorgusuna benzer şekilde çalışır. Ancak @container, bilgi için görüntü alanını ve kullanıcı aracısını sorgulamak yerine, belirli ölçütlerle eşleşen üst öğe kapsayıcıyı sorgular.

Öğeler panelinde, kuralı @container olan bir DOM öğesini tıklayın. Geliştirici Araçları artık Stiller bölmesinde @container bilgilerini gösteriyor. Boyutu düzenlemek için tıklayın. Stiller bölmesi, ilgili kapsayıcı bilgilerini de görüntüler. Sayfadaki kapsayıcı öğesini vurgulamak ve kapsayıcı boyutunu kontrol etmek için fareyle üzerine gelin. 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 altındaki #enable-container-queries işaretini açın.

Chromium sorunu: 1146422

Ağ panelinde web paketi önizlemesi

Web paketi, tek bir dosyada bir veya daha fazla HTTP kaynağını 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 deneme aşamasındadır. Test etmek için lütfen chrome://flags altındaki #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 raporlanıyor.

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

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.

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

Konsol, artık dize çıkışlarını geçerli JavaScript değişmez değerleri olarak biçimlendirir ve ayrıca size 3 kopya dizesi seçeneği sunar. JavaScript değişmez değeri olarak kopyala seçeneği, uygun özel karakterleri kod dışına alır ve dizeyi, dize içeriğine bağlı olarak tek tırnak, çift tırnak veya vurgu işaretiyle sarmalar. Dize içeriğini kopyala seçeneği, ham dize içeriğini (yeni satırlar ve diğer özel karakterler dahil) tam olarak 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ğ paneline ve Sorunlar sekmesine bağlandı.

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.

Chromium sorunu: 1213393

Lighthouse 8.1

Lighthouse paneli şu anda Lighthouse 8.1'i çalıştırıyor.

Sitenizde kaynak eşlemeleri Lighthouse'ta gösteriliyorsa gönderdiğiniz JavaScript'in dökümünü boyuta ve yükleme üzerindeki kapsama göre filtrelenebilir şekilde görmek için Ağaç Haritasını Görüntüle düğmesini bulun.

Raporda ayrıca yeni bir metrik filtresi de bulunmaktadır (Ekran görüntüsündeki Alakalı denetimleri göster filtresi bölümüne bakın). Yalnızca söz konusu metriği iyileştirmekle 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 bazı puanlama değişiklikleri 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üle

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

Şu anda ChromeOS (CrOS), Chrome Uygulamaları ve Android uygulamalarında "yeni not" bildirimi özelliği, Ekran Kalemi ayarlarında not alma uygulaması olarak seçilebilir (CrOS cihazı ekran kalemiyle kullanılmışsa gösterilir). Not alma uygulaması olarak seçildiğinde uygulama, ekran kalemi paletindeki "Not Oluştur" seçeneğinden başlatılabilir. düğmesini tıklayın. Uygulama manifestine new-note-url alanının eklenmesi, web uygulamalarına eşdeğer işlevler ekleme çabasının bir parçasıdır.

Chromium sorunu: 1185678

Sabit CSS eşleştirme seçicileri

Geliştirici Araçları, CSS eşleştirme seçicilerini düzeltti. Bu seçici 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şmemelerine bağlı olarak farklı şekilde renklendirilir:

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

Chromium sorunu: 1219153

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

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

Ağ panelinde bir JSON yanıtı açın ve okunaklı hale getirmek için {} simgesini tıklayın.

Chromium hatası: 998674

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

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

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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