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

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

Trusted Type ihlallerinde kesme noktası

Artık Kaynaklar panelinde kesme noktaları ayarlayabilir ve Trusted Type ihlallerindeki 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 istisnalarda duraklatmak için Trusted Type violations (Güvenilir Tür ihlalleri) onay kutusunu etkinleştirin. Bu demo sayfasında kendiniz deneyin.

Chromium sorunu: 1142804

Kaynaklar panelindeki sorunu Sorunlar sekmesine bağlama

Kaynaklar panelinde artık Güvenilir 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 düğmeyi 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ün 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ğlarda 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ı tutabilir 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çici. Geçerli seçicinin adını kopyalayın.
• Kuralı kopyalama. Geçerli seçicinin kuralını kopyalayın.
• 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:

• Tanımlamayı kopyalama. Geçerli satırın bildirimini kopyalayın.
• Özelliği kopyalama. Geçerli satırın özelliğini kopyalayın.
• Değeri kopyala: Geçerli satırın değerini kopyalar.

Chromium sorunu: 1152391

Çerez güncellemeleri

URL kodu çözülmüş çerezleri gösterme seçeneği

Artık URL kodunu çözülmüş çerez değerini Çerezler bölmesinde görüntülemeyi tercih edebilirsiniz.

Uygulama paneline gidip Çerezler bölmesini seçin. Listeden herhangi bir çerezi seçin. Kodu çözülmüş çerezi görüntülemek için yeni Kodu çözülmüş URL'yi göster onay kutusunu etkinleştirin.

Chromium sorunu: 997625

Yalnızca görünür çerezleri temizleme

Çerezler bölmesindeki Tüm çerezleri temizle düğmesinin yerini artık Filtrelenen çerezleri temizle düğmesi alıyor.

Application (Uygulama) panelindeki Cookies (Çerezler) bölmesinde, çerezleri filtrelemek için metin kutusuna metin girin. Buradaki örneğimizde listeyi "PREF" ile filtreliyoruz. Görünen çerezleri silmek için Filtrelenen çerezleri temizle düğmesini tıklayın. Filtre metnini temizlediğinizde listede diğer çerezlerin kaldığını görürsünüz. Daha önce yalnızca tüm çerezleri temizleme seçeneğiniz vardı.

Chromium sorunu: 978059

Depolama bölmesinde üçüncü taraf çerezlerini temizleme seçeneği

DevTools, Depolama bölmesinde site verilerini temizlerken artık varsayılan olarak yalnızca birinci taraf çerezlerini temizliyor. Üçüncü taraf çerezlerini de temizlemek için üçüncü taraf çerezler dahil seçeneğini etkinleştirin.

Chromium sorunu: 1012337

Özel cihazlar için kullanıcı aracısı istemci ipuçlarını düzenleme

Artık özel cihazlar için Kullanıcı Aracısı istemci ipuçlarını düzenleyebilirsiniz.

Ayarlar > Cihazlar'a gidin ve Özel cihaz ekle... seçeneğini tıklayın. İstemci ipuçlarını düzenlemek için Kullanıcı aracısı istemci ipuçları bölümünü genişletin.

Kullanıcı aracısı istemci ipuçları, geliştiricilerin kullanıcı aracısı dizesine alternatif olarak kullanıcıların tarayıcılarıyla ilgili bilgilere gizliliği koruyarak ve ergonomik bir şekilde erişmesini sağlar. web.dev/user-agent-client-hints/ adresinden Kullanıcı Aracısı İstemci İpuçları hakkında daha fazla bilgi edinin.

Chromium sorunu: 1073909

Ağ paneli güncellemeleri

"Ağ günlüğünü kaydet" ayarını kalıcı hale getirme

Geliştirici Araçları artık "Ağ günlüğünü kaydet" ayarını kalıcı olarak saklıyor. Daha önce, bir sayfa her yeniden yüklendiğinde Geliştirici Araçları kullanıcının seçimini sıfırlıyordu.

Chromium sorunu: 1122580

Ağ panelinde WebTransport bağlantılarını görüntüleme

Ağ paneli artık WebTransport bağlantılarını gösteriyor.

WebTransport, düşük gecikmeli, çift yönlü, istemci-sunucu mesajlaşması sunan yeni bir API'dir. Kullanım alanları ve web.dev/webtransport/ adresinde bu uygulamanın geleceğiyle ilgili nasıl geri bildirim vereceğiniz hakkında daha fazla bilgi edinin.

Chromium sorunu: 1152290

"Online" (Çevrimiçi) seçeneğinin adı "No throttling" (Sınırlama yok) olarak değiştirildi.

Ağ emülasyonu seçeneği "Online"ın adı "Daraltma Yok" olarak değiştirildi.

Chromium sorunu: 1028078

Konsol, Kaynaklar paneli ve Stiller bölmesinde yeni kopyalama seçenekleri

Konsol ve Kaynaklar panelinde nesne kopyalamak için yeni kısayollar

Artık Console ve Sources panelindeki yeni kısayolları kullanarak nesne değerlerini kopyalayabilirsiniz. Bu özellik, özellikle kopyalanacak büyük bir nesneniz (ör. uzun bir dizi) olduğunda kullanışlıdır.

Chromium sorunları: 1149859, 1148353

Kaynaklar panelinde ve Stiller bölmesinde dosya adını kopyalamak için yeni kısayollar

Artık dosya adını şu şekilde kopyalayabilirsiniz:

• Kaynaklar panelindeki bir dosya veya
• Öğeler panelindeki Stiller bölmesinde dosya adı

Dosya adını kopyalamak için içerik menüsünden Dosya adını kopyala'yı seçin.

Chromium sorunu: 1155120

Kare ayrıntıları görünümü güncellemeleri

Kare ayrıntıları görünümünde yeni hizmet çalışanı bilgileri

Geliştirici Araçları artık özel hizmet çalışanlarını, bunları oluşturan çerçeve altında gösteriyor.

Uygulama panelinde, hizmet çalışanları içeren bir çerçeveyi genişletin, ardından ayrıntıları görüntülemek için Hizmet Çalışanları ağacının altındaki bir hizmet çalışanını seçin.

Chromium sorunu: 1122507

Çerçeve ayrıntıları görünümünde bellek bilgilerini ölçme

performance.measureMemory() API durumu artık API kullanılabilirliği bölümünde gösteriliyor.

Yeni performance.measureMemory() API, web sayfasının tamamının bellek kullanımını tahmin eder. Bu yeni API ile web sayfanızın toplam bellek kullanımını nasıl izleyeceğinizi bu makaleden öğrenebilirsiniz.

Chromium sorunu: 1139899

Sorunlar sekmesinden geri bildirim gönderme

Bir sorun mesajını iyileştirmek isterseniz Sorunlar sekmesini açmak için Console'dan Sorunlar sekmesine veya Diğer Ayarlar > Diğer araçlar > Sorunlar'a gidin. Bir sorun mesajını genişletin ve Bu sorun mesajı size yardımcı oluyor mu? seçeneğini tıklayın. Ardından, pop-up pencerede geri bildirimde bulunabilirsiniz.

Performans panelindeki bırakılan kareler

Performans panelinde yükleme performansı analiz edilirken Frames (Kareler) bölümünde artık bırakılan kareler kırmızı renkle işaretleniyor. Kare hızını öğrenmek için imleçle üzerine gelin.

Chromium sorunu: 1075865

Cihaz modunda katlanabilir ve çift ekranlı cihazları taklit etme

Artık DevTools'da çift ekranlı ve katlanabilir cihazları taklit edebilirsiniz.

Cihaz araç çubuğunu etkinleştirdikten sonra şu cihazlardan birini seçin: Surface Duo veya Samsung Galaxy Fold.

Tek ekran veya katlanmış ve çift ekran veya açılmış duruşlar arasında geçiş yapmak için yeni ekran simgesini tıklayın.

Yeni CSS medya screen-spanning özelliğine ve JavaScript getWindowSegments API'sine erişmek için Deneysel Web Platformu özellikleri'ni de etkinleştirebilirsiniz. Deneysel simgesi, Deneysel Web Platformu özellikleri işaretinin durumunu gösterir. İşaret etkinleştirildiğinde simge vurgulanır. chrome://flags simgesine gidin ve işareti açın/kapatın.

Chromium sorunu: 1054281

Deneysel özellikler

Puppeteer Recorder ile tarayıcı testini otomatikleştirme

DevTools artık tarayıcıyla etkileşiminize dayalı olarak Puppeteer komut dosyaları oluşturabilir. Bu sayede tarayıcı testini otomatikleştirmek daha kolay hale gelir. Puppeteer, DevTools Protokolü üzerinden Chrome veya Chromium'u kontrol etmek için üst düzey bir API sağlayan bir Node.js kitaplığıdır.

Bu demo sayfasına gidin. Geliştirici Araçları'nda Kaynaklar panelini açın. Sol bölmede Kayıt sekmesini seçin. Yeni bir kayıt ekleyin ve dosyayı adlandırın (ör. test01.js).

Etkileşimi kaydetmeye başlamak için en alttaki Kaydet düğmesini tıklayın. Ekrandaki formu doldurmayı deneyin. Puppeteer komutlarının dosyaya uygun şekilde eklendiğini gözlemleyin. Kaydı durdurmak için Kaydet düğmesini tekrar tıklayın.

Komut dosyasını çalıştırmak için Puppeteer'ın resmi sitesindeki Başlangıç kılavuzu'nu inceleyin.

Bu özelliğin erken aşama deneme sürümünde olduğunu lütfen unutmayın. Kaydedici işlevini zaman içinde iyileştirmeyi ve kapsamını genişletmeyi planlıyoruz.

Chromium sorunu: 1144127

Stiller bölmesindeki yazı tipi düzenleyici

Yeni yazı tipi düzenleyici, yazı tipiyle ilgili özellikler için Stiller bölmesinde yer alan bir popover düzenleyicidir. Bu düzenleyici, web sayfanız için mükemmel tipografiyi bulmanıza yardımcı olur.

Pop-over, bir dizi sezgisel giriş türüyle tipografiyi dinamik olarak değiştirmek için temiz bir kullanıcı arayüzü sağlar.

Chromium sorunu: 1093229

CSS flexbox hata ayıklama araçları

Geliştirici Araçları, son sürümden bu yana flexbox hata ayıklaması için deneysel destek ekledi.

DevTools artık CSS align-items özelliğini daha iyi görselleştirmenize yardımcı olmak için bir kılavuz çizgisi çiziyor. CSS gap özelliği de desteklenir. Buradaki örneğimizde CSS gap: 12px; var. Her boşluk için tarama desenine dikkat edin.

Chromium sorunu: 1139949

Yeni İGP İhlalleri sekmesi

Yeni İGP İhlalleri sekmesinde tüm İçerik Güvenliği Politikası (İGP) ihlallerini bir bakışta görün. Bu yeni sekme, çok sayıda İGP ve Güvenilir Tür ihlali içeren web sayfalarıyla çalışmayı kolaylaştırmayı amaçlayan bir deneme sürümüdür.

Chromium sorunu: 1137837

Yeni renk kontrastı hesaplaması - Advanced Perceptual Contrast Algorithm (APCA)

Gelişmiş Algısal Kontrast Algoritması (APCA), renk seçicide AA/AAA yönergelerindeki kontrast oranının yerini alıyor.

APCA, renk algısı üzerine yapılan modern araştırmalara dayalı olarak kontrastı hesaplamanın yeni bir yoludur. APCA, AA/AAA yönergelerine kıyasla bağlama daha fazla bağlıdır. Kontrast, metnin mekansal özellikleri (yazı tipi ağırlığı ve boyutu), rengi (metin ile arka plan arasındaki algılanan parlaklık farkı) ve bağlamı (ortam ışığı, çevre, metnin amaçlanan kullanımı) temel alınarak hesaplanır.

Örnekte APCA eşiğinin %38 olduğu gösterilmektedir. Kontrast oranı, listelenen değeri karşılamalı veya aşmalıdır. Bu değer, APCA arama tablosuna göre yazı tipi ağırlığı ve boyutuna göre hesaplanır.

Chromium sorunu: 1121900

Ö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 hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler 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.