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

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

Jecelyn Yeen

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

Trusted Type ihlallerinde ayrılma noktası

Artık Kaynaklar panelinde kesme noktaları belirleyebilir ve Güvenilir Tür İhlalleri ile ilgili istisnaları yakalayabilirsiniz.

Trusted Types API, DOM tabanlı siteler arası komut dosyası güvenlik açıklarını önlemenize yardımcı olur. Güvenilir Türler ile DOM XSS güvenlik açıkları içermeyen uygulamaları nasıl yazacağınızı, inceleyeceğinizi ve sürdüreceğinizi buradan öğrenebilirsiniz.

Kaynaklar panelinde hata ayıklayıcı kenar çubuğu bölmesini açın. İstisnaları duraklatmak için CSP İhlali Kesme Noktaları bölümünü genişletin ve Güvenilir Tür ihlalleri onay kutusunu etkinleştirin. Bu demo sayfasıyla kendiniz deneyin.

Trusted Type ihlallerinde ayrılma noktası

Chromium sorunu: 1142804

Kaynak panelindeki sorunu Sorunlar sekmesine bağlama

Kaynaklar panelinde artık Trusted Type'ı ihlal eden satırın yanında bir uyarı simgesi görüntülenmektedir. İstisnayı önizlemek için fareyle üzerine gelin. Bu düğmeyi tıklayarak Sorunlar sekmesini genişletin. İstisnalarla ilgili daha fazla ayrıntı ve bu sorunların nasıl düzeltileceğine dair yol gösterici bilgiler sağlar.

Kaynak panelindeki sorunu Sorunlar sekmesine bağlama

Chromium sorunu: 1150883

Görüntü alanının ötesinde düğüm ekran görüntüsünü yakala

Artık ekranın alt kısmındaki içerik de dahil olmak üzere tam bir düğüm için düğüm ekran görüntülerini yakalayabilirsiniz. Önceden, görüntü alanında görünmeyen içeriklerin ekran görüntüsü kesiliyordu. Tam sayfa ekran görüntüleri de tam olarak belirleniyor.

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

Görüntü alanının ötesinde düğüm ekran görüntüsünü yakala

Chromium sorunu: 1003629

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

Güven Jetonu ağ isteklerini yeni Güven Jetonları sekmesiyle inceleyin.

Güven Jetonu, pasif izleme olmaksızın sahtekarlıkla mücadeleye 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.

Sonraki sürümlerde daha fazla hata ayıklama desteği sunulacaktır.

Ağ istekleri için yeni Güven Jetonu sekmesi

Chromium sorunu: 1126824

Lighthouse panelinde Lighthouse 7

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

Lighthouse panelinde Lighthouse 7

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.
Sorunlar Issues paneline kaydedildi. Issues panelindeki çözülmemiş sorunların listesini gösterir.
Progresif Web Uygulamaları (PWA). PWA Kategorisi büyük ölçüde değişti.
Yüklenebilir grubu artık tamamen Chrome'un yüklenebilir ölçütlerini etkinleştiren özellik kontrolleriyle destekleniyor. Bunlar, Manifest bölmesinde görünen sinyallerle aynıdır.
- "Hizmet çalışanı kaydedilir..." denetimi PWA için Optimize Edilmiş grubuna taşınır ve "HTTPS Kullanır" denetimi, temel "yüklenebilirlik gereksinimleri" denetiminin bir parçası olarak dahil edilir.
- Hızlı ve güvenilir grubu kaldırıldı. Yenilenen "yüklenebilirlik gereksinimleri" denetimi çevrimdışı özellik kontrolünü içerdiğinden, "çevrimdışı" denetimi kaldırıldığında "geçerli sayfa ve start_url" 200 koduyla yanıt verir. "Sayfa yükleme mobil ağda yeterince hızlı" denetimi de kaldırıldı.

Chromium sorunu: 772558

Nesne paneli güncellemeleri

CSS `:target` durumunu zorunlu kılma desteği

Artık Geliştirici Araçları'nı kullanarak CSS :target durumunu zorunlu kılabilir ve denetleyebilirsiniz.

Öğeler panelinde bir öğe seçin ve öğenin durumunu değiştirin. Stilleri zorunlu kılmak ve incelemek için :target onay kutusunu etkinleştirin.

URL'deki karma ve bir öğenin kimliği aynı olduğunda öğeyi biçimlendirmek 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 her zaman manuel olarak değiştirmek zorunda kalmadan bu tür stilleri test etmenize olanak tanır.

CSS `:target` durumunu zorlama

Chromium sorunu: 1156628

Kopya öğe 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 çoğalt'ı seçin. Bunun altında yeni bir öğe oluşturulur.

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

Mac: Shift + Option + ⬇️
Pencere/ Linux: Shift + Alt + ⬇️

Yinelenen öğe

Chromium sorunları: 1150797, 1150797

Özel CSS mülkleri için renk seçiciler

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

Ayrıca, renk değerinin RGBA, HSLA ve Onaltılık temsilleri arasında geçiş yapmak için Shift tuşunu basılı tutup renk seçiciyi tıklayabilirsiniz.

Özel CSS mülkleri için renk seçiciler

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 özelliklerini kopyalamak için yeni kısayollar

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

Seçiciyi kopyala. Mevcut seçici adını kopyalayın.
Kuralı kopyala. Mevcut seçicinin kuralını kopyalayın.
Tüm bildirimleri kopyala: Geçersiz ve ön ekli özellikler de dahil olmak üzere geçerli kural kapsamındaki tüm bildirimleri kopyalayın.

CSS mülkü için kopyalama seçenekleri:

Beyanı kopyala. Mevcut satırın bildirimini kopyalayın.
Mülkü kopyala. Geçerli satırın özelliğini kopyalayın.
Değeri kopyala: Geçerli satırın değerini kopyalayın.

Chromium sorunu: 1152391

Çerez güncellemeleri

URL kodu çözülmüş çerezleri göstermek için yeni seçenek

Artık Çerezler bölmesinde URL kodu çözülmüş çerez değerini görüntülemeyi seçebilirsiniz.

Uygulama paneline gidin ve Çerezler bölmesini seçin. Listedeki çerezlerden birini seçin. Kodu çözülmüş çerezi görüntülemek için yeni Kod çözülmüş URL'yi göster onay kutusunu etkinleştirin.

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

Chromium sorunu: 997625

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

Çerezler bölmesindeki Tüm çerezleri temizle düğmesinin yerini Filtrelenmiş çerezleri temizle düğmesi almıştır.

Uygulama paneli > Çerezler bölmesinde, çerezleri filtrelemek için metin kutusuna metin girin. Burada verdiğimiz örnekte, listeyi "PREF" ölçütüne göre filtreliyoruz. Görünen çerezleri silmek için Filtrelenmiş çerezleri temizle düğmesini tıklayın. Filtre metnini temizlediğinizde diğer çerezlerin listede kaldığını görürsünüz. Daha önce yalnızca tüm çerezleri temizleme seçeneğine sahiptiniz.

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

Chromium sorunu: 978059

Depolama bölmesindeki üçüncü taraf çerezlerini temizlemek için yeni seçenek

DevTools artık Depolama bölmesindeki site verilerini temizlerken varsayılan olarak yalnızca birinci taraf çerezlerini temizliyor. Üçüncü taraf çerezlerini de temizlemek için üçüncü taraf çerezlerini dahil edin ayarını etkinleştirin.

Üçüncü taraf çerezlerini temizleme seçeneği

Chromium sorunu: 1012337

Özel cihazlar için Kullanıcı Aracısı İstemci İpuçlarını düzenle

Artık özel cihazlar için Kullanıcı Aracısı İstemci İpuç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ı İstemci İpuçlarını Düzenle

Kullanıcı Aracısı İstemci İpuçları, geliştiricilerin kullanıcının tarayıcısıyla ilgili bilgilere gizliliği koruyan ve ergonomik bir şekilde erişmesini sağlayan, User-Agent dizesine bir alternatiftir. Kullanıcı Aracısı İstemci İpuçları hakkında daha fazla bilgiyi web.dev/user-agent-client-hints/ adresinde bulabilirsiniz.

Chromium sorunu: 1073909

Ağ paneli güncellemeleri

"Ağ günlüğünü kaydet" ayarını koru

Geliştirici Araçları artık "Ağ günlüğünü kaydet" ayarını kullanmaya devam etmektedir. Geliştirici Araçları daha önce bir sayfa yeniden yüklendiğinde kullanıcının seçimini sıfırlıyordu.

Ağ günlüğünü kaydet

Chromium sorunu: 1122580

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

Ağ panelinde artık WebTransport bağlantıları görüntüleniyor.

WebTransport bağlantıları

WebTransport, düşük gecikmeli, çift yönlü, istemci-sunucu mesajlaşması sunan yeni bir API'dir. Kullanım alanları hakkında daha fazla bilgi edinmek ve uygulamanın geleceği hakkında nasıl geri bildirimde bulunacağınızı öğrenmek için web.dev/webtransport/ adresini ziyaret edin.

Chromium sorunu: 1152290

"Online" seçeneği, "Kısıtlama yok" olarak yeniden adlandırıldı

"Çevrimiçi" ağ emülasyon seçeneğinin adı "Kısıtlama Yok" olarak değiştirildi.

Ağ günlüğünü kaydet

Chromium sorunu: 1028078

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

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

Artık Konsol ve Kaynaklar panelindeki yeni kısayollarla nesne değerlerini kopyalayabilirsiniz. Bu, özellikle kopyalanacak büyük bir nesne (ör. uzun bir dizi) olduğunda kullanışlıdır.

Konsoldaki nesneyi kopyala

Kaynak panelindeki nesneyi kopyalayın

Chromium sorunları: 1149859, 1148353

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

Artık aşağıdaki öğeleri sağ tıklayarak dosya adını kopyalayabilirsiniz:

Kaynaklar panelinde 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.

Kaynaklar panelindeki dosya adını kopyalayın

Stiller bölmesinde dosya adını kopyala

Chromium sorunu: 1155120

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

Çerçeve ayrıntıları görünümündeki yeni Service Workers bilgileri

DevTools artık özel hizmet çalışanlarını oluşturan çerçevenin altında gösteriliyor.

Uygulama panelinde Service Worker'ları içeren bir çerçeveyi genişletin, ardından Service Workers ağacı altında bir hizmet çalışanı seçerek ayrıntıları görüntüleyin.

Çerçeve ayrıntıları görünümündeki Service Workers bilgileri

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ünün altında gösterilmektedir.

Yeni performance.measureMemory() API, tüm web sayfası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 makalede öğrenebilirsiniz.

Belleği Ölç

Chromium sorunu: 1139899

Sorunlar sekmesinden geri bildirim sağlama

Bir sorun mesajını iyileştirmek isterseniz Konsol'dan Sorunlar sekmesine gidin veya Diğer Ayarlar > Diğer araçlar > Sorunlar'a giderek Sorunlar sekmesini açın. Bir sorun mesajını genişletip Sorun mesajı sizin için faydalı mı? seçeneğini tıklayın. Ardından pop-up'tan geri bildirimde bulunabilirsiniz.

Sorunla ilgili geri bildirim bağlantısı

Performans panelinde atlanan kareler

Performans panelinde yük performansı analiz edilirken Kareler bölümü artık atlanan kareleri kırmızı olarak işaretliyor. Kare hızını öğrenmek için fareyle resmin üzerine gelin.

Atlanan kareler

Chromium sorunu: 1075865

Cihaz Modu'nda katlanabilir ve çift ekran emülasyonu

Artık Geliştirici Araçları'nda çift ekranlı ve katlanabilir cihazları emüle edebilirsiniz.

Cihaz Araç Çubuğu'nu etkinleştirdikten sonra şu cihazlardan birini seçin: Surface Duo veya SamsungGalaxy Fold.

Tek ekran, katlanmış ve çift ekran ya da açık pozisyonlar arasında geçiş yapmak için yeni aralık simgesini tıklayın.

Yeni CSS medya screen-spanning özelliğine ve JavaScript getWindowSegments API'ye erişmek için Deneysel Web Platformu özelliklerini de etkinleştirebilirsiniz. Deneysel simgesi, Deneysel Web Platformu özellikleri bayrağının durumunu gösterir. İşaret açıldığında simge vurgulanır. chrome://flags sayfasına gidip bayrağı etkinleştirin.

Çift ekran emülasyonu

Chromium sorunu: 1054281

Deneysel özellikler

Puppeteer Kaydedici ile tarayıcı testini otomatik hale getir

Geliştirici Araçları artık tarayıcıyla etkileşiminize göre Puppeteer komut dosyaları oluşturabilir. Bu da tarayıcı testini otomatikleştirmenizi kolaylaştırır. Puppeteer, Chrome veya Chromium'u DevTools Protokolü üzerinden kontrol etmek için üst düzey 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 resmi sitesindeki Başlangıç kılavuzundaki adımları uygulayın.

Lütfen bunun başlangıç aşamasındaki bir deneme olduğunu unutmayın. Zaman içinde Kaydedici işlevini iyileştirmeyi ve genişletmeyi planlıyoruz.

Kukla Kaydedici

Chromium sorunu: 1144127

Stiller bölmesinde yazı tipi düzenleyici

Yeni Yazı Tipi Düzenleyici, web sayfanız için en uygun yazı tipini bulmanıza yardımcı olacak yazı tipiyle ilgili özelliklerin Stiller bölmesinde bulunan bir açılır düzenleyicidir.

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

Stiller bölmesinde yazı tipi düzenleyici

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 çizgi çekiyor. CSS gap özelliği de desteklenir. Buradaki örneğimizde CSS gap: 12px; kullanılmıştır. Her boşluk için kuluçka kalıbına dikkat edin.

Flexbox

Chromium sorunu: 1139949

Yeni İGP İhlalleri sekmesi

Tüm İçerik Güvenliği Politikası (İGP) ihlallerini yeni İGP İhlalleri sekmesinde bir bakışta görüntüleyebilirsiniz. Bu yeni sekme, çok sayıda İGP ve Güvenilir Tür ihlali bulunan web sayfalarıyla çalışmayı kolaylaştıran bir denemedir.

İGP İhlalleri sekmesi

Chromium sorunu: 1137837

Yeni renk kontrastı hesaplaması - Gelişmiş Algısal Kontrast Algoritması (APCA)

Gelişmiş Algısal Kontrast Algoritması (APCA), Renk Seçici'deki AA/AAA kurallarındaki kontrast oranının yerini alıyor.

APCA, renk algısıyla ilgili modern araştırmalara dayanarak kontrast hesaplamanın yeni bir yoludur. APCA, AA/AAA yönergelerine kıyasla bağlama daha bağlıdır. Kontrast, metnin mekansal özelliklerine (yazı tipi ağırlığı ve boyutu), rengine (metin ile arka plan arasındaki algılanan açıklık farkı) ve içeriğe (ortam ışığı, çevre, metnin kullanım amacı) göre hesaplanır.

Renk Seçici'de APCA

Ö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, yazı tipi ağırlığı ve boyutuna göre, bu APCA arama tablosuna göre hesaplanır.

Chromium sorunu: 1121900

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.