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

Kayce Basques

Görme bozukluğu emülasyonu

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

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

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.
  • Tritanopia: Mavi ışığı algılayamama.
  • Renk körlüğü: Gri tonları dışında hiçbir rengi algılayamama (son derece nadir).

Bu renk görme bozukluklarının daha az uç versiyonları da vardır ve aslında daha yaygındır. Örneğin, protanomali, kırmızı ışığa karşı düşük bir hassasiyettir (kırmızı ışığı tamamen algılayamama durumu olan protanopi'nin aksine). Ancak bu "-omaly" görme eksiklikleri o kadar net tanımlanmamıştır: Bu tür bir görme eksikliği olan her kişi farklıdır ve farklı şeyler görebilir (ilgili renkleri daha fazla/daha az algılayabilir).

DevTools'taki daha uç simülasyonlar için tasarlayarak web uygulamalarınızın protanomalisi, deuteranomalisi, tritanomalisi ve akromatomalisi olan kullanıcılar tarafından da erişilebilir olması garanti edilir.

Chromium sorunu 1003700 için geri bildirim gönderin veya uygulamaya dair daha fazla bilgi edinin.

Yerel ayarları taklit etme

Artık Sensörler > Konum bölümünde bir konum ayarlayarak yerel ayarları taklit edebilirsiniz. Komut Menüsü'nü açıp 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'leri (ö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ığı

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

Chromium sorunu 1051822 için geri bildirim gönderin.

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

Ağ panelinde artık Çapraz Kaynak Yerleştirme Politikası hata ayıklama bilgileri sağlanmaktadır.

Durum sütununda artık bir isteğin neden engellendiğini gösteren 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ır:

Durum sütununda engellenen istekler

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

Yanıt Başlıkları bölümünde daha fazla bilgi

Chromium sorunu 1051466 için 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 vardır:

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österen) daha tutarlı hale getirmek ve 3 özelliği bir bakışta ayırt etmeyi kolaylaştırmaktı.

Chromium sorunu #1041830 için geri bildirim gönderin.

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

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

Komut menüsünden Sol tarafa yerleştir

DevTools'u görüntüleme alanınızın soluna taşımak için Komut Menüsü'nü açıp Dock to left komutunu çalıştırın.

Geliştirici Araçları, görüntü alanının sol tarafına sabitlendi

Chromium sorunu 1011679 için 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 bulunabilir.

"Ayarlar"a odaklanan "Diğer Araçlar" ile "Ana Menü" açık

Chromium sorunu #1050855 için geri bildirim gönderin.

Denetimler paneli artık Lighthouse paneli

DevTools ve Lighthouse ekipleri, web geliştiricilerinden sık sık Lighthouse'u DevTools'dan çalıştırmanın mümkün olduğunu duydukları ancak denemek istediklerinde "Lighthouse" panelini bulamadıkları yönünde geri bildirim alıyordu. Bu nedenle Denetimler paneli artık Lighthouse paneli olarak adlandırılıyor.

Lighthouse paneli

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 Tüm geçersiz kılmaları sil seçeneğini belirleyerek ilgili klasördeki tüm yerel geçersiz kılmaları silebilirsiniz.

Tüm geçersiz kılmaları sil

Chromium sorunu #1016501 için geri bildirim gönderin.

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

Uzun görev, ana iş parçacığını uzun süre boyunca tek başına kullanan ve web sayfasının donmasına neden olan JavaScript kodudur.

Bir süredir Performans panelinde uzun görevleri görselleştirebiliyordunuz. Ancak Chrome 83'te Performans panelindeki uzun görev görselleştirme kullanıcı arayüzü güncellendi. Görevlerin uzun görev bölümü artık çizgili kırmızı arka planla renklendirildi.

Yeni uzun görev kullanıcı arayüzü

Chromium sorunu #1054447 için geri bildirim gönderin.

Manifest bölmesinde maskelenebilir simge desteği

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

Maskelenebilir simgenizin Android Oreo cihazlarda iyi göründüğünden 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 için Mevcut simgelerimiz hazır mı? başlıklı makaleyi inceleyin.

"Maskelenebilir simgeler için yalnızca asgari güvenli alanı göster" onay kutusu

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenize, en yeni web platformu API'lerini test etmenize ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.