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

Görme bozuklukları emülasyonu

Oluşturma sekmesini açın ve farklı görme bozukluklarına sahip kullanıcıların sitenizi nasıl deneyimlediği hakkında daha iyi bir fikir edinmek için yeni Görsel bozuklukları taklit et özelliğini kullanın.

Bulanık görüş emülasyonu

DevTools, bulanık görmeyi ve aşağıdaki renk görme bozukluğu türlerini taklit edebilir:

• Kırmızı körlüğü: Kırmızı ışığı algılayamama.
• Yeşil körlüğü: Yeşil ışığı algılayamama
• Mavi körlüğü: Mavi ışığı algılayamama.
• Renk körlüğü: Gri tonları dışında hiçbir rengi algılayamama (çok nadir görülür).

Bu renk görme bozukluklarının daha az şiddetli versiyonları vardır ve aslında bunlar daha yaygındır. Örneğin, protanomali, kırmızı ışığa karşı hassasiyetin azalmasıdır (protanopi ise kırmızı ışığı algılayamama durumudur). Ancak bu "-omaly" görme kusurları net bir şekilde tanımlanmamıştır: Bu tür bir görme kusuru olan her kişi farklıdır ve ilgili renklerin daha fazlasını veya daha azını algılayarak şeyleri farklı şekilde görebilir.

DevTools'taki daha uç simülasyonlara göre tasarım yaptığınızda web uygulamalarınızın protanomali, döteranomali, tritanomali ve akromatopsi olan kişiler tarafından da erişilebilir olması garanti edilir.

Chromium sorunu #1003700'e geri bildirim gönderin veya uygulama hakkında daha fazla bilgi edinin.

Yerel ayarları taklit etme

Artık Sensörler > Konum'da bir konum ayarlayarak yerel ayarları taklit edebilirsiniz. Komut Menüsü'nü açın ve Sensors yazarak Sensörler sekmesine gidin. Bu işlemler gerçekleştirildikten sonra DevTools, 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 *.prototype.toLocaleString gibi yerel ayara duyarlı diğer JavaScript API'leri (ör. 123_456..toLocaleString())
• navigator.language ve navigator.languages gibi DOM API'leri
• Accept-Language HTTP istek başlığı

Kendiniz denemek için Locale-dependent code example (Yerel ayara bağlı kod örneği) sayfasına göz atın.

Chromium sorunu #1051822'ye geri bildirim gönderin.

Çapraz Kaynak Yerleştirme Politikası (COEP) hata ayıklaması

Ağ paneli artık Çapraz Kaynak Yerleştirme Politikası hata ayıklama bilgilerini sunuyor.

Durum sütununda artık bir isteğin neden engellendiğine dair kısa bir açıklama ve daha fazla hata ayıklama için söz konusu isteğin üstbilgilerini görüntüleme bağlantısı yer alıyor:

Üstbilgiler sekmesinin Yanıt Üstbilgileri bölümünde, sorunların nasıl çözüleceğiyle ilgili daha fazla bilgi verilmektedir:

Chromium sorunu #1051466'ya geri bildirim gönderin.

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

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

• Ayrılma noktaları kırmızı dairelerle gösterilir.
• Koşullu kesme noktaları yarısı kırmızı yarısı beyaz dairelerle gösterilir.
• Logpoint'ler Konsol simgeleri içeren kırmızı dairelerle gösterilir.

Yeni simgelerin amacı, kullanıcı arayüzünü diğer GUI hata ayıklama araçlarıyla (genellikle kesme noktalarını kırmızı renkte gösterir) daha tutarlı hale getirmek ve 3 özelliği bir bakışta ayırt etmeyi kolaylaştırmaktır.

Chromium sorunu #1041830'a geri bildirim gönderin.

Belirli bir çerez yolu ayarlayan ağ isteklerini görüntüleme

Belirli bir çerez yolu ayarlayan ağ isteklerine odaklanmak için Ağ panelinde yeni cookie-path filtre anahtar kelimesini kullanın.

cookie-path gibi daha fazla özel anahtar kelime keşfetmek için İstekleri mülklere göre filtreleme başlıklı makaleyi inceleyin.

Komut menüsünden Sola yerleştir'i seçin.

Komut menüsünü açıp Dock to left komutunu çalıştırarak Geliştirici Araçları'nı görüntü alanınızın soluna taşıyın.

Chromium sorunu #1011679'a geri bildirim gönderin.

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

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

Chromium sorunu #1050855'e geri bildirim gönderin.

Denetlemeler paneli artık Lighthouse paneli

Geliştirici Araçları ve Lighthouse ekipleri, web geliştiricilerden sık sık geri bildirim alıyordu. Bu geri bildirimlerde, Geliştirici Araçları'ndan Lighthouse'un çalıştırılabileceği belirtiliyor ancak geliştiriciler bunu denemeye çalıştıklarında "Lighthouse" panelini bulamıyordu. Bu nedenle, Denetimler paneli artık Lighthouse paneli olarak adlandırılıyor.

Bir klasördeki tüm yerel geçersiz kılmaları silme

Yerel geçersiz kılmaları ayarladıktan sonra artık bir klasörü sağ tıklayıp yeni Tüm geçersiz kılmaları sil seçeneğini belirleyerek ilgili klasördeki tüm yerel geçersiz kılmaları silebilirsiniz.

Chromium sorunu #1016501'e geri bildirim gönderin.

Uzun süren görevler için güncellenmiş kullanıcı arayüzü

Uzun görev, ana iş parçacığını uzun süre tekeline alarak web sayfasının donmasına neden olan JavaScript kodudur.

Bir süredir uzun görevleri Performans panelinde görselleştirebiliyordunuz ancak Chrome 83'te Performans panelindeki uzun görev görselleştirme kullanıcı arayüzü güncellendi. Bir görevin uzun görev kısmı artık çizgili kırmızı bir arka planla renklendiriliyor.

Chromium sorunu #1054447'ye geri bildirim gönderin.

Manifest bölmesinde maskelenebilir simge desteği

Android Oreo, uygulama simgelerini farklı cihaz modellerinde çeşitli şekillerde gösteren uyarlanabilir simgeleri kullanıma sundu. Maskelenebilir simgeler, uyarlanabilir simgeleri destekleyen yeni bir simge biçimidir. Bu biçim, PWA simgenizin maskelenebilir simge standardını destekleyen cihazlarda iyi görünmesini sağlar.

Maskelenebilir simgenizin Android Oreo cihazlarda iyi görüneceğinden emin olmak için Manifest bölmesinde yeni Maskelenebilir simgeler için yalnızca asgari güvenli alanı göster onay kutusunu etkinleştirin. Daha fazla bilgi edinmek için Mevcut simgelerim hazır mı? başlıklı makaleye göz atın.

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