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

Yeni CSS flexbox hata ayıklama araçları

Geliştirici Araçları'nda artık özel CSS flexbox hata ayıklama araçları var.

Sayfanızdaki bir HTML öğesine display: flex veya display: inline-flex uygulandığında, Öğeler panelinde öğenin yanında flex rozeti görürsünüz. Sayfada esnek bir yer paylaşımının gösterilmesini açmak veya kapatmak için rozeti tıklayın.

Stiller bölmesinde, display: flex veya display: inline-flex simgesinin yanındaki yeni simgeyi tıklayarak Flexbox düzenleyiciyi açabilirsiniz. Flexbox düzenleyici, flexbox özelliklerini hızlı bir şekilde düzenlemenizi sağlar. Kendiniz deneyin.

Ayrıca, Düzen bölmesinde Flexbox bölümü bulunur. Bu bölümde, sayfadaki tüm flexbox öğeleri gösterilir. Her öğenin yer paylaşımını açıp kapatabilirsiniz.

Chromium sorunları: 1166710, 1175699

Yeni Core Web Vitals yer paylaşımı

Yeni Core Web Vitals yer paylaşımı ile sayfa performansınızı daha iyi görselleştirin ve ölçün.

Önemli Web Verileri, Google tarafından başlatılan bir girişimdir. Bu girişimin amacı, internette mükemmel bir kullanıcı deneyimi sunmak için gerekli olan kalite göstergeleri hakkında tek bir kılavuz sağlamaktır.

Komut menüsünü açın, Show Rendering komutunu çalıştırın ve Core Web Vitals onay kutusunu etkinleştirin.

Yer paylaşımında şu anda gösterilenler:

• Largest Contentful Paint (LCP): Yükleme performansını ölçer. İyi bir kullanıcı deneyimi sağlamak için LCP, sayfa ilk kez yüklenmeye başladıktan sonraki 2,5 saniye içinde gerçekleşmelidir.
• First Input Delay (FID): Etkileşimi ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların FID'si 100 milisaniyeden kısa olmalıdır.
• Cumulative Layout Shift (CLS): Görsel kararlılığı ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların CLS değeri 0, 1'den az olmalıdır.

Chromium sorunu: 1152089

Sorunlar sekmesi güncellemeleri

Sorun sayısı, Konsol durum çubuğuna taşındı

Konsol durum çubuğuna, sorun uyarılarının görünürlüğünü artırmak için yeni bir sorun sayısı düğmesi eklendi. Bu işlem, Console'daki sorun mesajının yerini alır.

Chromium sorunu: 1140516

Güvenilir Web Etkinliği sorunlarını bildirme

Sorunlar sekmesinde artık Güvenilir Web Etkinliği sorunları bildiriliyor. Bu, geliştiricilerin sitelerinin Güvenilir Web Etkinliği sorunlarını anlamalarına ve düzeltmelerine yardımcı olarak uygulamalarının kalitesini artırmayı amaçlar.

Güvenilir Web Etkinliği açın. Ardından, sorunları görüntülemek için Console durum çubuğundaki Sorun sayısı düğmesini tıklayarak Sorunlar sekmelerini açın. Andre'nin bu konuşmasını izleyerek Güvenilir Web Etkinliği oluşturma ve dağıtma hakkında daha fazla bilgi edinin.

Chromium sorunu: 1147479

Konsolda dizeleri (geçerli) JavaScript dize değişmez değerleri olarak biçimlendirin.

Artık Console, dizeleri Console'da geçerli JavaScript dize değişmezleri olarak biçimlendiriyor. Daha önce Console, dizeleri yazdırırken çift tırnak işaretlerinden kaçmıyordu.

Chromium sorunu: 1178530

Uygulama panelinde yeni Güven Jetonları bölmesi

DevTools artık Uygulama panelinin altındaki yeni Güven Jetonları panelinde, mevcut tarama bağlamında kullanılabilen tüm Güven Jetonlarını gösteriyor.

Trust Token, pasif izleme olmadan sahtekarlıkla mücadele etmeye ve botları gerçek insanlardan ayırt etmeye yardımcı olan yeni bir API'dir. Trust Tokens'ı kullanmaya başlama hakkında bilgi edinin.

Chromium sorunu: 1126824

CSS renk gamı medya özelliğini taklit etme

color-gamut medya sorgusu, tarayıcı ve çıkış cihazı tarafından desteklenen yaklaşık renk aralığını test etmenize olanak tanır. Örneğin, color-gamut: p3 medya sorgusu eşleşirse kullanıcının cihazının Display-P3 renk alanını desteklediği anlaşılır.

Komut Menüsü'nü açın, Show Rendering komutunu çalıştırın ve Emulate CSS media feature color-gamut açılır listesini ayarlayın.

Chromium sorunu: 1073887

Geliştirilmiş Progresif Web Uygulamaları araçları

Geliştirici Araçları artık Konsol'da Progressive Web Apps (PWA) yüklenememe uyarı mesajını daha ayrıntılı olarak gösteriyor. Ayrıca, dokümanlara bağlantı da ekleniyor.

Manifest bölmesi, manifest açıklaması 324 karakteri aştığında artık bir uyarı mesajı gösteriyor.

Ayrıca, PWA'nın ekran görüntüsü şartları karşılamıyorsa Manifest bölmesinde artık bir uyarı mesajı gösteriliyor. PWA ekran görüntüleri özelliği ve koşulları hakkında daha fazla bilgiyi burada bulabilirsiniz.

Chromium sorunu: 1146450, 1169689, 965802

Ağ panelinde yeni Remote Address Space sütunu

Her ağ kaynağının ağ IP adresi alanını görmek için Ağ panelindeki yeni Remote Address Space sütununu kullanın.

Chromium sorunu: 1128885

Performans iyileştirmeleri

Geliştirici Araçları açıkken sayfa yükleme performansı iyileştirildi. Bazı durumlarda 10 kat performans artışı gördük.

DevTools, yığın izlemelerini toplar ve bir sorun olması durumunda geliştiricinin daha sonra kullanabilmesi için bunları konsol iletilerine veya eşzamansız görevlere ekler. Bu toplama işlemi tarayıcı motorunda senkron olarak gerçekleştiğinden yavaş yığın izi toplama işlemi, Geliştirici Araçları açıkken sayfayı önemli ölçüde yavaşlatabilir. Yığın izi toplama işleminin ek yükünü önemli ölçüde azaltmayı başardık.

Uygulama hakkında daha ayrıntılı bir mühendislik blog yayını için bizi takip etmeye devam edin.

Chromium sorunları: 1069425, 1077657

Çerçeve ayrıntıları görünümünde izin verilen/verilmeyen özellikleri görüntüleme

Kare ayrıntıları görünümünde artık izin verilen ve verilmeyen tarayıcı özelliklerinin listesi gösteriliyor. Bu özellikler, izin politikası tarafından kontrol ediliyor.

İzin politikası, bir web sitesine kendi çerçevesinde veya yerleştirdiği iFrame'lerde tarayıcı özelliklerinin kullanımına izin verme ya da bunları engelleme olanağı tanıyan bir web platformu API'sidir.

Chromium sorunu: 1158827

Çerezler bölmesinde yeni SameParty sütunu

Uygulama panelindeki Çerezler bölmesi artık çerezlerin SameParty özelliğini gösteriyor. SameParty özelliği, bir çerezin aynı Birinci Taraf Grupların kaynaklarına yapılan isteklere dahil edilip edilmeyeceğini belirten yeni bir boolean özelliğidir.

Chromium sorunu: 1161427

Kullanımdan kaldırılan standart dışı fn.displayName desteği

Standart olmayan fn.displayName için destek sonlandırıldı. Bunun yerine fn.name politikasını kullanın.

Chrome, geliştiricilerin fn.displayName ve Geliştirici Araçları yığın izlemelerinde gösterilen işlevlerin hata ayıklama adlarını kontrol etmelerine olanak tanıyan bir yöntem olarak geleneksel olarak standart olmayan fn.displayName özelliğini desteklemiştir.error.stack Yukarıdaki örnekte, Call Stack daha önce noLongerSupport olarak gösteriliyordu.

Standart olmayan fn.displayName özelliğinin yerine geçmesi için ECMAScript 2015'te yapılandırılabilir (Object.defineProperty aracılığıyla) hale getirilen standart fn.name ile fn.displayName yerine geçin.

fn.displayName desteği güvenilir olmamış ve tarayıcı motorlarında tutarlı bir şekilde sunulmamıştır. Bu durum, yığın izi toplama işlemini yavaşlatır. Geliştiriciler, fn.displayName'ı gerçekten kullanıp kullanmadıklarına bakılmaksızın bu maliyeti her zaman öder.

Chromium sorunu: 1177685

Ayarlar menüsündeki Don't show Chrome Data Saver warning seçeneğinin desteği sonlandırılıyor

Chrome'da Veri Tasarrufu özelliği desteği sonlandırıldığı için Don't show Chrome Data Saver warning ayarı kaldırıldı.

Chromium sorunu: 1056922

Deneysel özellikler

Sorunlar sekmesinde otomatik düşük kontrast sorunu raporlama

DevTools, Sorunlar sekmesinde kontrast sorunlarının otomatik olarak bildirilmesi için deneysel destek ekledi.

Düşük kontrastlı metin, web'de otomatik olarak algılanabilen en yaygın erişilebilirlik sorunudur. Bu sorunların Sorunlar sekmesinde gösterilmesi, geliştiricilerin bu sorunları daha kolay keşfetmesine yardımcı olur.

Düşük kontrast sorunları olan bir sayfayı (ör. bu demo) açın. Ardından, sorunları görüntülemek için Console durum çubuğundaki Sorun sayısı düğmesini tıklayarak Sorunlar sekmelerini açın.

Chromium sorunu: 1155460

Nesne panelinde tam erişilebilirlik ağacı görünümü

Artık bir sayfanın yeni ve geliştirilmiş tam erişilebilirlik ağacı görünümünü görüntülemek için geçiş yapabilirsiniz.

Mevcut erişilebilirlik bölmesi, düğümlerinin sınırlı bir görünümünü sunar ve yalnızca kök düğümden incelenen düğüme kadar olan doğrudan üst öğe zincirini gösterir. Yeni erişilebilirlik ağacı görünümü, bu durumu iyileştirmeyi amaçlar ve erişilebilirlik ağacını daha keşfedilebilir, faydalı ve geliştiricilerin kullanması daha kolay hale getirir.

Deneme etkinleştirildikten sonra Nesneler panelinde yeni bir düğme gösterilir. Bu düğmeyi tıklayarak mevcut DOM ağacı ile tam erişilebilirlik ağacı arasında geçiş yapabilirsiniz.

Bu özelliğin erken aşamadaki bir deneme olduğunu lütfen unutmayın. Bu işlevi zaman içinde iyileştirmeyi ve genişletmeyi planlıyoruz.

Chromium sorunu: 887173

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