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 Nesne panelinde, yanında bir flex rozeti görebilirsiniz. Bir esnek yer paylaşımı.

Stiller bölmesinde, display: flex öğesinin yanındaki yeni simgeyi veya Flexbox düzenleyiciyi açmak için display: inline-flex tuşlarına basın. Flexbox düzenleyici, düzenleme işlemlerini hızlı bir şekilde yapmanızı sağlar flexbox özelliklerine sahiptir. Kendiniz deneyin

Buna ek olarak, Layout (Düzen) bölmesinde Flexbox bölümü vardır. Flexbox'ta tüm flexbox öğelerini sayfasını ziyaret edin. Her bir öğ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ıyla sayfa performansınızı daha iyi görselleştirin ve ölçün.

Core Web Vitals, Google'ın geliştirdiği kalite sinyallerine dair birleşik kılavuzlar sunmayı amaçlayan bir web'de mükemmel bir kullanıcı deneyimi sunmak için kritik önem taşır.

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

Yer paylaşımında şu anda gösterilen bilgiler:

• Largest Contentful Paint (LCP): yükleme performansını ölçer. İyi bir kullanıcı deneyimi deneyiminde, LCP sayfanın ilk yüklenmeye başlamasından itibaren 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 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 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ı

Konsol durum çubuğuna, hesabınızın görünürlüğünü iyileştirmek için yeni bir sorun sayısı düğmesi eklendi. uyarı gönderir. Bu işlemle Konsol'daki sorun iletisi değiştirilecek.

Chromium sorunu: 1140516

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

Sorunlar sekmesinde artık Güvenilir Web Etkinliği sorunları bildiriliyor. Bu amacı, geliştiricilerin sitelerinin Güvenilir Web Etkinliği sorunlarını anlar ve düzelterek, bu etkinliklerin izin verir.

Güvenilir bir Web Etkinliği açın. Ardından, Sorun sayısı'nı tıklayarak Sorunlar sekmelerini açın. Konsol düğmesini kullanarak sorunları görüntüleyin. Öğrenmek için Andre'nin bu konuşmasını izleyin. Güvenilir Web Etkinliği oluşturma ve dağıtma hakkında daha fazla bilgi edinin.

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

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ı yeni Güven Uygulama panelinin altında Jetonlar bölmesini tıklayın.

Güven Jetonu, sahtekarlıkla mücadele etmeye ve botları pasif olmadan gerçek insanlardan ayırt etmeye yardımcı olan yeni bir API'dir izleyebilirsiniz. Güven Jetonlarını kullanmaya nasıl başlayacağınızı öğrenin.

Chromium sorunu: 1126824

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

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

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

Chromium sorunu: 1073887

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

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

Manifest açıklaması 324'ü geçerse Manifest bölmesinde artık bir uyarı mesajı gösteriliyor. karakteri ekleyin.

Ayrıca, PWA'nın ekran görüntüsü artık görünmüyorsa Manifest bölmesinde bir uyarı mesajı gösteriliyor. ve gerekliliklere uygun olmalı. PWA ekran görüntüleri özelliği ve şartları hakkında daha fazla bilgi burayı tıklayın.

Chromium sorunu: 1146450, 1169689, 965802

Ağ panelinde yeni Remote Address Space sütunu

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

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 iyileştirmeleri.

Geliştirici Araçları, yığın izlemeleri toplar ve daha sonra kullanılmak üzere konsol mesajlarına veya eşzamansız görevlere ekler geliştirici tarafından tüketilmesi. Bu koleksiyonun eşzamanlı olarak oluşturulması gerektiğinden veya yığın izlemelerin yavaş toplanması, sayfayı önemli ölçüde yavaşlatabilir. Geliştirici Araçları açık. 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

Kare ayrıntıları görünümünde artık İzin politikası.

İzinler politikası, web sitelerine izin verme veya engelleme olanağı sunan bir web platformu API'sidir. Tarayıcı özelliklerinin kendi çerçevesinde veya yerleştirdiği iframe'lerde kullanımı.

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. İlgili içeriği oluşturmak için kullanılan SameParty özelliği, bir çerezin Aynı Birinci Taraf Gruplar'ın kaynaklarına yapılan istekler.

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.

Chrome, başarılı bir tarama yöntemi olarak standart olmayan fn.displayName özelliğini geleneksel olarak desteklemektedir. geliştiricilerin error.stack ve Geliştirici Araçları yığınında gösterilen işlevler için hata ayıklama adlarını kontrol etmesini sağlar izler. Yukarıdaki örnekte, Arama Grubu'nda daha önce noLongerSupport gösteriliyordu.

fn.displayName öğesini, yapılandırılabilir hale getirilen standart fn.name ile değiştirin ( Object.defineProperty) kaldırın.fn.displayName

fn.displayName desteği güvenilir değildi ve tarayıcı motorları arasında tutarlı değildi. Yavaşlıyor aşağı yığın izleme (stack trace) koleksiyonu, geliştiricilerin fn.displayName veya değil.

Chromium sorunu: 1177685

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

Chrome Veri Tasarrufu etkinleştirildiği için Don't show Chrome Data Saver warning ayarı kaldırıldı desteği sonlandı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 sekmelerini Sorunları görüntülemek için Konsol durum çubuğundaki Sorun sayısı düğmesini tıklayarak.

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, düğümlerinin sınırlı bir görüntüsünü sağlar ve yalnızca kök düğümden denetlenen düğüme doğrudan üst öğe zincirini bağlayabilirsiniz. Yeni erişilebilirlik ağacı görünümünün amacı ve erişilebilirlik ağacını geliştiriciler için daha keşfedilebilir, faydalı ve kolay hale getiriyor. tıklayın.

Denemeyi etkinleştirdikten sonra, Öğeler panelinde yeni bir düğme gösterilir. Düğmeyi değiştirmek için tıklayın. arasında geçiş yapın.

Bunun erken aşamadaki bir deneme olduğunu lütfen unutmayın. İşlevleri daha iyi hale getirmeyi ve genişletmeyi planlıyoruz. oluşacaktır.

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ı sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.