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

Jecelyn Yeen

CSS-in-JS çerçeveleri için stil düzenleme

Stiller bölmesi artık CSS Nesnesi ile oluşturulan stilleri daha iyi şekilde destekliyor Model (CSSOM) API'leri. Birçok CSS-in-JS çerçevesi ve kitaplığı, arka planda CSSOM API'lerini kullanarak yapı stilleridir.

JavaScript'te eklenen stilleri artık Oluşturulabilir Stil Sayfaları kullanarak da düzenleyebilirsiniz. Yapılandırılabilir Stil sayfaları, Gölge DOM kullanılırken yeniden kullanılabilir stiller oluşturmanın ve dağıtmanın yeni bir yoludur.

Örneğin, CSSStyleSheet (CSSOM API'leri) ile eklenen h1 stilleri daha önce düzenlenemez. Artık Stiller bölmesinde bu öğeleri düzenleyebilirsiniz:

Chromium sorunu #946975

Lighthouse 6 panelindeki Lighthouse 6

Lighthouse paneli şu anda Lighthouse 6'yı çalıştırıyor. Ayrıntılı bilgi edinmek için Lighthouse 6.0'daki Yenilikler'e özetine veya tüm değişikliklerin tam listesi için v6.0.0 sürüm notlarına bakın.

Lighthouse 6.0, rapora üç yeni metrik ekliyor: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ve Toplam Engelleme Süresi (TBT). LCP ve CLS, Google'ın yeni Core Web Vitals ve TBT, başka bir Core Web Vitals, İlk Giriş için bir laboratuvar ölçüm proxy'sidir. Gecikme.

Ayrıca performans puanı formülü, kullanıcıların elde ettiği verileri daha iyi yansıtacak şekilde yükleniyor sahip olacaksınız.

Lighthouse 6.0'daki yeni performans metrikleri

Chromium sorunu #772558

First Aningful Paint (FMP) desteğinin sonlandırılması

First Meaningful Paint (FMP) desteği, Lighthouse 6.0'da kullanımdan kaldırıldı. Ayrıca, performans paneli. Largest Contentful Paint, FMP'nin yerine önerilen seçenektir. Öncelikle Anlamlı Boya'yı inceleyin.

Chromium sorunu #1096008

Yeni JavaScript özellikleri için destek

Geliştirici Araçları artık en yeni JavaScript dil özelliklerinden bazılarını daha iyi destekliyor:

  • İsteğe bağlı zincirleme söz dizimi otomatik tamamlama - Özellik artık Konsolda otomatik olarak tamamlanma isteğe bağlı zincirleme söz dizimini destekler, ör. name?. artık name. ve name[ ile birlikte kullanılabiliyor.
  • Özel alanlar için söz dizimi vurgulama: Özel sınıf alanları artık uygun şekilde Söz diziminin vurgulanması ve Kaynaklar panelinde güzelce yazılmış olması.
  • Nullish birleştirme operatörü için söz dizimi vurgulama - Geliştirici Araçları artık düzgün baskılar (Kaynaklar panelindeki boş birleştirme operatörü)

Chromium sorunları #1083214, #1073903, #1083797

Manifest bölmesinde yeni uygulama kısayolu uyarıları

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.

Manifest bölmesinde aşağıdaki durumlarda uyarı gösterilir:

  • uygulama kısayolu simgelerinin 96x96 pikselden küçük olması
  • uygulama kısayolu simgeleri ve manifest simgeleri kare değil (yoksayılacağı için)

Uygulama kısayolu uyarıları

Chromium sorunu #955497

Zamanlama sekmesindeki Service Worker respondWith etkinlikleri

Ağ panelinin Zamanlama sekmesinde artık Service Worker respondWith etkinlikleri yer alıyor. respondWith hizmet çalışanı fetch etkinlik işleyicisinin çalışmadan hemen önceki ve fetch işleyicinin respondWith sözü yerine getirildi.

hizmet çalışanı "responseWith"

Chromium sorunu #1066579

Hesaplanan bölmenin tutarlı gösterimi

Öğeler panelindeki Hesaplanan bölme, artık tüm görüntü alanında tutarlı bir bölme olarak gösteriliyor. seçin. Önceden, Computed bölmesi Stiller bölmesinin içinde birleşiyordu. Geliştirici Araçları görüntü alanı dardı.

Chromium sorunu #1073899

WebAssembly dosyaları için bayt kodu ofsetleri

Geliştirici Araçları, artık Wasm ayrıştırma işleminin satır numaralarını görüntülemek için bayt kodu ofsetlerini kullanıyor. Bu da, karşılaştırıldığında, ikili verilere baktığınız ve Wasm çalışma zamanının konumları referans gösteriyor.

Bayt kodu ofsetleri

Chromium sorunu #1071432

Kaynaklar Paneli'nde satır düzeyinde kopyalama ve kesme

Kaynaklar paneli düzenleyicisinde seçim yapmadan kopyalama veya kesme işlemi gerçekleştirirken Geliştirici Araçları, veya mevcut satır içeriğini kesin. Örneğin, aşağıdaki videoda imleç, satır 1. Kes klavye kısayoluna basıldıktan sonra, satırın tamamı panoya kopyalanır ve silindi.

Chromium sorunu #800028

Konsol Ayarları güncellemeleri

Aynı konsol mesajlarının gruplandırmasını iptal et

Konsol Ayarları'ndaki Benzeri gruplandır açma/kapatma düğmesi artık yinelenen iletiler için de geçerlidir. Daha önce benzer iletilere uygulandı.

Örneğin, Geliştirici Araçları daha önce Benzer gruplandır olmasına rağmen hello iletilerinin gruplandırmasını çözmedi. işaretli değildir. Artık hello iletinin gruplandırması iptal edildi:

Chromium sorunu #1082963

Yalnızca seçili içerik ayarlarının kalıcı olması

Console Ayarları'ndaki Yalnızca seçili içerik ayarları geçerliliğini koruyor. Önceden ayarlar Geliştirici Araçları'nı her kapatıp yeniden açtığınızda sıfırlanır. Bu değişiklik, ayar davranışını diğer Konsol Ayarları seçenekleriyle tutarlı olduğundan emin olun.

Yalnızca seçili bağlam

Chromium sorunu #1055875

Performans paneli güncellemeleri

Performans panelindeki JavaScript derleme önbelleği bilgileri

JavaScript derleme önbelleği bilgileri artık her zaman performans paneli. Geliştirici Araçları daha önce kod önbelleğe almayla ilgili hiçbir şey göstermiyordu gerçekleşmediğini gösterir.

JavaScript derleme önbelleği bilgileri

Chromium sorunu #912581

Kaydın ne zaman başladığına bağlı olarak cetvellerde zamanları göstermek için kullanılan Performans paneli. Bu Kullanıcının gezindiği kayıtlar için değiştirilmiştir. Burada Geliştirici Araçları artık cetvel zamanlarını göreli olarak göstermektedir seçeneğini kullanabilirsiniz.

Performans panelinde gezinme zamanlamasını hizalama

Ayrıca DOMContentLoaded, İlk Boyama, İlk Zengin İçerikli Boyama ve En Büyük Boyama zamanlarını da güncelledik Contentful Paint etkinlikleri gezinmenin başlangıcına göre belirlenir; yani bu etkinlikler zamanlamalar PerformanceObserver tarafından bildirildi.

Chromium sorunu #974550

Kesme noktaları, koşullu ayrılma noktaları ve günlük noktaları için yeni simgeler

Kaynaklar paneli; ayrılma noktaları, koşullu kesme noktaları ve günlük noktaları için yeni tasarımlara sahiptir. Kesme noktaları, daha parlak ve dostane renklerle yenilenmiş bir bayrak tasarımına sahip olur. Simgeler şu konuma eklendi: koşullu ayrılma noktalarını ve günlük noktalarını ayırt etmenizi sağlar.

Kesme noktaları

Chromium sorunu #1041830

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