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

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

Jecelyn Yeen

Yeni CSS flexbox hata ayıklama araçları

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

CSS flexbox hata ayıklama araçları

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

Stiller bölmesinde display: flex veya display: inline-flex öğesinin yanındaki yeni simgeyi tıklayarak Flexbox düzenleyiciyi açabilirsiniz. Flexbox düzenleyicisi, flexbox özelliklerini düzenlemenin hızlı bir yolunu sunar. Kendiniz deneyin

Buna ek olarak, Layout (Düzen) bölmesinde Flexbox bölümü vardır. Sayfadaki tüm flexbox öğelerini görüntüler. Her bir öğenin yer paylaşımını açıp kapatabilirsiniz.

Düzen bölmesindeki Flexbox bölümü

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 gösterilen bilgiler:

Largest Contentful Paint (LCP): yükleme performansını ölçer. İyi bir kullanıcı deneyimi sağlamak için LCP, sayfa yüklenmeye başladıktan sonra 2,5 saniye içinde gerçekleşmelidir.
İlk Giriş Gecikmesi (FID): Etkileşimi ölçer. İyi bir kullanıcı deneyimi sağlamak için sayfaların FID değeri 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.

Core Web Vitals yer paylaşımı

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şlemle Konsol'daki sorun iletisi değiştirilecek.

Console durum çubuğundaki sorun sayısı

Chromium sorunu: 1140516

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

Sorunlar sekmesinde artık Güvenilir Web Etkinliği sorunları bildiriliyor. Bunun amacı, geliştiricilerin sitelerinin Güvenilir Web Etkinliği sorunlarını anlamalarına ve düzeltmelerine, böylece uygulamalarının kalitesini yükseltmelerine yardımcı olmaktır.

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

Sorunlar sekmesindeki Güvenilir Web Etkinliği sorunları

Chromium sorunu: 1147479

Konsolda dizeleri (geçerli) JavaScript dizesi sabit değerleri olarak biçimlendirme

Artık Konsol, dizeleri Console'da geçerli JavaScript dizesi sabit değerleri olarak biçimlendiriyor. Daha önce Konsol, dizeleri yazdırırken çift tırnak işaretlerini kod dışına almıyordu.

Dizeleri (geçerli) JavaScript dizesi sabit değerleri olarak biçimlendirme

Chromium sorunu: 1178530

Uygulama panelindeki yeni Güven Jetonları bölmesi

Geliştirici Araçları, artık tüm kullanılabilir Güven Jetonlarını, Uygulama panelindeki yeni Güven Jetonları bölmesindeki mevcut tarama bağlamında gösterir.

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. Güven Jetonlarını kullanmaya nasıl başlayacağınızı öğrenin.

Yeni Güven Jetonları bölmesi

Chromium sorunu: 1126824

CSS renk gamı medya özelliği emülasyonu

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ı cihazının Display-P3 renk alanını desteklediği anlamına gelir.

Komut Menüsü'nü açın, Oluşturmayı Göster komutunu çalıştırın ve ardından CSS medya özelliği renk gamı emülasyonu açılır listesini ayarlayın.

Chromium sorunu: 1073887

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

Geliştirici Araçları artık Konsolda, belgelerin bağlantısını içeren daha ayrıntılı bir Progresif Web Uygulamaları (PWA) yüklenebilirlik uyarı mesajı gösteriyor.

PWA yüklenebilirlik uyarısı

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

PWA açıklama kırpma uyarısı

Ayrıca, PWA'nın ekran görüntüsü koşullarla eşleşmiyorsa Manifest bölmesinde artık bir uyarı mesajı görüntülenmektedir. PWA ekran görüntüleri özelliği ve gereksinimleri hakkında daha fazla bilgiyi burada bulabilirsiniz.

PWA ekran görüntüsü uyarısı

Chromium sorunu: 1146450, 1169689, 965802

Ağ panelinde yeni `Remote Address Space` sütunu

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

Yeni "Uzak Adres Alanı" sütunu

Chromium sorunu: 1128885

Performans iyileştirmeleri

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

DevAraçlar, yığın izlemeleri toplar ve bir sorun olması durumunda geliştiricinin daha sonra kullanması için konsol mesajlarına veya eşzamansız görevlere ekler. Bu toplamanın tarayıcı motorunda eşzamanlı olarak yapılması gerektiğinden, yavaş yığın izleme (stack trace) toplama işlemi, Geliştirici Araçları açıkken sayfayı önemli ölçüde yavaşlatabilir. Yığın izleme (stack trace) 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öster

Çerçeve ayrıntıları görünümünde artık İzinler Politikası tarafından kontrol edilen izin verilen ve 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 bunu engelleme olanağı sağlayan bir web platformu API'sidir.

İzin politikasına göre izin verilen/izin verilmeyen özellikler

Chromium sorunu: 1158827

Çerezler bölmesinde yeni `SameParty` sütunu

Uygulama panelindeki Çerezler bölmesinde artık çerezlerin SameParty özelliği görüntüleniyor. SameParty özelliği, bir çerezin aynı Birinci Taraf Gruplar'daki kaynaklara yapılan isteklere dahil edilip edilmeyeceğini belirten yeni bir boole özelliğidir.

SameParty sütunu

Chromium sorunu: 1161427

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

Standart olmayan fn.displayName desteği sonlandırıldı. Bunun yerine fn.name politikasını kullanın.

DisplayName kullanımına örnek

Chrome, geliştiricilerin error.stack ve Geliştirici Araçları yığın izlemelerinde görünen işlevler için hata ayıklama adlarını kontrol etmelerinin bir yolu olarak standart olmayan fn.displayName özelliğini geleneksel olarak desteklemiştir. Yukarıdaki örnekte, Arama Grubu'nda daha önce noLongerSupport gösteriliyordu.

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

fn.displayName desteği güvenilir değildi ve tarayıcı motorları arasında tutarlı değildi. Yığın izleme (stack trace) koleksiyonunu yavaşlatır. Bu, geliştiricilerin fn.displayName kullanıyor olsalar da olmasalar da her zaman ödedikleri bir maliyettir.

Ad kullanımına örnek

Chromium sorunu: 1177685

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

Chrome Veri Tasarrufu kullanımdan kaldırıldığı için Don't show Chrome Data Saver warning ayarı kaldırılmıştır.

"Chrome Veri Tasarrufu uyarısını gösterme" ayarları kullanımdan kaldırıldı

Chromium sorunu: 1056922

Deneysel özellikler

Sorunlar sekmesinde otomatik düşük kontrast sorunu raporlama

Geliştirici Araçları'na, Sorunlar sekmesinde kontrast sorunlarının raporlanması için otomatik olarak deneysel destek eklendi.

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şfetmesini sağlar.

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

Otomatik düşük kontrast sorunu bildirme

Chromium sorunu: 1155460

Nesne panelinde tam erişilebilirlik ağaç 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.

Geçerli erişilebilirlik bölmesi, yalnızca kök düğümden incelenen düğüme kadar olan doğrudan üst öğe zincirini göstererek düğümlerinin sınırlı bir görünümünü sunar. Yeni erişilebilirlik ağacı görünümü bunu iyileştirmeyi amaçlamakta ve erişilebilirlik ağacını daha keşfedilebilir, faydalı ve geliştiricilerin kullanması 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 tıklayın.

Bunun erken aşamadaki bir deneme olduğunu lütfen unutmayın. Zaman içinde işlevselliği iyileştirmeyi ve genişletmeyi planlıyoruz.

Tam erişilebilirlik ağacı görünümü

Chromium sorunu: 887173

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