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

Kayce Basques

Görme bozuklukları emülasyonu

Daha iyi performans elde etmek için Oluşturma sekmesini açın ve yeni Görme bozukluklarını simüle et özelliğini kullanın. farklı görme bozukluğu olan kişilerin sitenizi nasıl deneyimlediğine dair fikir edinmenizi sağlar.

Bulanık görüş emülasyonu.

Geliştirici Araçları, bulanık görüş ve aşağıdaki renk görme bozukluğu türlerini emüle edebilir:

• Protanopi: kırmızı ışığı algılayamama.
• Döteranopi: Yeşil ışığı algılayamama durumu.
• Mavi ışığı algılayamama.
• Ahromatopsi: gri tonları dışında hiçbir rengi algılayamama (son derece nadirdir).

Bu renk görme bozukluklarının daha seyrek rastlanan versiyonları vardır, hatta aslında daha yaygındır. Örneğin protanomali, kırmızı ışığa karşı düşük duyarlılıktır (protanomali. kırmızı ışığı tamamen algılayamama durumudur). Ancak, bu "-omaly" görme bozuklukları net bir şekilde tanımlanmamıştır: Böyle bir görme bozukluğu olan her kişi farklıdır ve bir şeyler görebilir (alakalı renkleri daha fazla/az algılayabilmek).

Geliştirici Araçları'nda daha ekstrem simülasyonlar için tasarım yaparak web uygulamalarınızın da protanomali, döteranomali, tritanomali ve akromatomi olan kişiler için erişilebilir.

1003700 numaralı Chromium sorunu ile ilgili geri bildirim gönderin veya uygulama hakkında daha fazla bilgi edinin.

Yerel ayarlar emülasyonu

Artık Sensörler > Konum. Komut Menü'ye basın ve Sensörler sekmesine erişmek için Sensors yazın. Bu işlemleri gerçekleştirdikten sonra Geliştirici Araçları geçerli varsayılan yerel ayarı değiştirerek aşağıdakileri etkiler:

• Intl.* API'ler, ör. new Intl.NumberFormat().resolvedOptions().locale
• String.prototype.localeCompare ve gibi yerel ayara duyarlı diğer JavaScript API'leri *.prototype.toLocaleString, ör. 123_456..toLocaleString()
• navigator.language ve navigator.languages gibi DOM API'leri
• Accept-Language HTTP istek başlığı

Kendiniz denemek için Yerel ayara bağlı kod örneğine göz atın.

Chromium sorunu #1051822 ile ilgili geri bildirim gönderin.

Kaynaklar Arası Yerleştirme Politikası (COEP) hata ayıklaması

Ağ paneli artık Kaynaklar Arası Yerleştirme Politikası hata ayıklama bilgilerini sağlar.

Durum sütunu artık bir isteğin neden engellendiğine dair hızlı bir açıklamanın yanı sıra bağlantısını tıklayın:

Başlıklar sekmesinin Yanıt Başlıkları bölümü, sorunlar:

Chromium sorunu #1051466 ile ilgili geri bildirim gönderin.

Kesme noktaları, koşullu ayrılma noktaları ve günlük noktaları için yeni simgeler

Kaynaklar panelinde ayrılma noktaları, koşullu kesme noktaları ve günlük noktaları için yeni simgeler bulunur:

• Ayrılma noktaları kırmızı dairelerle gösterilir.
• Koşullu Kesme Noktaları yarı kırmızı yarı beyaz dairelerle temsil edilir.
• Günlük noktaları konsol simgeleriyle temsil edilen kırmızı daireler.

Yeni simgelerin amacı, kullanıcı arayüzünü diğer GUI hata ayıklama araçlarıyla daha tutarlı hale getirmekti. iki özelliği birbirinden ayırt etmeyi kolaylaştırmak için (genellikle kırmızı renkte bir fikir edinmiş olabilir.

Chromium sorunu #1041830 ile ilgili geri bildirim gönderin.

Belirli bir çerez yolunu belirleyen ağ isteklerini görüntüleme

Ağ isteklerine odaklanmak için Ağ panelindeki yeni cookie-path filtre anahtar kelimesini kullanın çerez yolunu ayarlayan bir web sitesidir.

cookie-path gibi daha özel anahtar kelimeler keşfetmek için İstekleri mülklere göre filtreleme başlıklı makaleye göz atın.

Komut Menüsünden sola yerleştirme

Geliştirici Araçları'nı cihazınızın soluna taşımak için Komut menüsünü açın ve Dock to left komutunu çalıştırın görünüm.

Chromium sorunu #1011679 ile ilgili geri bildirim gönderin.

Ana Menüdeki Settings seçeneği taşındı

Ayarlar'ı Ana Menü'den açma seçeneği artık Diğer Araçlar altında bulunabilir.

Chromium sorunu #1050855 ile ilgili geri bildirim gönderin.

Denetimler paneli artık Lighthouse paneli oldu

Geliştirici Araçları ve Lighthouse ekipleri web geliştiricilerinden sıklıkla, geri bildirim almalarının Lighthouse'u Geliştirici Araçları'ndan çalıştırmanın mümkün olduğunu ancak bunu denemek istediklerinde "Lighthouse"u bulamadı panelinde yer alır. Bu nedenle Denetimler paneli Lighthouse paneli olarak değiştirilmiştir.

Bir klasördeki tüm Yerel Geçersiz Kılmaları silme

Yerel Geçersiz Kılmaları ayarladıktan sonra, bir klasörü sağ tıklayıp yeni Sil Tüm geçersiz kılmalar seçeneğini kullanarak bu klasördeki tüm Yerel Geçersiz Kılmaları silebilirsiniz.

Chromium sorunu #1016501 ile ilgili geri bildirim gönderin.

Uzun görevler kullanıcı arayüzü güncellendi

Uzun Görev, ana iş parçacığını uzun bir süre tekelleştirerek web'e neden olan bir JavaScript kodudur. donduracağız.

Bir süredir Uzun Görevleri Performans panelinde görselleştirebiliyorsunuz. Ancak Chrome 83 Performans panelindeki Uzun Görev görselleştirme kullanıcı arayüzü güncellendi. Uzun Görev kısmı artık kırmızı arka plan ile renklendiriliyor.

Chromium sorunu #1054447 ile ilgili geri bildirim gönderin.

Manifest bölmesinde maskelenebilir simge desteği

Android Oreo, uygulama simgelerini çeşitli şekillerde görüntüleyen uyarlanabilir simgeleri kullanıma sundu. cihaz modellerini daha fazla kullanıyor olabilir. Maskelenebilir simgeler, uyarlanabilir simgeleri destekleyen yeni bir simge biçimidir. Bu özellik, PWA simgenizin, maskelenebilir özelliği destekleyen cihazlarda iyi görünmesini sağlar. simge standart.

Manifest'teki yeni Maskelenebilir simgeler için yalnızca minimum güvenli alanı göster onay kutusunu etkinleştirin. bölmesini kontrol edin. Daha fazla bilgi için Daha fazla bilgi edinmek için mevcut simgelere hazır mısınız?

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