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

Jecelyn Yeen

Trusted Types ihlalleri için hata ayıklama desteği

Trusted Type ihlallerinde kesme noktası

Artık Kaynaklar panelinde kesme noktaları ayarlayabilir ve Güvenilir Tür İhlalleri'ndeki istisnaları yakalayabilirsiniz.

Trusted Types API, DOM tabanlı siteler arası komut dosyası çalıştırma güvenlik açıklarını önlemenize yardımcı olur. Trusted Types ile DOM XSS güvenlik açıklarından arındırılmış uygulamaları nasıl yazacağınızı, inceleyeceğinizi ve bakımını yapacağınızı buradan öğrenebilirsiniz.

Kaynaklar panelinde hata ayıklayıcı kenar çubuğu bölmesini açın. CSP Violation Breakpoints (İGP İhlali Ayrılma Noktaları) bölümünü genişletin ve Trusted Type violations (Güvenilir Tür ihlalleri) onay kutusunu işaretleyerek istisnalarda duraklatmayı etkinleştirin. Bu demo sayfasında kendiniz deneyin.

Chromium sorunu: 1142804

Kaynaklar panelindeki sorunu Sorunlar sekmesine bağlama

Kaynaklar panelinde artık Güvenilen Tür'ü ihlal eden satırın yanında bir uyarı simgesi gösteriliyor. İstisnayı önizlemek için imleçle üzerine gelin. Sorunlar sekmesini genişletmek için bu seçeneği tıklayın. Bu sekmede, istisnalar hakkında daha fazla ayrıntı ve sorunun nasıl düzeltileceğiyle ilgili yol gösterici bilgiler yer alır.

Chromium sorunu: 1150883

Görünüm alanının dışındaki düğüm ekran görüntüsünü alma

Artık katlanmanın altındaki içerik de dahil olmak üzere tam bir düğüm için düğüm ekran görüntüleri alabilirsiniz. Daha önce, görüntü alanında görünmeyen içerikler için ekran görüntüsü kesiliyordu. Tam sayfa ekran görüntüleri artık daha doğru.

Öğeler panelinde bir öğeyi sağ tıklayın ve Düğüm ekran görüntüsü yakala'yı seçin.

Chromium sorunu: 1003629

Ağ istekleri için yeni Güven Jetonları sekmesi

Yeni Trust Tokens sekmesiyle Trust Token ağ isteklerini inceleyin.

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

Daha fazla hata ayıklama desteği sonraki sürümlerde sunulacaktır.

Chromium sorunu: 1126824

Lighthouse panelinde Lighthouse 7

Lighthouse paneli artık Lighthouse 7'yi çalıştırıyor. Değişikliklerin tam listesi için sürüm notlarına göz atın.

Lighthouse 7'deki yeni denetimler:

• Largest Contentful Paint (LCP) resmini önceden yükleyin. LCP sürenizi iyileştirmek için LCP öğesi tarafından kullanılan resmin önceden yüklenip yüklenmediğini denetler.
• Issues paneline kaydedilen sorunlar. Issues panelindeki çözülmemiş sorunların listesini gösterir.
• Progresif web uygulamaları (PWA). PWA kategorisi oldukça önemli ölçüde değişti.

• Yüklenebilir grubu artık tamamen Chrome'un yüklenebilir ölçütlerini etkinleştiren özellik kontrolleri tarafından destekleniyor. Bunlar, Manifest bölmesinde görülen sinyallerle aynıdır.

  • "Bir hizmet çalışanı kaydeder…" denetimi PWA Optimized (PWA için optimize edilmiş) grubuna taşınıyor ve "HTTPS kullanır" denetimi artık temel "yüklenebilirlik koşulları" denetiminin bir parçası olarak dahil ediliyor.
  • Hızlı ve güvenilir grubu kaldırılır. Yenilenen "yükleme şartları" denetimi çevrimdışı özellik kontrolünü içerdiğinden "geçerli sayfa ve start_url çevrimdışıyken 200 koduyla yanıt veriyor" denetimi kaldırıldı. "Sayfalar mobil ağda yeterince hızlı yükleniyor" denetimi de kaldırıldı.

Chromium sorunu: 772558

Nesne paneli güncellemeleri

CSS :target durumunu zorunlu kılma desteği

Artık CSS :target durumunu zorlamak ve incelemek için Geliştirici Araçları'nı kullanabilirsiniz.

Öğeler panelinde bir öğe seçin ve öğe durumunu değiştirin. Stilleri zorlamak ve incelemek için :target onay kutusunu işaretleyin.

URL'deki karma işareti ile bir öğenin kimliği aynı olduğunda öğeyi stilize etmek için :target sözde sınıfını kullanın. Kendiniz denemek için bu demoya göz atın. Bu yeni Geliştirici Araçları özelliği, URL'yi sürekli olarak manuel şekilde değiştirmenize gerek kalmadan bu tür stilleri test etmenize olanak tanır.

Chromium sorunu: 1156628

Öğeyi çoğaltmak için yeni kısayol

Bir öğeyi anında klonlamak için yeni Öğeyi kopyala kısayolunu kullanın.

Öğeler panelinde bir öğeyi sağ tıklayın ve Öğeyi kopyala'yı seçin. Altında yeni bir öğe oluşturulur.

Alternatif olarak, klavye kısayollarını kullanarak öğeyi çoğaltabilirsiniz:

• Mac: Shift + Option + ⬇️
• Windows/ Linux: Shift + Alt + ⬇️

Chromium sorunları: 1150797, 1150797

Özel CSS özellikleri için renk seçiciler

Stiller bölmesinde artık özel CSS özellikleri için renk seçiciler gösteriliyor.

Ayrıca, Shift tuşunu basılı tutarak ve renk seçiciyi tıklayarak renk değerinin RGBA, HSLA ve onaltılık gösterimleri arasında geçiş yapabilirsiniz.

Chromium sorunu: 1147016

CSS özelliklerini kopyalamak için yeni kısayollar

Artık birkaç yeni kısayolla CSS özelliklerini daha hızlı kopyalayabilirsiniz.

Öğeler panelinde bir öğe seçin. Ardından, değeri kopyalamak için Stiller bölmesinde bir CSS sınıfını veya CSS özelliğini sağ tıklayın.

CSS sınıfı için kopyalama seçenekleri:

• Kopyalama seçicisi. Geçerli seçicinin adını kopyalayın.
• Kuralı kopyalama. Geçerli seçicinin kuralını kopyalar.
• Tüm tanımlamaları kopyala: Geçersiz ve önekli özellikler dahil olmak üzere mevcut kural kapsamındaki tüm tanımlamaları kopyalayın.

CSS özelliği için kopyalama seçenekleri: