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 Nesne Modeli (CSSOM) API'leri ile oluşturulan stillerin düzenlenmesini daha iyi destekliyor. Birçok CSS-in-JS çerçevesi ve kitaplığı, stilleri oluşturmak için CSSOM API'lerini kullanır.

Artık Constructable Stylesheets kullanarak JavaScript'te eklenen stilleri de düzenleyebilirsiniz. Oluşturulabilir 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üzenlenemiyordu. Stiller bölmesinde artık düzenlenebilir olanlar:

Chromium sorunu #946975

Lighthouse panelinde Lighthouse 6

Lighthouse paneli artık Lighthouse 6'yı çalıştırıyor. Tüm önemli değişikliklerin özetini görmek için Lighthouse 6.0'daki Yenilikler'e, tüm değişikliklerin tam listesini görmek için ise 6.0.0 sürüm notlarına göz atın.

Lighthouse 6.0, rapora üç yeni metrik ekliyor: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ve Total Blocking Time (TBT). LCP ve CLS, Google'ın yeni Core Web Vitals'larından 2'sidir. TBT ise başka bir Core Web Vital olan İlk Giriş Gecikmesi için laboratuvar ölçümü vekilidir.

Performans puanı formülü, kullanıcıların yükleme deneyimini daha iyi yansıtacak şekilde yeniden ağırlıklandırıldı.

Lighthouse 6.0'daki yeni performans metrikleri

Chromium sorunu #772558

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

İlk Anlamlı Boyama (FMP), Lighthouse 6.0'da kullanımdan kaldırıldı. Bu metrik, Performans panelinden de kaldırıldı. FMP'nin yerine Largest Contentful Paint'in kullanılması önerilir. Kullanımdan kaldırılma nedenini öğrenmek için İlk Anlamlı Boyama bölümüne bakın.

Chromium sorunu #1096008

Yeni JavaScript özellikleri için destek

DevTools artık en yeni JavaScript dil özelliklerinden bazıları için daha iyi destek sunuyor:

  • İsteğe bağlı zincirleme söz dizimi otomatik tamamlama: Konsol'da özellik otomatik tamamlama artık isteğe bağlı zincirleme söz dizimini destekliyor. Örneğin, name?. artık name. ve name['ye ek olarak çalışıyor.
  • Özel alanlar için söz dizimi vurgulama: Özel sınıf alanları artık Kaynaklar panelinde düzgün bir şekilde söz dizimi vurgulanıyor ve güzel bir şekilde yazdırılıyor.
  • Nullish coalescing operator için söz dizimi vurgulama: Geliştirici Araçları artık Kaynaklar panelinde nullish coalescing operator'ü düzgün şekilde biçimlendiriyor.

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 yaygın olarak kullanılan veya önerilen görevleri hızlıca başlatmasına yardımcı olur.

Manifest bölmesi artık aşağıdaki durumlarda uyarı gösteriyor:

  • Uygulama kısayol simgeleri 96x96 pikselden küçükse
  • Uygulama kısayol simgeleri ve manifest simgeleri kare değil (yoksayılacakları için)

Uygulama kısayolu uyarıları

Chromium sorunu #955497

Zamanlama sekmesindeki hizmet çalışanı respondWith etkinlikleri

Ağ panelinin Zamanlama sekmesi artık hizmet çalışanı respondWith etkinliklerini içeriyor. respondWith Service worker fetch etkinlik işleyicisi çalışmadan hemen önceki andan fetch işleyicisinin respondWith sözü yerine getirilene kadar geçen süredir.

hizmet çalışanı "respondWith"

Chromium sorunu #1066579

Hesaplanmış bölmesinin tutarlı gösterimi

Öğeler panelindeki Hesaplanan bölmesi artık tüm görünüm alanı boyutlarında tutarlı bir şekilde bölme olarak gösteriliyor. Daha önce, Geliştirici Araçları görüntü alanının genişliği dar olduğunda Hesaplanan bölmesi Stiller bölmesiyle birleştiriliyordu.

Chromium sorunu #1073899

WebAssembly dosyaları için bayt kodu ofsetleri

Geliştirici Araçları artık Wasm ayrıştırmasının satır numaralarını göstermek için bayt kodu ofsetlerini kullanıyor. Bu sayede, ikili verilere baktığınız daha net anlaşılır ve Wasm çalışma zamanının konumları referans alma şekliyle daha tutarlı olur.

Bayt kodu kaydırmaları

Chromium sorunu #1071432

Kaynak panelinde satır bazında kopyalama ve kesme

Kaynaklar paneli düzenleyicisinde seçim yapılmadan kopyalama veya kesme işlemi gerçekleştirildiğinde DevTools, mevcut satır içeriğini kopyalar ya da keser. Örneğin, aşağıdaki videoda imleç 1. satırın sonunda yer alıyor. Kesme klavye kısayoluna basıldıktan sonra satırın tamamı panoya kopyalanır ve silinir.

Chromium sorunu #800028

Konsol ayarları güncellemeleri

Aynı konsol mesajlarının gruplandırmasını kaldırma

Konsol ayarlarındaki Benzer mesajları gruplandır açma/kapatma düğmesi artık yinelenen mesajlar için de geçerli. Bu özellik daha önce yalnızca benzer iletiler için geçerliydi.

Örneğin, daha önce Benzerleri gruplandır seçeneğinin işareti kaldırılmış olsa bile DevTools, iletileri hello gruplandırmıyordu. Artık hello iletiler gruplandırılmıyor:

Chromium sorunu #1082963

Yalnızca seçili bağlam ayarlarını kalıcı hale getirme

Konsol Ayarları'ndaki Yalnızca seçili bağlam ayarları artık kalıcı olarak saklanıyor. Daha önce, Geliştirici Araçları'nı her kapattığınızda ve yeniden açtığınızda ayarlar sıfırlanıyordu. Bu değişiklik, ayar davranışını diğer Konsol Ayarları seçenekleriyle tutarlı hale getirir.

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 Performans panelinin Özet sekmesinde her zaman gösteriliyor. Daha önce, kod önbelleğe alma işlemi gerçekleşmediyse Geliştirici Araçları, kod önbelleğe alma ile ilgili hiçbir şey göstermiyordu.

JavaScript derleme önbelleği bilgileri

Chromium sorunu #912581

Performans panelinde, kayıt başlangıcına göre cetvellerdeki zamanlar gösteriliyordu. Bu durum, kullanıcının gezindiği kayıtlarda değişti. Artık DevTools, gezinmeye göre cetvel zamanlarını gösteriyor.

Performans panelinde gezinme zamanlamasını hizalama

Ayrıca, DOMContentLoaded, First Paint, First Contentful Paint ve Largest Contentful Paint etkinliklerinin sürelerini, gezinmenin başlangıcına göre olacak şekilde güncelledik. Bu sayede, PerformanceObserver tarafından bildirilen sürelerle eşleşirler.

Chromium sorunu #974550

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

Kaynaklar panelinde kesme noktaları, koşullu kesme noktaları ve günlük noktaları için yeni tasarımlar yer alıyor. Kesme noktaları, daha parlak ve daha samimi renklerle yenilenmiş bir işaret tasarımına sahip olur. Koşullu kesme noktaları ve günlük noktalarını ayırt etmek için simgeler eklendi.

Kesme noktaları

Chromium sorunu #1041830

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'taki Yenilikler serisinde ele alınan her şeyin listesi.