Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Kayce Basques

Yeni Sorunlar sekmesiyle site sorunlarını düzeltin

Çekmece'deki yeni Sorunlar sekmesi, Konsol'un bildirim yorgunluğunu ve karmaşasını azaltmaya yardımcı olur. Console şu anda web sitesi geliştiricilerinin, kitaplıkların, çerçevelerin ve Chrome'un mesajları, uyarıları ve hataları günlüğe kaydettiği merkezi yerdir. Sorunlar sekmesi, tarayıcıdan alınan uyarıları yapılandırılmış, toplu ve işlem yapılabilir bir şekilde, Geliştirici Araçları'ndaki etkilenen kaynakların bağlantılarını ve sorunların nasıl düzeltileceğine dair rehberlik sağlar. Zamanla, Sorunlar sekmesinde Konsol yerine Chrome'un daha fazla uyarısını göreceksiniz. Bu, Console'un karmaşıklığını azaltmaya yardımcı olur.

Başlamak için Chrome Geliştirici Araçları Sorunlar Sekmesindeki Sorunları Bulma ve Düzeltme sayfasına göz atın.

Sorunlar sekmesi.

Chromium Hatası: #1068116

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

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

Chromium Hatası: #1040025

Performans paneli güncellemeleri

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

Yükleme performansınızı kaydettikten sonra, Performans panelinde artık alt bilgide 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. Esasen, bir sayfanın ne kadar süre boyunca kullanılabilir olduğunu (içeriği ekrana oluşturulduğu için) ancak JavaScript'in ana iş parçacığını engellediğinden sayfa kullanıcı girişine yanıt veremediği için gerçekten kullanılabilir olmadığını ölçer. TBT, Google'ın yeni Core Web Vitals'ından biri olan İlk Giriş Gecikmesi'ne yaklaşmak 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 iş akışını kullanmayın. Bunun yerine, Kaydet'i Kaydet tıklayın, sayfayı manuel olarak yeniden yükleyin, sayfanın yüklenmesini bekleyin ve ardından kaydı durdurun. Total Blocking Time: Unavailable simgesini görürseniz Geliştirici Araçları, ihtiyaç duyduğu bilgileri Chrome'un dahili profil oluşturma verilerinden alamamıştır.

Performans paneli kaydının altbilgisindeki Toplam Engelleme Süresi bilgileri.

Chromium Hatası: #1054381

Yeni Deneyim bölümündeki Layout Shift 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 Önemli Web Verileri'nden biridir.

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

Düzen kaymasının ayrıntıları.

Console'da daha doğru vaat terminolojisi

Konsol, bir Promise günlüğe kaydedildiğinde Promise öğesinin durumunu yanlış bir şekilde resolved olarak tanımlıyordu:

Eski "çözülmüş" terminolojinin kullanıldığı Console örneği.

Console artık fulfilled terimini kullanıyor. Bu terim, Promise spesifikasyonuyla uyumludur:

Yeni "karşılanmış" terminolojisini kullanan 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 da, bir özelliğin basamaklı değerini, öğenin stilinde herhangi bir değişiklik yapılmamış olsaydı elde edilecek değere geri döndürür.

Geri alınacak özelliğin değerini ayarlama.

Chromium Hatası: #1075437

Resim önizlemeleri

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

Bir arka plan resmi değerinin üzerine gelin.

Chromium Hatası: #1040019

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

CSS Renk Modülü Düzeyi 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 renkleri seçtiğinizde veya Üst Karakter tuşunu basılı tutup renk değerini tıklayarak Stiller bölmesinde 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 dizimini Hesaplanan bölmesinde ve İnceleme Modu ipucunda da göreceksiniz.

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 Geliştirici Araçları yeni söz dizimini kullanıyor.

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

Chromium Hatası: #1072952

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

Öğeler panelindeki Özellikler bölmesi kullanımdan kaldırıldı. Bunun yerine Konsolda console.dir($0) komutunu çalıştırın.

Kullanımdan kaldı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 gerçekleştirilen veya önerilen görevlere hızlı bir şekilde başlamaları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ını kullanarak işlerinizi hızlıca tamamlama başlıklı makaleye göz atın.

Manifest bölmesindeki uygulama kısayolları.

Ö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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.