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

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'leriyle oluşturulan stilleri düzenleme konusunda daha iyi destek sunuyor. Birçok CSS-in-JS çerçevesi ve kitaplığı, stilleri oluşturmak için arka planda CSSOM API'lerini kullanır.

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

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

Chromium sorunu #946975

Lighthouse panelinde Lighthouse 6

Lighthouse paneli artık Lighthouse 6'yı çalıştırıyor. Tüm önemli değişikliklerin bir özeti için Lighthouse 6.0'daki Yenilikler sayfasına, tüm değişikliklerin tam listesi için v6.0.0 sürüm notlarına göz atın.

Lighthouse 6.0, rapora üç yeni metrik sunuyor: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ve Total Engelleme Süresi (TBT). LCP ve CLS, Google'ın yeni Önemli Web Verileri'nden ikisidir ve TBT, başka bir Core Web Vital olan First InputDelay için laboratuvar ölçüm proxy'sidir.

Performans puanı formülü de 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

İlk Anlamlı Boyamanın (FMP) kullanımdan kaldırılması

Lighthouse 6.0'da İlk Anlamlı Boyama (FMP) desteği sonlandırıldı. Ayrıca, Performans panelinden de kaldırılmıştır. Largest Contentful Paint, FMP'nin yerine kullanılması önerilen seçenektir. Desteğin neden kaldırıldığına dair açıklama için First Meaningful Paint konusuna bakın.

Chromium sorunu #1096008

Yeni JavaScript özellikleri için destek

DevTools artık en yeni JavaScript dili özelliklerinden bazılarını daha iyi desteklemektedir:

İsteğe bağlı zincirleme söz dizimi otomatik tamamlama: Console'daki özellik otomatik tamamlama özelliği, artık isteğe bağlı zincirleme söz dizimini destekliyor. Örneğin, name?. artık name. ve name[ ile birlikte çalışıyor.
Özel alanlar için söz dizimi vurgulama: Özel sınıf alanları artık Kaynaklar panelinde söz dizimiyle doğru şekilde vurgulanıyor ve güzel bir şekilde yazdırılıyor.
Nullish birleştirme operatörü için söz dizimi vurgulama - Geliştirici Araçları, artık Kaynaklar panelinde boş birleştirme operatörünü düzgün şekilde 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 sık yapılan veya önerilen görevleri hızlıca başlatmalarına yardımcı olur.

Manifest bölmesinde artık aşağıdaki durumlarda uyarı gösteriliyor:

uygulama kısayol simgeleri 96x96 pikselden küçük
uygulama kısayolu 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 Service Worker respondWith etkinliklerini içeriyor. respondWith, fetch etkinlik işleyicisinin, fetch işleyicisinin respondWith sözüyle sonuçlandığı zamana kadar çalışmaya başlamasından hemen önceki zamandır.

hizmet çalışanı "responsiveWith"

Chromium sorunu #1066579

Hesaplanan bölmenin tutarlı bir şekilde gösterilmesi

Nesne panelindeki Hesaplanan bölme artık tüm görüntü alanı boyutlarında tutarlı bir şekilde bölme olarak görüntüleniyor. Önceden, Hesaplanan bölmesi DevTools'un görüntü alanının genişliği dar olduğunda Stiller bölmesinin içinde birleşiyordu.

Chromium sorunu #1073899

WebAssembly dosyaları için bayt kodu ofsetleri

Geliştirici Araçları artık Wasm sökme işleminin satır numaralarını görüntülemek için bayt kodu ofsetlerini kullanıyor. Bu, ikili verilere baktığınızı daha açık hale getirir ve Wasm çalışma zamanının konumları referans alma şekliyle daha tutarlıdır.

Bayt kod ofsetleri

Chromium sorunu #1071432

Kaynak Paneli'nde satır bazında kopyalama ve kesme

Kaynaklar paneli düzenleyicisi'nde seçim yapmadan kopyalama veya kesme işlemi yapılırken Geliştirici Araçları, geçerli satır içeriğini kopyalar veya keser. Örneğin, aşağıdaki videoda imleç 1. satırın sonundadır. 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ı iptal et

Konsol Ayarları'ndaki Benzerini gruplandır açma/kapatma düğmesi artık yinelenen iletiler için geçerlidir. Önceden bu ayar yalnızca benzer mesajlara uygulanıyordu.

Örneğin, Geliştirici Araçları daha önce Benzer grup seçeneğinin işareti kaldırılmış olmasına rağmen hello iletilerin gruplandırmasını iptal etmiyordu. Şimdi, hello ileti gruptan çıkarıldı:

Chromium sorunu #1082963

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

Konsol Ayarları'ndaki Yalnızca seçili bağlam ayarları kullanımdadır. Önceden ayarlar Geliştirici Araçları'nı her kapatıp tekrar açtığınızda sıfırlanıyordu. Bu değişiklik, ayar davranışının diğer Konsol Ayarları seçenekleriyle tutarlı olmasını sağlar.

Yalnızca seçili bağlam

Chromium sorunu #1055875

Performans paneli güncellemeleri

Performans panelinde JavaScript derlemesi önbellek bilgileri

JavaScript derleme önbellek bilgileri artık her zaman Performans panelinin Özet sekmesinde gösteriliyor. Daha önce DevTools, kod önbelleğe alma gerçekleşmediğinde kod önbelleğe almayla ilgili hiçbir şey göstermiyordu.

JavaScript derleme önbellek bilgileri

Chromium sorunu #912581

Performans panelinde gezinme zamanlaması hizalaması

Performans paneli, kaydın başladığı zamana dayalı olarak cetvellerde saatleri göstermek için kullanılıyordu. Bu durum artık kullanıcının gezindiği kayıtlar için değişti. Geliştirici Araçları artık bunun yerine gezinmeye göre cetvel sürelerini gösteriyor.

Performans panelinde gezinme zamanlamasını hizalayın

Ayrıca DOMContentLoaded, First Paint, First Contentful Paint ve Largest Contentful Paint etkinliklerinin sürelerini gezinmenin başlangıcına göre güncelledik. Böylece, PerformanceObserver tarafından bildirilen zaman aralıklarıyla eşleşir.

Chromium sorunu #974550

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

Kaynaklar paneli; ayrılma noktaları, koşullu ayrılma noktaları ve günlük noktaları için yeni tasarımlara sahiptir. Ayrılma noktaları, daha parlak ve dost canlı renklerle yenilenmiş bir bayrak tasarımına sahip. Koşullu kesme noktalarını ve günlük noktalarını ayırt etmek için simgeler eklenir.

Kesme noktaları

Chromium sorunu #1041830

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