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

Güvenilir Tür ihlallerinde ayrılma noktası

Artık Kaynaklar panelinde Güvenilir Tür İhlalleri ile ilgili ayrılma noktaları ayarlayabilir ve istisnaları yakalayabilirsiniz.

Trusted Types API, DOM tabanlı siteler arası komut dosyası çalıştırma 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ı, inceleyip yöneteceğinizi buradan öğrenebilirsiniz.

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

Güvenilir Tür ihlallerinde ayrılma noktası

Chromium sorunu: 1142804

Kaynaklar panelindeki Sorunlar sekmesine bağlantı sorunu

Kaynaklar panelinde artık Güvenilir Türü ihlal eden satırın yanında bir uyarı simgesi gösteriliyor. İstisnayı önizlemek için üzerine gelin. Bu simgeyi tıklayarak Sorunlar sekmesini genişletin. Burada, istisnalar ve sorunların nasıl düzeltileceği hakkında daha fazla bilgi yer alır.

Kaynaklar panelindeki Sorunlar sekmesine bağlantı sorunu

Chromium sorunu: 1150883

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

Artık ekranın alt kısmındaki içerikler 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çerik nedeniyle ekran görüntüsü kesiliyordu. Tam sayfa ekran görüntüleri de artık net bir şekilde görünüyor.

Öğ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ü al

Chromium sorunu: 1003629

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

Güven Jetonu ağ isteklerini yeni Güven Jetonları sekmesiyle 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. 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

Deniz Feneri panelindeki Lighthouse 7

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

Deniz Feneri panelindeki Lighthouse 7

Lighthouse 7'deki yeni denetimler:

Largest Contentful Paint (LCP) resmini önceden yükleyin. LCP öğesi tarafından kullanılan görüntünün, LCP sürenizi kısaltmak için ö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 önemli ölçüde değişti.
Yüklenebilir grubu, artık tamamen Chrome'un yüklenebilir ölçütlerini etkinleştiren özellik kontrolleriyle desteklenmektedir. Bunlar, Manifest bölmesinde görülen sinyallerle aynıdır.
- "Bir hizmet çalışanı kaydeder..." denetimi PWA için Optimize Edilmiş grubuna taşınıyor ve "HTTPS Kullanıyor" denetimi artık temel "yüklenebilirlik gereksinimleri" denetimine dahil ediliyor.
- Hızlı ve güvenilir grubu kaldırılmıştır. Yenilenen "yüklenebilirlik gereksinimleri" denetimi çevrimdışı özellik kontrolünü de içerdiğinden, çevrimdışı denetim kaldırıldığında "geçerli sayfa ve start_url denetimi 200 değeriyle yanıt verir." "Sayfa yükleme, mobil ağda yeterince hızlı" denetimi de kaldırıldı.

Chromium sorunu: 772558

Öğeler paneli güncellemeleri

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

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

Öğeler panelinde bir öğe seçin ve öğenin durumunu değiştirin. Stilleri zorlamak 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 sürekli olarak manuel olarak değiştirmek zorunda kalmaksızın stilleri test etmenizi sağlar.

CSS `:target" durumunu zorunlu kılma

Chromium sorunu: 1156628

Öğeyi kopyalamak için yeni kısayol

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

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

Alternatif olarak, klavye kısayollarını kullanarak öğeyi kopyalayabilirsiniz:

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

Yinelenen öğe

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.

Buna ek olarak, renk değerinin RGBA, HSLA ve Onaltılık gösterimleri arasında dolaşmak için Shift tuşunu basılı tutup renk seçiciyi tıklayabilirsiniz.

Özel CSS özellikleri 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, Stiller bölmesinde bir CSS sınıfını veya CSS mülkünü sağ tıklayarak değeri kopyalayın.

CSS özelliklerini kopyalamak için yeni kısayollar

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

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

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

Beyanı kopyalayın. Mevcut satırın bildirimini kopyalayın.
Mülkü kopyala. Geçerli satırın özelliğini kopyalayın.
Değeri kopyala: Mevcut 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 URL kodu çözülmüş çerezlerin değerini Çerezler bölmesinde görüntülemeyi seçebilirsiniz.

Application (Uygulama) paneline gidip Cookies (Ç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.

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 aldı.

Application (Uygulama) paneli > Cookies (Çerezler) bölmesinde, çerezleri filtrelemek için metin kutusuna metin girin. Buradaki örneğimizde listeyi "PREF" ile filtreliyoruz. Görünür çerezleri silmek için Filtrelenmiş çerezleri temizle düğmesini tıklayın. Filtre metnini temizlediğinizde diğer çerezlerin listede kalmaya devam ettiğini görürsünüz. Daha önce yalnızca tüm çerezleri temizleme seçeneği bulunuyordu.

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

Chromium sorunu: 978059

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

Geliştirici Araçları, Depolama bölmesinde site verilerini temizlerken artık varsayılan olarak yalnızca birinci taraf çerezlerini temizler. Üçüncü taraf çerezlerini de temizlemek için üçüncü taraf çerezlerini de içeren 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üzenleyin

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ı dizesine bir alternatif olan 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ğlar. 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ın geçerliliğini koruma

Geliştirici Araçları'nda artık "Ağ günlüğünü kaydet" ayarı kullanılıyor. Önceden Geliştirici Araçları, 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ülenir.

WebTransport bağlantıları

WebTransport, düşük gecikmeli, iki yönlü, istemci-sunucu mesajlaşması sunan yeni bir API'dir. Kullanım alanları hakkında daha fazla bilgi edinmek ve uygulamanın geleceğiyle ilgili 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 değiştirildi

"Çevrimiçi" ağ emülasyonu seçeneği artık "Kısıtlama Yok" olarak yeniden adlandırıldı.

Ağ günlüğünü kaydet

Chromium sorunu: 1028078

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

Konsol ve Kaynaklar panelindeki nesneyi kopyalamak için yeni kısayollar

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

Konsoldaki nesneyi kopyala

Kaynaklar panelindeki nesneyi kopyalama

Chromium sorunları: 1149859, 1148353

Kaynaklar panelinde ve Stiller'de dosya adını kopyalamak için yeni kısayollar

Artık şunları sağ tıklayarak dosya adını kopyalayabilirsiniz:

Kaynaklar panelinde bir dosya veya
Öğeler panelindeki Stiller bölmesindeki dosya adını

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

Kaynaklar panelindeki dosya adını kopyalama

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 Hizmet Çalışanları bilgileri

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

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

Çerçeve ayrıntıları görünümündeki Hizmet Çalışanları 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ünde gösteriliyor.

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 öğrenin.

Belleği Ölç

Chromium sorunu: 1139899

Sorunlar sekmesinden geri bildirim gönderme

Bir sorun mesajını iyileştirmek isterseniz Konsol'dan Sorunlar sekmesine veya Diğer Ayarlar > Diğer araçlar > Sorunlar'a giderek Sorunlar sekmesini açın. Sorun mesajını genişletin ve Sorun mesajı size yardımcı oldu mu? 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ını analiz ederken artık Kareler bölümünde çıkarılan kareler kırmızı olarak işaretleniyor. Kare hızını öğrenmek için fareyle üzerine gelin.

Atlanan kareler

Chromium sorunu: 1075865

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

Geliştirici Araçları'nda artık çift ekranlı ve katlanabilir cihazların emülasyonunu yapabilirsiniz.

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

Tek ekran veya katlanmış ile çift ekran ya da açılmış pozlar arasında geçiş yapmak için yeni yayılma 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 işaretinin durumunu gösterir. Bayrak etkinleştirildiğinde simge vurgulanır. chrome://flags adresine gidip bayrağı açın/kapatın.

Çift ekran emülasyonu

Chromium sorunu: 1054281

Deneysel özellikler

Puppeteer Kaydedici ile tarayıcı testini otomatikleştirin

Geliştirici Araçları artık tarayıcıyla etkileşiminize göre Puppeteer komut dosyaları oluşturabilir. Böylece tarayıcı testini otomatik hale getirmek daha kolay olur. Puppeteer, Chrome veya Chromium'u DevAraçlar Protokolü üzerinden 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 alt kısımdaki Record (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 talimatları uygulayın.

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

Kukla Kayıt Cihazı

Chromium sorunu: 1144127

Stiller bölmesinde yazı tipi düzenleyici

Yeni Yazı Tipi Düzenleyici, web sayfanız için mükemmel yazı tipini bulmanıza yardımcı olmak üzere yazı tipiyle ilgili özellikler için Stiller bölmesinde bulunan bir pop-up düzenleyicidir.

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

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.

Geliştirici Araçları artık CSS align-items özelliğini daha iyi görselleştirmenize yardımcı olacak bir yönlendirme çizgisi çiziyor. CSS gap özelliği de desteklenir. Buradaki örneğimizde CSS gap: 12px; var. Her bir boşluk için yumurtadan çıkma kalıbına dikkat edin.

Esnek Kutu

Chromium sorunu: 1139949

Yeni İGP İhlalleri sekmesi

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

İGP İhlalleri sekmesi

Chromium sorunu: 1137837

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

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

APCA, renk algısıyla ilgili modern araştırmalara dayanan kontrastı hesaplamanın yeni bir yoludur. AA/AAA yönergelerine kıyasla APCA, bağlama daha çok bağlıdır. Kontrast, metnin uzamsal özellikleri (yazı tipi ağırlığı ve boyutu), rengi (metin ve arka plan arasındaki algılanan açıklık farkı) ve bağlama (ortam ışığı, çevre, metnin amaçlanan 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, bu APCA arama tablosu baz alınarak 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ı 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.