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 bir flex rozeti görürsünüz. Sayfada bir flex yer paylaşımının gösterilmesini değiştirmek için rozeti tıklayın.

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

Ayrıca Düzen bölmesinde, sayfadaki tüm esnek kutu öğelerini gösteren bir Esnek Kutu bölümü bulunur. Her bir öğenin yer paylaşımını açabilir veya kapatabilirsiniz.

Chromium sorunları: 1166710, 1175699

Yeni Core Web Vitals yer paylaşımı

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

Core Web Vitals, Google'ın web'de mükemmel bir kullanıcı deneyimi sunmak için gerekli olan kalite sinyalleriyle ilgili birleştirilmiş yönergeler sağlamayı amaçlayan bir girişimidir.

Komut menüsünü açın, Oluşturmayı Göster komutunu çalıştırın ve ardından Core Web Vitals onay kutusunu etkinleştirin.

Yer paylaşımında şu anda şunlar gösterilmektedir:

• 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ığında 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'si 0, 1'den az olmalıdır.

Chromium sorunu: 1152089

Sorunlar sekmesi güncellemeleri

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

Sorun uyarılarının görünürlüğünü iyileştirmek için Konsol durum çubuğuna yeni bir sorun sayısı düğmesi eklendi. Bu işlem, Console'daki sorun mesajını değiştirir.

Chromium sorunu: 1140516

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

Sorunlar sekmesi artık Güvenilir Web Etkinliği sorunlarını da bildirir. Bu, geliştiricilerin sitelerindeki Güvenilir Web Etkinliği sorunlarını anlayıp düzelterek uygulamalarının kalitesini artırmasına yardımcı olmayı amaçlamaktadır.

Güvenilir Web Etkinliği'ni 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. Güvenilir Web Etkinliği'ni oluşturma ve dağıtma hakkında daha fazla bilgi edinmek için Andre'nin bu konuşmasını izleyin.

Chromium sorunu: 1147479

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

Artık Konsol, dizeleri Konsolda geçerli JavaScript dizesi 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 panelindeki yeni Güven Jetonları bölmesi

DevTools artık mevcut tarama bağlamındaki tüm Güven Jetonlarını Uygulama panelinin altındaki yeni Güven Jetonları bölmesinde gösterir.

Trust Token, pasif izleme olmadan sahtekarlıkla mücadele etmeye ve botları gerçek kullanıcılardan ayırt etmeye yardımcı olan yeni bir API'dir. Güven rozetleri kullanmaya nasıl başlayacağınızı öğrenin.

Chromium sorunu: 1126824

CSS renk gamı medya özelliğini emülasyon

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ı Display-P3 renk alanını destekler.

Komut menüsünü açın, Oluşturma işlemini göster komutunu çalıştırın ve ardından CSS medya özelliği renk gamı emülasyonu açılır menüsünü ayarlayın.

Chromium sorunu: 1073887

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

Geliştirici Araçları artık Konsol'da Progresif Web Uygulamaları (PWA) yüklenilebilirliğiyle ilgili daha ayrıntılı bir uyarı mesajı ve dokümanların bağlantısını gösteriyor.

Bildiri açıklaması 324 karakteri aşarsa Bildiri bölmesinde artık bir uyarı mesajı gösteriliyor.

Ayrıca, Manifest bölmesinde artık PWA'nın ekran görüntüsü şartlara uymuyorsa bir uyarı mesajı gösteriliyor. PWA ekran görüntüleri mülkü 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ı aşırı durumlarda 10 kat performans artışı gördük.

DevTools, yığın izlemelerini toplar ve geliştiricinin sorun durumunda daha sonra kullanabilmesi için konsol mesajlarına veya eşzamansız görevlere ekler. Bu toplama işleminin tarayıcı motorunda senkronize olarak yapılması gerektiğinden, yavaş yığın izleme toplama işlemi, DevTools açıkken sayfayı önemli ölçüde yavaşlatabilir. Yığın izleme toplama işleminin ek yükünü önemli ölçüde azaltmayı başardık.

Uygulamayla ilgili 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/izin verilmeyen özellikleri gösterme

Çerçeve ayrıntıları görünümünde artık izinler politikası tarafından kontrol edilen izin verilen ve izin verilmeyen tarayıcı özelliklerinin listesi gösteriliyor.

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

Chromium sorunu: 1158827

Kurabiyeler bölmesinde yeni SameParty sütunu

Uygulama panelindeki Çerezler bölmesinde artık çerezlerin SameParty özelliği gösteriliyor. SameParty özelliği, bir çerezin aynı First-Party Sets kaynaklarının isteklerine dahil edilip edilmeyeceğini belirten yeni bir boole özelliğidir.

Chromium sorunu: 1161427

Standart olmayan fn.displayName desteği kullanımdan kaldırıldı

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

Chrome, geliştiricilerin error.stack ve DevTools yığın izlemelerinde görünen işlevlerin hata ayıklama adlarını kontrol etmeleri için geleneksel olarak standart olmayan fn.displayName mülkünü desteklemiştir. Yukarıdaki örnekte, Çağrı Yığını daha önce noLongerSupport değerini gösteriyordu.

fn.displayName özelliğini, ECMAScript 2015'te standart olmayan fn.displayName özelliğinin yerini almak için yapılandırılabilir (Object.defineProperty aracılığıyla) standart fn.name ile değiştirin.

fn.displayName desteği, tarayıcı motorları arasında tutarlı ve güvenilir olmamıştır. Yığın izleme toplama işlemini yavaşlatır. Bu, fn.displayName'ü kullanıp kullanmadıklarına bakılmaksızın geliştiricilerin her zaman ödemek zorunda olduğu bir maliyettir.

Chromium sorunu: 1177685

Ayarlar menüsündeki Don't show Chrome Data Saver warning desteğinin sonlandırılması

Chrome Veri Tasarrufu 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 düşük kontrastlı sorunların otomatik olarak bildirilmesi

Geliştirici Araçları, Sorunlar sekmesinde kontrast sorunlarını otomatik olarak bildirmek için deneysel destek ekledi.

Düşük kontrastlı metin, web'de otomatik olarak algılanan 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ının olduğu bir sayfa açın (ör. bu demo). 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 iyileş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üğümlerini sınırlı bir şekilde gösterir. Yalnızca kök düğümden incelenen düğüme giden doğrudan ata zincirini gösterir. Yeni erişilebilirlik ağaç görünümü bu durumu iyileştirmeyi amaçlar ve erişilebilirlik ağacını daha keşfedilebilir, faydalı ve geliştiricilerin kullanımı için daha kolay hale getirir.

Denemeyi etkinleştirdikten sonra Öğeler panelinde yeni bir düğme gösterilir. Mevcut DOM ağacı ile tam erişilebilirlik ağacı arasında geçiş yapmak için bu düğmeyi tıklayın.

Bunun erken aşamada olan bir deneme olduğunu lütfen unutmayın. Zaman içinde bu işlevi 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, 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.

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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