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

Yeni Sorunlar sekmesiyle site sorunlarını düzeltme

Çekmecedeki yeni Sorunlar sekmesi, Console'daki bildirim yorgunluğunu ve karmaşayı azaltmaya yardımcı olmayı amaçlar. Şu anda Konsol, web sitesi geliştiricilerin, kitaplıkların, çerçevelerin ve Chrome'un kendisinin mesajları, uyarıları ve hataları kaydettiği merkezi yerdir. Sorunlar sekmesi, tarayıcıdan gelen uyarıları yapılandırılmış, toplu ve uygulanabilir bir şekilde sunar, Geliştirici Araçları'ndaki etkilenen kaynaklara bağlantılar verir ve sorunların nasıl düzeltileceği konusunda rehberlik sağlar. Zaman içinde, Chrome'un uyarılarının büyük bir kısmı Konsol yerine Sorunlar sekmesinde gösterilecek. Bu sayede Konsol'daki karmaşanın azaltılması hedefleniyor.

Başlamak için Chrome Geliştirici Araçları Sorunlar Sekmesiyle İlgili Sorunları Bulma ve Düzeltme başlıklı makaleyi inceleyin.

Chromium hatası: #1068116

İnceleme modu ipucunda erişilebilirlik bilgilerini görüntüleme

İnceleme modu ipucu artık öğenin erişilebilir bir adı ve rolü olup olmadığını ve klavyeyle odaklanılabilir olup olmadığını gösteriyor.

Chromium hatası: #1040025

Performans paneli güncellemeleri

Altbilgide Toplam Engelleme Süresi (TBT) bilgilerini görüntüleme

Yükleme performansınızı kaydettikten sonra Performans paneli artık altbilgide Toplam Engelleme Süresi (TBT) bilgilerini gösteriyor. TBT, bir sayfanın kullanılabilir hale gelmesinin ne kadar sürdüğünü ölçmeye yardımcı olan bir yükleme performansı metriğidir. Bu metrik, bir sayfanın kullanılabilir görünmesi (içeriği ekrana oluşturulduğu için) ancak JavaScript ana iş parçacığını engellediği için gerçekte kullanılamaması durumunda geçen süreyi ölçer. Bu durumda sayfa, kullanıcı girişine yanıt veremez. TBT, Google'ın yeni Core Web Vitals'ından biri olan First Input Delay'i yaklaşık olarak hesaplamak için kullanılan temel laboratuvar metriğidir.

Toplam engelleme süresi bilgilerini almak için sayfa yükleme performansını kaydederken Sayfayı Yeniden Yükle iş akışını kullanmayın. Bunun yerine Kaydet'i tıklayın , sayfayı manuel olarak yeniden yükleyin, sayfanın yüklenmesini bekleyin ve kaydı durdurun. Total Blocking Time: Unavailable simgesini görüyorsanız Geliştirici Araçları'nın Chrome'un dahili profil oluşturma verilerinden ihtiyacı olan bilgileri almadığı anlamına gelir.

Chromium hatası: #1054381

Yeni deneyim bölümündeki düzen kayması etkinlikleri

Performans panelinin yeni Deneyim bölümü, düzen kaymalarını tespit etmenize yardımcı olabilir. Cumulative Layout Shift (CLS), istenmeyen görsel kararsızlığı ölçmenize yardımcı olabilecek bir metriktir ve Google'ın yeni Core Web Vitals metriklerinden biridir.

Özet sekmesinde düzen kayması ayrıntılarını görmek için bir Düzen Kayması etkinliğini tıklayın. Düzen kaymasının nerede gerçekleştiğini görselleştirmek için Taşındığı yer ve Taşındığı yer alanlarının üzerine gelin.

Console'da daha doğru söz terimleri

Promise günlüğe kaydedilirken Console, Promise durumunu yanlış bir şekilde resolved olarak tanımlıyordu:

Konsol artık Promise spesifikasyonuyla uyumlu olan fulfilled terimini kullanıyor:

V8 hatası: #6751

Stiller bölmesi güncellemeleri

revert anahtar kelimesi için destek

Stiller bölmesinin otomatik tamamlama kullanıcı arayüzü artık revert CSS anahtar kelimesini algılıyor. Bu anahtar kelime, bir özelliğin basamaklı değerini, öğenin stilinde değişiklik yapılmamış olsaydı değerin olacağı duruma geri döndürür.

Chromium hatası: #1075437

Resim önizlemeleri

Resmin önizlemesini ipucu olarak görmek için Stiller bölmesinde fareyle bir background-image değerinin üzerine gelin.

Chromium hatası: #1040019

Renk seçici artık boşlukla ayrılmış işlevsel renk gösterimini kullanıyor

CSS Color Module Level 4, rgb() gibi renk işlevlerinin boşlukla ayrılmış bağımsız değişkenleri desteklemesi gerektiğini belirtir. Örneğin, rgb(0, 0, 0), rgb(0 0 0) ile eşdeğerdir.

Renk Seçici ile renk seçtiğinizde veya Shift tuşunu basılı tutup renk değerini tıklayarak Stiller bölmesindeki renk gösterimleri arasında geçiş yaptığınızda artık boşlukla ayrılmış bağımsız değişken söz dizimini görürsünüz.

Söz dizimini, Hesaplanan (Computed) bölmesinde ve İnceleme Modu (Inspect Mode) ipucunda da görürsünüz.

Geliştirici Araçları, color() gibi yakında kullanıma sunulacak CSS özellikleri, kullanımdan kaldırılan virgülle ayrılmış bağımsız değişken söz dizimini desteklemediği için yeni söz dizimini kullanıyor.

Boşlukla ayrılmış bağımsız değişken söz dizimi, bir süredir çoğu tarayıcıda desteklenmektedir. Boşlukla ayrılmış işlevsel renk gösterimlerini kullanabilir miyim? başlıklı makaleyi inceleyin.

Chromium hatası: #1072952

Nesne panelindeki Özellikler bölmesinin desteği sonlandırıldı

Öğeler panelindeki Özellikler bölmesinin desteği sonlandırıldı. Bunun yerine Console'da console.dir($0) komutunu çalıştırın.

Kaynaklar:

• console.dir()
• $0

Manifest bölmesinde uygulama kısayolu desteği

Uygulama kısayolları, kullanıcıların bir web uygulamasında yaygın veya önerilen görevleri hızlı bir şekilde başlatmasına yardımcı olur. Uygulama kısayolları menüsü yalnızca kullanıcının masaüstüne veya mobil cihazına yüklenen Progresif Web Uygulamaları için gösterilir.

Daha fazla bilgi edinmek için Uygulama kısayollarıyla işlerinizi hızlıca tamamlama başlıklı makaleyi inceleyin.

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