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

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

Kayce Basques

Yeni Sorunlar sekmesini kullanarak sitedeki sorunları giderin

Çekmecedeki yeni Sorunlar sekmesinin amacı, Konsol'un bildirim yorgunluğunu ve karmaşıklığını azaltmaya yardımcı olmaktır. Şu anda Console; web sitesi geliştiricilerinin, kitaplıkların, çerçevelerin ve Chrome'un mesajları, uyarıları ve hataları günlüğe kaydettikleri merkezi bir yerdir. Sorunlar sekmesi tarayıcıdaki uyarıları yapılandırılmış, toplu ve uygulanabilir bir şekilde sunar, Geliştirici Araçları'ndaki etkilenen kaynaklara bağlantılar ve sorunların nasıl düzeltileceği konusunda yol gösterici bilgiler sağlar. Zaman içinde, Konsol yerine Sorunlar sekmesinde Chrome'un uyarıları gitgide daha fazla gösterilecektir. Bu, Console'un karmaşıklığını azaltmaya yardımcı olacaktır.

Başlamak için Chrome Geliştirici Araçları Sorunları Sekmesiyle İlgili Sorunları Bulma ve Düzeltme başlıklı makaleye 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österir.

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

Chromium Hatası: #1040025

Performans paneli güncellemeleri

Toplam Engelleme Süresi (TBT) bilgilerini altbilgide görüntüleyin

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 gelmesi için ne kadar süre gerektiğini hesaplamaya yardımcı olan bir yükleme performansı metriğidir. Temel olarak bir sayfanın ne kadar süre kullanılabilir durumda görüneceğini (içeriği ekranda oluşturulduğu için) ancak JavaScript ana iş parçacığını engellediği ve bu nedenle sayfa kullanıcı girişine yanıt veremediği için gerçekte kullanılabilir olmadığını ölçer. TBT, Google'ın yeni Önemli Web Verileri'nden biri olan First Input Delay'i tahmin etmek için kullanılan ana lab metriğidir.

Toplam Engelleme Süresi bilgisini 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 ifadesini görmeniz, Geliştirici Araçları'nın ihtiyaç duyduğu bilgileri Chrome'un dahili profil oluşturma verilerinden almadığı anlamına gelir.

Performans paneli kaydının alt bilgisindeki Toplam Engelleme Süresi bilgisi.

Chromium Hatası: #1054381

Yeni Deneyim bölümündeki Layout Shift etkinlikleri

Performans panelinin yeni Deneyim bölümü, düzen geçişlerini tespit etmenize yardımcı olabilir. Cumulative Layout Shift (CLS), istenmeyen görsel dengesizlikleri ölçmenize yardımcı olan 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 Şuradan 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

Console, Promise değerini günlüğe kaydederken Promise durumunu yanlış bir şekilde resolved olarak tanımlardı:

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

Console'da artık Promise spesifikasyonuna uygun olan fulfilled terimi kullanılıyor:

Yeni "sipariş karşılama" 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 özelliğin basamaklı değerini, öğenin stilinde hiçbir değişiklik yapılmasaydı elde edilecek değere geri döndürür.

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

Chromium Hatası: #1075437

Resim önizlemeleri

İpucunda resmin önizlemesini görmek için Stiller bölmesinde fareyle background-image değerinin üzerine gelin.

Fareyle 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üzey 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) işlevine eş değerdir.

Renk Seçici ile renk seçtiğinizde veya Stiller bölmesindeki renk temsilleri arasında geçiş yapmak için Üst Karakter tuşunu basılı tutup renk değerini tıkladığı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şkenleri kullanma.

Ayrıca, Hesaplanan bölmesinde ve İnceleme Modu ipucunda söz dizimini görürsünüz.

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

Boşlukla ayrılmış bağımsız değişken söz dizimi bir süredir çoğu tarayıcıda desteklenmektedir. Bkz. 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 console.dir($0) aracını Konsol'da ç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 yapı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ü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şleri hızlıca halletme başlıklı makaleye göz atın.

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'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.