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

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

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

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

Trusted Types API, DOM tabanlı siteler arası komut dosyası çalıştırma güvenlik açıklarını önlemenize yardımcı olur. Nasıl yapacağınızı öğrenin Güvenilir Türler ile uygulamaları DOM XSS güvenlik açıkları içermeyecek şekilde yazmak, incelemek ve korumak için burada bulabilirsiniz.

Kaynaklar panelinde, hata ayıklayıcı kenar çubuğu bölmesini açın. İGP İhlali'ni genişletin Ayrılma noktaları bölümüne gidin ve Güvenilir Tür ihlalleri onay kutusunu işaretleyerek istisnalar olabilir. Bu demo sayfasını kullanarak kendiniz deneyin.

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. Fareyle üzerine gelin istisnayı önizleyin. Bu başlığı tıklayarak Sorunlar sekmesini genişletin. Bu sayfada, istisnaları ve nasıl düzeltileceğine ilişkin yönergeler.

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 Ekran görüntüsü, görüntü alanında görünmeyen içerik nedeniyle kesilmiştir. Tam sayfa ekran görüntüleri: artık daha kesin.

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

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

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.

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

Chromium sorunu: 1126824

Deniz Feneri panelindeki Lighthouse 7

Lighthouse paneli şu anda Lighthouse 7'yi çalıştırıyor. Tam sürüm için sürüm notlarına değişiklik listesi.

Lighthouse 7'deki yeni denetimler:

• Largest Contentful Paint (LCP) resmini önceden yükleyin. LCP öğesi tarafından kullanılan resmin şu olup olmadığını denetler: LCP sürenizi kısaltmak için önceden yüklenir.
• Sorunlar Issues paneline kaydedildi. Issues içindeki çözülmemiş sorunların listesini gösterir kontrol edebilirsiniz.
• Progresif Web Uygulamaları (PWA). PWA kategorisi önemli ölçüde değişti.

• Yüklenebilir grubu artık tamamen Chrome'un Yüklenebilir ölçütler. Bunlar, Manifest bölmesinde görülen sinyallerle aynıdır.

  • "Bir hizmet çalışanı kaydediliyor..." denetimi Optimize edilmiş PWA grubuna taşınır ve " HTTPS" denetimi artık temel "yüklenebilirlik gereksinimlerinin" bir parçası olarak sunuluyor. denetli.
  • Hızlı ve güvenilir grubu kaldırılmıştır. Yenilenen "yüklenebilirlik gereksinimleri" ile denetim çevrimdışı beceri kontrolünü içerir. "Geçerli sayfa ve start_url, çevrimdışı" denetim kaldırıldı. "Mobil ağda sayfa yükleme yeterince hızlı" denetim kaldırıldı çok önemlidir.

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. :target özelliğini etkinleştir onay kutusunu işaretleyin.

URL'de karma ve bir öğenin kimliği olduğunda öğenin stilini belirlemek için :target sözde sınıfını kullanın aynıdır. Kendiniz denemek için bu demoya göz atın. Bu yeni Geliştirici Araçları özelliği sayesinde, URL'yi sürekli manuel olarak değiştirmek zorunda kalmadan bu tür stilleri kullanabilirsiniz.

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. Yeni bir öğe oluşturabilirsiniz.

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

• Mac: Shift + Option + ⬇️
• Pencere/ 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.

Buna ek olarak, Shift tuşunu basılı tutarken renk seçiciyi tıklayarak RGBA, HSLA, HSLA ve ve renk değerinin Onaltılık gösterimleri.

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ölmesini kullanarak değeri kopyalayın.

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çerli kural kapsamındaki tüm bildirimleri (geçersiz ve geçerli beyanlar dahil) kopyalayın. özellikler.

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.

Chromium sorunu: 997625

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

Çerezler bölmesindeki Tüm çerezleri temizle düğmesinin yerini Filtrelenen çerezleri temizle düğmesi aldı düğmesini tıklayın.

Uygulama panelinde > Çerezler bölmesinde, çerezleri filtrelemek için metin kutusuna metni girin. İçinde Listeyi "PREF" ile filtreliyoruz. Filtrelenmiş çerezleri temizle düğmesini tıklayarak görünür çerezleri silin. Filtre metnini temizlediğinizde diğer çerezlerin liste'ye dokunun. Daha önce yalnızca tüm çerezleri temizleme seçeneği bulunuyordu.

Chromium sorunu: 978059

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

Depolama bölmesinde site verileri temizlenirken Geliştirici Araçları artık varsayılandır. Üçüncü taraf çerezlerini de temizlemek için üçüncü taraf çerezlerini de içeren etkinleştirin.

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'a gidin > Cihazlar'ı seçin ve Özel cihaz ekle... seçeneğini tıklayın. Kullanıcı aracısını genişletin. istemci ipuçları bölümünü kullanabilirsiniz.

Kullanıcı Aracısı İstemci İpuçları, geliştiricilerin gizliliği korumaya yönelik ve ergonomik bir şekilde kullanıcının tarayıcısıyla ilgili bilgiler. Daha fazla bilgi: web.dev/user-agent-client-hints/ adresindeki Kullanıcı Aracısı İstemci İpuçları.

Chromium sorunu: 1073909

Ağ paneli güncellemeleri

"Ağ günlüğünü kaydet" olarak devam et ayar

Geliştirici Araçları artık "Ağ günlüğünü kaydet" olarak duruyor ayarını değiştirebilirsiniz. Daha önce, Geliştirici Araçları kullanıcının seçimini sıfırlıyordu her sayfa yeniden yüklendiğinde geçerli olur.

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, düşük gecikmeli, iki yönlü, istemci-sunucu mesajlaşması sunan yeni bir API'dir. Daha fazla bilgi edinin ve bu çözümün ilerisi hakkında nasıl geri bildirimde bulunulacağı konusunda web.dev/webtransport/.

Chromium sorunu: 1152290

"Çevrimiçi" "Kısıtlama yok" olarak yeniden adlandırıldı

Ağ emülasyonu seçeneği "Online" artık "Kısıtlama Yok" olarak adlandırılıyor.

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 özellikle de kopyalanacak büyük bir nesne (ör. uzun bir dizi) olduğunda kullanışlıdır.

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.

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 bir hizmet çalışanı seçin tıklayın.

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 altında gösteriliyor bölümüne ekleyin.

Yeni performance.measureMemory() API, tüm web sayfasının bellek kullanımını tahmin eder. Öğren Bu yeni API ile web sayfanızın toplam bellek kullanımını nasıl izleyeceğinizi bu makalede bulabilirsiniz.

Chromium sorunu: 1139899

Sorunlar sekmesinden geri bildirim gönderme

Bir sorun mesajını iyileştirmek isterseniz Konsol'dan Sorunlar sekmesine gidin veya Diğer Ayarlar > Diğer araçlar > Sorunlar > Sorunlar sekmesini açın. Bir sorunu genişlet mesajını aldıktan sonra Sorun mesajı size yardımcı oldu mu? seçeneğini tıklayın. Ardından, görürsünüz.

Performans panelinde atlanan kareler

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

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çık ekran arasında geçiş yapmak için yeni yayılma simgesini tıklayın önemlidir.

Yeni CSS medyasına erişmek için Deneysel Web Platformu özelliklerini de etkinleştirebilirsiniz screen-spanning özelliği ve JavaScript getWindowSegments API'si. Deneme simgesi Deneysel Web Platformu özellikleri işaretinin durumu hakkında bilgi edinin. İşaret olduğunda simge vurgulanır açıldı. chrome://flags adresine gidip bayrağı açın/kapatın.

Chromium sorunu: 1054281

Deneysel özellikler

Puppeteer Kaydedici ile tarayıcı testini otomatikleştirin

Geliştirici Araçları artık tarayıcıyla olan etkileşiminize göre Puppeteer komut dosyaları oluşturabilir. tarayıcı testini otomatikleştirmenizi kolaylaştırır. Puppeteer, Search Ads 360'taki API'lerle uyumlu Chrome veya Chromium'u Geliştirici Araçları Protokolü üzerinden kontrol etmek için üst düzey API'yi kullanabilirsiniz.

Bu demo sayfasına gidin. Geliştirici Araçları'nda Kaynaklar panelini açın. Şurada Kayıt sekmesini seçin: tıklayın. 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. Önceki videoda bir iletişim şeklidir. Puppeteer komutlarının dosyaya uygun şekilde eklendiğini gözlemleyin. Önce Kaydet düğmesine tekrar basarak kaydı durdurun.

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'yi iyileştirip genişletmeyi planlıyoruz. işlev görebilir.

Chromium sorunu: 1144127

Stiller bölmesinde yazı tipi düzenleyici

Yeni Yazı Tipi Düzenleyici, Stiller bölmesindeki bir pop-up düzenleyicidir. Bu düzenleyici, yazı tipiyle ilgili özellikler en uygun yazı tipini bulursunuz.

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

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. İlgili içeriği oluşturmak için kullanılan CSS gap özelliği de desteklenir. Buradaki örneğimizde CSS gap: 12px; var. Dikkat edin: için yumurtadan çıkma modelini deneyin.

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, büyük miktarda veri içeren web sayfalarıyla çalışmayı kolaylaştıracak bir denemedir ihlallerinin sayısını görebilirsiniz.

Chromium sorunu: 1137837

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

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

APCA, renk algısıyla ilgili modern araştırmalara dayanarak kontrast hesaplamanın yeni bir yoludur. Şuna kıyasla: AA/AAA yönergeleri uyarınca APCA daha çok bağlama bağımlıdır. Kontrast, metnin titizliği ve kalitesine mekansal özellikler (yazı tipi ağırlığı ve boyutu), renk (metin ve renk arasındaki algılanan hafiflik farkı) arka plan) ve bağlam (ortam ışığı, çevre, metnin amaçlanan amacı).

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