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

Kayce Basques

Yeni Sorunlar sekmesiyle site sorunlarını düzeltme

Çekmecede bulunan yeni Sorunlar sekmesi, Console'daki bildirim yoğunluğu ve dağınıklığı azaltmayı amaçlamaktadır. Şu anda web sitesi geliştiricileri, kitaplıklar, çerçeveler ve Chrome'un mesajları, uyarıları ve hataları günlüğe kaydetmesi için merkezi yer Konsolu'dur. Sorunlar sekmesi, tarayıcıdan gelen uyarıları yapılandırılmış, birleştirilmiş ve uygulanabilir bir şekilde sunar, DevTools'taki etkilenen kaynakların bağlantılarını gösterir ve sorunların nasıl düzeltileceği konusunda yol gösterir. Zamanla Chrome'un uyarılarının çoğu, Konsol yerine Sorunlar sekmesinde gösterilecek. Bu da Konsol'daki dağınıklığı azaltmaya yardımcı olacaktır.

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

Sorunlar sekmesi.

Chromium Hatası: #1068116

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

İnceleme Modu ipucunda artık öğenin erişilebilir bir adı ve rolü olup olmadığı ve klavyeyle odaklanıp odaklanamayacağı belirtiliyor.

Erişilebilirlik bilgilerini içeren İnceleme Modu ipucusu.

Chromium Hatası: #1040025

Performans paneli güncellemeleri

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

Artık Performans panelinde, yükleme performansınız kaydedildikten sonra altbilgi bölümünde Toplam Engelleme Süresi (TBT) bilgileri gösteriliyor. TBT, bir sayfanın kullanılabilir hale gelmesinin ne kadar sürdüğünü ölçmeye yardımcı olan bir yükleme performansı metriğidir. Temel olarak, bir sayfanın kullanılabilir olarak görünmesinin (içeriği ekranda oluşturulduğu için) ne kadar sürdüğünü ancak JavaScript ana iş parçacısını engellediği ve bu nedenle sayfanın kullanıcı girişine yanıt veremediği için gerçekten kullanılamadığını ölçer. TBT, Google'ın yeni Core Web Vitals metriği olan İlk Giriş Gecikmesi'ne yaklaşık değer vermek için kullanılan ana laboratuvar metriğidir.

Toplam Engelleme Süresi bilgilerini almak için sayfa yükleme performansını kaydetmek üzere Sayfayı Yeniden Yükle Sayfayı yeniden yükle iş akışını kullanmayın. Bunun yerine Kaydet'i tıklayınKaydet, sayfayı manuel olarak yeniden yükleyin, sayfanın yüklenmesini bekleyin ve ardından kaydı durdurun. Total Blocking Time: Unavailable simgesini görüyorsanız DevTools, Chrome'un dahili profilleme verilerinden ihtiyaç duyduğu bilgileri alamamıştır.

Performans paneli kaydının altbilgisinde yer alan toplam engelleme süresi bilgileri.

Chromium Hatası: #1054381

Yeni Deneyim bölümündeki düzen değişikliği etkinlikleri

Performans panelinin yeni Deneyim bölümü, düzen değişikliklerini tespit etmenize yardımcı olabilir. İstenmeyen görsel kararsızlığı ölçmenize yardımcı olabilecek bir metrik olan Cumulative Layout Shift (CLS), Google'ın yeni Core Web Vitals metriklerinden biridir.

Özet sekmesinde, bir Düzen Değişikliği etkinliğini tıklayarak düzen değişikliğinin ayrıntılarını görebilirsiniz. Düzen değişikliğinin nerede gerçekleştiğini görselleştirmek için fareyle Taşındığı yer ve Taşındığı yer alanlarının üzerine gelin.

Düzen değişikliğiyle ilgili ayrıntılar.

Console'da daha doğru taahhüt terminolojisi

Console, Promise'ü günlüğe kaydederken Promise'ün durumunu yanlışlıkla resolved olarak tanımlamaktaydı:

Eski "çözüme ulaştırıldı" terminolojisinin kullanıldığı Console örneği.

Console'da artık Promise spesifikasyonuyla uyumlu fulfilled terimi kullanılmaktadır:

Yeni "tamamlandı" terminolojisinin kullanıldığı Console örneği.

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ılar. Bu anahtar kelime, bir mülkün basamaklı değerini, öğenin stilinde herhangi bir değişiklik yapılmamış olsaydı değer olacak şekilde geri döndürür.

Bir mülkün değerini geri döndürülecek şekilde ayarlama.

Chromium Hatası: #1075437

Resim önizlemeleri

Fareyle Stil panelindeki bir background-image değerinin üzerine geldiğinizde, resmin önizlemesi bir ipucu olarak gösterilir.

Fareyle background-image değerinin üzerine gelme.

Chromium Hatası: #1040019

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

CSS Renk Modülü 4. Seviye, 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 aynıdır.

Renk Seçici ile renk seçtiğinizde veya Stil sekmesinde Shift tuşunu basılı tutarak renk değeri tıklayarak renk temsilleri 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.

Stiller bölmesinde boşlukla ayrılmış bağımsız değişkenler kullanma

Söz dizimi, Hesaplanmış bölmesinde ve İnceleme Modu ipucunda da gösterilir.

color() gibi gelecekteki CSS özellikleri, desteği sonlandırılan virgül ile ayrılmış bağımsız değişken söz dizimini desteklemediğinden Geliştirici Araçları 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 destekleniyor. Boşlukla ayrılmış işlevsel renk gösterimlerini kullanabilir miyim? başlıklı makaleyi inceleyin.

Chromium Hatası: #1072952

Nesneler panelindeki Özellikler bölmesinin kullanımdan kaldırılması

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

Desteği sonlandırılan Özellikler bölmesi.

Kaynaklar:

Manifest bölmesinde uygulama kısayolları desteği

Uygulama kısayolları, kullanıcıların bir web uygulamasında sık kullanılan 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ünde veya mobil cihazında yüklü olan Progresif Web Uygulamaları için gösterilir.

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

Manifest bölmesinde uygulama kısayolları.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.