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

Jecelyn Yeen

JS'de CSS çerçeveleri için stil düzenleme

Stil bölmesi artık CSS Nesne Modeli (CSSOM) API'leriyle oluşturulan stilleri düzenlemek için daha iyi destek sunar. Birçok JS'de CSS ç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'e 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üzenlenemezdi. Artık Stil bölmesinde düzenlenebilir öğeler vardır:

Chromium sorunu #946975

Lighthouse panelinde Lighthouse 6

Lighthouse panelinde artık Lighthouse 6 kullanılıyor. Tüm önemli değişikliklerin özetini görmek için Lighthouse 6.0'ta Yenilikler başlıklı makaleyi inceleyin. Tüm değişikliklerin tam listesini görmek için 6.0.0 sürüm notlarına göz atın.

Lighthouse 6.0, rapora üç yeni metrik ekler: Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS) ve Total Blocking Time (TBT). LCP ve CLS, Google'ın yeni Core Web Vitals metriklerinden ikisidir. TBT ise başka bir Core Web Vital olan First Input Delay 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'taki yeni performans metrikleri

Chromium sorunu #772558

İlk Anlamlı Boyama (FMP) desteğinin sonlandırılması

İlk Anlamlı Boyama (FMP), Lighthouse 6.0'ta kullanımdan kaldırılmıştır. Performans panelinden de kaldırıldı. Largest Contentful Paint, FMP için önerilen değişim öğesidir. Kullanımdan kaldırılmasının nedeni için İlk Anlamlı Boyama başlıklı makaleyi inceleyin.

Chromium sorunu #1096008

Yeni JavaScript özellikleri için destek

DevTools, en son JavaScript dil özelliklerinden bazıları için artık daha iyi destek sunar:

  • İsteğe bağlı zincirleme söz dizimi otomatik tamamlama: Console'daki mülk otomatik tamamlama özelliği artık isteğe bağlı zincirleme söz dizimini destekliyor. Örneğin, name. ve name['e ek olarak name?. de artık çalışıyor.
  • Gizli alanlar için söz dizimi vurgulama: Gizli sınıf alanları artık Kaynaklar panelinde uygun şekilde söz dizimi vurgulanmış ve güzel bir şekilde yazdırılmış olarak gösteriliyor.
  • Boş birleştiren operatör için söz dizimi vurgulama: Geliştirici Araçları artık Kaynaklar panelinde boş birleştiren operatörü düzgün bir şekilde güzel bir ş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 kullanılan veya önerilen görevleri hızlı bir şekilde başlatmasına yardımcı olur.

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

  • Uygulama kısayol simgelerinin boyutu 96x96 pikselden küçükse
  • Uygulama kısayol simgeleri ve manifest simgeleri kare değilse (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, hizmet çalışanı fetch etkinlik işleyicisinin çalıştırılmasının hemen öncesinden fetch işleyicisinin respondWith vaadinin yerine getirildiği zamana kadar geçen süredir.

hizmet çalışanı "respondWith"

Chromium sorunu #1066579

Hesaplanan bölmesinin tutarlı şekilde gösterilmesi

Nesneler panelindeki Hesaplanmış bölmesi artık tüm ekran boyutlarında bölme olarak tutarlı bir şekilde gösteriliyor. Daha önce, DevTools'un görüntü alanının genişliği dar olduğunda Hesaplanmış bölmesi Stil bölmesinin içinde birleştiriliyordu.

Chromium sorunu #1073899

WebAssembly dosyaları için bayt kodu ofsetleri

DevTools artık Wasm'in ayrıştırılmış kodunun satır numaralarını görüntülemek için bayt kodu ofsetlerini kullanıyor. Bu, ikili verilere baktığınızı daha net bir şekilde gösterir ve Wasm çalışma zamanının konumlara referans verme şekliyle daha tutarlıdır.

Bayt kodu ofsetleri

Chromium sorunu #1071432

Kaynaklar panelinde satır bazında kopyalama ve kesme

Kaynaklar paneli düzenleyicisinde seçim yapılmadan kopyalama veya kesme işlemi gerçekleştirdiğinizde DevTools, mevcut satır içeriğini kopyalar veya keser. Örneğin, aşağıdaki videoda imleç 1. satırın sonundadır. Kes klavye kısayoluna bastı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

Console ayarlarındaki Benzer mesajları gruplandır düğmesi artık kopya mesajlar için de geçerlidir. Daha önce bu özellik yalnızca benzer iletiler için geçerliydi.

Örneğin, daha önce DevTools, Benzerleri grupla seçeneğinin işareti kaldırılmış olsa bile hello iletilerinin gruplamasını kaldırmadı. hello iletilerin gruplandırması kaldırıldı:

Chromium sorunu #1082963

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

Console ayarlarındaki Yalnızca seçili bağlam ayarları artık kalıcı. Daha önce ayarlar, DevTools'u kapatıp her açtığınızda sıfırlanıyordu. Bu değişiklik, ayar davranışını diğer Console 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 her zaman Performans panelinin Özet sekmesinde gösterilir. Daha önce, kod önbelleğe alınmadıysa Geliştirici Araçları kod önbelleğe alma ile ilgili hiçbir şey göstermiyordu.

JavaScript derleme önbelleği bilgileri

Chromium sorunu #912581

Performans paneli, kayıtın başladığı zamana göre cetvellerde zamanları göstermek için kullanılır. Bu durum, kullanıcının gezindiği kayıtlarda değişti. DevTools artık gezinmeye göre cetvel zamanlarını gösteriyor.

Performans panelinde gezinme zamanlamasını hizalama

Ayrıca DOMContentLoaded, İlk Boyama, İlk Zengin İçerikli Boyama ve En Büyük Zengin İçerikli Boyama etkinliklerinin zamanlarını, gezinmenin başlangıcına göre güncelledik. Bu sayede, PerformanceObserver tarafından raporlanan zamanlamalarla eşleşecekler.

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ır. Kırılma noktaları, daha parlak ve daha samimi renklere sahip yeni bir işaret tasarımına kavuştu. 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 sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.