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

Kayce Basques

Yeni Sorunlar sekmesiyle site sorunlarını düzeltin

Çekmece'deki yeni Sorunlar sekmesi, bildirimlerin size yol açtığı yorgunluğu azaltmayı ve Konsol. Console şu anda web sitesi geliştiricilerinin, kütüphanelerin, çerçeveleri ve Chrome'u kullanarak mesajları, uyarıları ve hataları günlüğe kaydeder. Sorunlar sekmesi, yapılandırılmış, toplu ve işlem yapılabilir bir şekilde tarayıcıdan uyarılar ve etkilenen bağlantılar kaynaklar ve sorunların nasıl düzeltileceği konusunda yol gösterici bilgiler sağlıyor. Zaman içinde daha da fazla veya Chrome uyarılarının listesi Konsol yerine Sorunlar sekmesinde gösterilecektir. Bu sayede, Console'daki karmaşayı azaltır.

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

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üne sahip olup olmadığını gösteriyor. klavyeye odaklanabiliyor.

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 Toplam Engelleme Süresi gösteriliyor (TBT) ile ilgili bilgileri altbilgiye ekleyin. TBT, ne kadar sürdüğünü ölçmeye yardımcı olan bir yük performansı metriğidir. bir sayfa alır. Temel olarak, bir sayfanın ne kadar süre kullanılabilir olduğunu ölçer. (içeriği ekranda oluşturulduğu için) ancak JavaScript kodu mevcut olduğundan aslında kullanılamaz ana ileti dizisini engellediğinden sayfa, kullanıcı girişine yanıt veremiyor. TBT, en son laboratuvardır metriğini inceleyin.

Toplam Engelleme Süresi bilgilerini almak için Sayfayı Yeniden Yükle'yi kullanmayın. sayfa yükleme performansını kaydetme iş akışını uygulayın. Bunun yerine Kaydet'i tıklayın. , sayfayı manuel olarak yeniden yükleyin, sayfanın yüklenmesini bekleyin ve ardından kaydı durdurun. Gördüğünüz Total Blocking Time: Unavailable Bu, Geliştirici Araçları'nın ihtiyaç duyduğu bilgileri Chrome'un dahili profil oluşturma verileri.

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ı olan bir metriktir 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. İmleçle üzerine gelin Taşındı ve Şuraya taşındı alanlarının üzerine tıklayarak düzen kaymasının gerçekleştiği yeri görselleştirebilirsiniz.

Console'da daha doğru vaat terminolojisi

Bir Promise günlüğe kaydedilirken Konsol, Promise durumunu yanlış bir şekilde tanımlamak için kullanılan resolved:

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

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 ve bu da öğesinin öğesinin stiliyle uyumlu hale getirin.

Chromium Hatası: #1075437

Resim önizlemeleri

Resmin önizlemesini ipucunda görmek için Stiller bölmesinde bir background-image 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 desteklemesi gerektiğini belirtir. birbirinden boşlukla ayrılmış bağımsız değişkenlerdir. Örneğin rgb(0, 0, 0), rgb(0 0 0) ile eşdeğerdir.

Renk Seçici ile renkleri seçtiğinizde veya Stiller bölmesini açmak için Üst Karakter tuşunu basılı tutup renk değerini tıkladıktan sonra boşlukla ayrılmış bağımsız değişken söz dizimi.

Söz dizimini Hesaplanan bölmesinde ve İnceleme Modu ipucunda da göreceksiniz.

color() gibi yakında sunulacak CSS özellikleri desteği sonlandırılan virgülle ayrılmış bağımsız değişken söz dizimi.

Boşlukla ayrılmış bağımsız değişken söz dizimi, çoğu tarayıcıda bir süredir desteklenmektedir. Daha fazla bilgi için Boşlukla ayrılmış işlevsel renk gösterimleri var mı?

Chromium Hatası: #1072952

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

Öğeler panelindeki Özellikler bölmesi kullanımdan kaldırıldı. console.dir($0) komutunu Bunun yerine Konsol.

Kaynaklar:

• console.dir()
• $0

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örevleri hızlı bir şekilde başlatmalarına yardımcı olur. Uygulama kısayollar menüsü yalnızca kullanıcının masaüstünde veya bilgisayarlarda yüklü olan Progresif Web Uygulamaları için mobil cihaz

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.

Ö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.