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, h1 (CSSOM API'leri) ile eklenen CSSStyleSheet 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ı.

Chromium sorunu #772558

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

First Meaningful Paint (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: DevTools artık Kaynaklar panelinde nullish coalescing operator'ı düzgün şekilde güzel yazdırıyor.

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 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ğilse (yoksayılacakları için)

Chromium sorunu #955497

Zamanlama sekmesindeki respondWith hizmet çalışanı 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.

Chromium sorunu #1066579

Hesaplanmış bölmesinin tutarlı şekilde gösterilmesi

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

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ği işaretli olmasa bile DevTools, iletilerin gruplandırmasını kaldırmıyordu hello. 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.

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.

Chromium sorunu #912581

Performans panelinde gezinme zamanlaması hizalaması

Performans panelinde, cetvellerdeki zamanlar kayıt başlangıcına göre 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.

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, bu etkinliklerin süreleri PerformanceObserver tarafından bildirilen sürelerle eşleşir.

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.

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.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools'a tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler YouTube videolarına veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.