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 daha iyi şekilde destekliyor. Birçok CSS-in-JS çerçevesi ve kitaplığı, stilleri oluşturmak için arka planda CSSOM API'lerini kullanır.

JavaScript'te eklenen stilleri artık Oluşturulabilir Stil Sayfaları kullanarak da 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üzenlenemez. Artık Stiller bölmesinde bu öğeleri düzenleyebilirsiniz:

Chromium sorunu #946975

Deniz Feneri panelindeki Lighthouse 6

Lighthouse paneli şu anda Lighthouse 6'yı çalıştırıyor. Tüm önemli değişikliklerin özeti için Lighthouse 6.0'daki Yenilikler sayfasına veya 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 ekliyor: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ve Toplam Engelleme Süresi (TBT). LCP ve CLS, Google'ın yeni Önemli Web Verileri'nden ikisidir. TBT ise başka bir Core Web Vitals İlk Giriş Gecikmesi için laboratuvar ölçüm proxy'sidir.

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

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 panelinden kaldırılmıştır. Largest Contentful Paint, FMP'nin yerine önerilen seçenektir. Neden kullanımdan kaldırıldığına dair bir açıklama için First aningful Paint bölümüne bakın.

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: Konsol'da ö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 dizimini doğru bir şekilde vurguluyor ve okunaklı hale getiriyor.
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 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ışmasından hemen önce, fetch işleyicinin respondWith taahhüdünün yerine getirildiği ana kadar olan süredir.

hizmet çalışanı "yanıt"

Chromium sorunu #1066579

Hesaplanan bölmenin tutarlı gösterimi

Öğeler panelindeki Hesaplanan bölme, artık tüm görüntü alanı boyutlarında tutarlı bir bölme olarak görüntülenir. Önceden Hesaplanan bölme, Geliştirici Araçları'nın 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 ayrıştırma işleminin satır numaralarını görüntülemek için bayt kodu ofsetlerini kullanıyor. Böylece ikili verilere baktığınız daha net olur ve Wasm çalışma zamanının konumlara referans verme biçimiyle daha tutarlı olur.

Bayt kodu ofsetleri

Chromium sorunu #1071432

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

Geliştirici Araçları, Kaynaklar paneli düzenleyicisinde seçim yapmadan kopyalama veya kesme işlemi gerçekleştirirken mevcut 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 Benzeri gruplandır açma/kapatma düğmesi artık yinelenen iletiler için de geçerlidir. Önceden yalnızca benzer mesajlara uygulanıyordu.

Örneğin, Geliştirici Araçları daha önce Benzeri gruplandır seçeneği işaretlenmemesine rağmen hello iletilerinin gruplandırmasını çözmüyordu. 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. Daha önce, Geliştirici Araçları'nı her kapatıp 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şmediğinde Geliştirici Araçları, kod önbelleğe almayla ilgili hiçbir şey göstermiyordu.

JavaScript derleme önbelleği bilgileri

Chromium sorunu #912581

Performans panelinde gezinme zamanlaması hizalaması

Kaydın ne zaman başladığına bağlı olarak cetvellerde zamanları göstermek için kullanılan Performans paneli. Bu durum, kullanıcının gezindiği kayıtlar için değişti. Geliştirici Araçları artık gezinmeye göre cetvel zamanlarını gösteriyor.

Performans panelinde gezinme zamanlamasını hizalama

Ayrıca DOMContentLoaded, First Contentful Paint ve Largest Contentful Paint etkinliklerinin zamanlarını gezinmenin başlangıcına göre güncelleyerek de PerformanceObserver tarafından bildirilen zamanlamalarla eşleşecek şekilde güncelledik.

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. Koşullu ayrılma 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, 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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.