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

Performans panelinde Web Vitals bilgileri pop-up'ı

Göstergenin ne hakkında olduğunu (performansın iyi mi, iyileştirme gerektiriyor mu yoksa kötü mü olduğunu) anlamak için Performans panelindeki bir Web Verileri işaretçisinin üzerine gelin.

Chromium sorunu: 1147872

CSS scroll-snap özelliğini görselleştirme

Artık CSS kaydırma-yakalama hizalamasını incelemek için Öğeler panelindeki scroll-snap rozetini açıp kapatabilirsiniz.

Sayfanızdaki bir HTML öğesine (ör. bu demo sayfası) scroll-snap-type uygulandığında, Öğeler panelinde öğenin yanında bir scroll-snap rozeti görürsünüz. Sayfada kaydırma-yakalama yer paylaşımının gösterilmesini açmak veya kapatmak için rozeti tıklayın.

Yukarıdaki örnekte, tutturma kenarlarında nokta işaretleri görebilirsiniz. Kaydırma bağlantı noktasının düz çizgili ana hatları, tutturma öğelerinin ise kesikli çizgili ana hatları vardır. Kaydırma dolgusu yeşil renkle, kaydırma kenar boşluğu ise turuncu renkle doldurulur.

Chromium sorunu: 862450

Yeni bellek denetleyicisi

JavaScript'teki bir ArrayBuffer'yi ve Wasm belleğini incelemek için yeni Bellek inceleyici'yi kullanın.

Bu demo sayfasını açın. Kaynaklar panelinde demo-js.js dosyasını açın ve 18. satırda bir kesme noktası ayarlayın.

Sayfayı yenileyin. Sağdaki hata ayıklayıcı bölmesinde Kapsam bölümünü genişletin. Arabellek değerinin yanındaki yeni simgeye dikkat edin. Bellek Denetleyicisi'ni görmek için tıklayın.

Bu yeni bellek inceleme aracıyla JavaScript'i inceleme ArrayBuffer ve WebAssembly.Memory hakkında daha fazla bilgi edinmek için dokümanlara göz atın.

Chromium sorunu: 1166577

Nesne panelinde yeni rozet ayarları bölmesi

Artık Öğeler panelindeki Rozet ayarları aracılığıyla rozetleri seçerek etkinleştirebilir veya devre dışı bırakabilirsiniz. Bu özelliği kullanarak web sayfalarını incelerken önemli rozetleri özelleştirebilir ve bunlara odaklanabilirsiniz.

Öğeler panelinde herhangi bir öğeyi sağ tıklayın. Bağlam menüsünden Badge settings'i (Rozet ayarları) seçin. Rozet ayarları bölmesi üstte görünür. Rozetleri göstermek veya gizlemek için onay kutularını etkinleştirin ya da devre dışı bırakın.

Chromium sorunu: 1066772

En boy oranı bilgileriyle geliştirilmiş resim önizlemesi

Öğeler panelindeki resim önizlemelerinde artık resimle ilgili daha fazla bilgi (oluşturulan boyut, oluşturulan en boy oranı, doğal boyut, doğal en boy oranı ve dosya boyutu) gösteriliyor.

Bu bilgiler, resimlerinizi daha iyi anlamanıza ve gerekirse optimizasyon uygulamanıza yardımcı olur.

Görselin en boy oranı bilgileri, görseli önizlemek için tıkladığınızda Ağ panelinde de gösterilir.

Chromium sorunları: 1149832, 1170656

Content-Encoding yapılandırma seçeneklerinin bulunduğu yeni ağ koşulları düğmesi

Ağ paneline yeni bir ağ koşulları düğmesi eklendi. Bu simgeyi tıklayarak Ağ koşulları sekmesini açın.

Ağ koşulları sekmesine yeni bir Kabul edilen içerik kodlamaları seçeneği eklenir. Sunucu yanıtlarının gzip, brotli veya gelecekteki diğer Content-Encoding'leri desteklemeyen tarayıcılarda doğru şekilde kodlanıp kodlanmadığını test etmek için yapılandırın.

Chromium sorunu: 1162042

Stiller bölmesinde yapılan geliştirmeler

Stiller bölmesinde hesaplanan değeri görüntülemek için yeni kısayol

Artık Stiller bölmesinde bir CSS özelliğini sağ tıklayıp Hesaplanmış değeri görüntüle'yi seçerek hesaplanmış CSS değerini görüntüleyebilirsiniz.

Chromium sorunu: 1076198

accent-color anahtar kelimesi için destek

Stiller bölmesinin otomatik tamamlama kullanıcı arayüzü artık accent-color CSS anahtar sözcüğünü algılıyor.Bu sayede web geliştiriciler, öğe tarafından oluşturulan kullanıcı arayüzü kontrolleri (ör. onay kutusu, radyo düğmesi) için vurgu rengini belirleyebiliyor.

accent-color CSS özelliği şu anda deneyseldir. Test etmek için lütfen chrome://flags/#enable-experimental-web-platform-features özelliğini etkinleştirin.

Chromium sorunu: 1092093

Sorun türlerini renkler ve simgelerle kategorilere ayırma

Sorunlar sekmesinde artık sorunlar, daha iyi bir önem derecesi göstergesi için sayfa hataları, yaklaşan zarar veren değişiklikler ve olası iyileştirmeler olarak sınıflandırılıyor. Console'daki sorun sayısı düğmesini tıklayarak Sorunlar sekmesini açabilirsiniz.

• Sayfa hataları (kırmızı). Doğru CORS başlıklarının ayarlanmaması gibi sayfa işlevselliğini doğrudan etkileyen sorunlar
• Yakında yapılacak zarar veren değişiklikler (sarı). Web platformunda uyumsuzluğa yol açan ve sayfa işlevlerinin kaybına neden olabilecek değişiklikler hakkında bilgi veren sorunlar (ör. CORS RFC 1918 değişiklikleri hakkında uyarı).
• Olası iyileştirmeler (mavi). Sayfada iyileştirme yapılabilecek noktalar var ancak bunlar şu anda sayfanın temel işlevlerini (ör.erişilebilirlik sorunları) etkilemiyor.

Chromium sorunu: 1183241

Güven jetonlarını silme

Artık Uygulama panelinin altındaki Güven jetonları bölmesinde bulunan yeni silme düğmesiyle güven jetonlarını silebilirsiniz.

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. Trust Tokens'ı kullanmaya nasıl başlayacağınızı öğrenin.

Chromium sorunu: 1126824

Çerçeve ayrıntıları görünümünde engellenen özelliklerle ilgili ayrıntıları görüntüleme

Artık Frame ayrıntıları görünümündeki İzin politikası bölümünde engellenen özelliklerle ilgili ayrıntıları görüntüleyebilirsiniz.

Bu demo sayfasını açın. Uygulama paneline gidip bir çerçeve seçin. İzin Politikası bölümünde Devre Dışı Bırakılan Özellikler özelliğine gidin. Özelliğin neden engellendiğiyle ilgili ayrıntıları görmek için Ayrıntıları göster'i tıklayın. Özelliğin engellenmesine neden olan iFrame'e veya ağ isteğine gitmek için her politikanın yanındaki simgeyi tıklayın.

İzin politikası, bir web sitesine kendi çerçevesinde veya yerleştirdiği iFrame'lerde tarayıcı özelliklerinin kullanımına izin verme ya da bunları engelleme olanağı tanıyan bir web platformu API'sidir.

Chromium sorunu: 1158827

Denemeler ayarındaki denemeleri filtreleme

Yeni deneme filtresiyle denemeleri daha hızlı bulun. Örneğin, Ayarlar > Denemeler'e gidin, Filtre metin kutusuna "kontrast" yazarak "kontrast" kelimesini içeren tüm denemeleri filtreleyin.

Önbellek depolama bölmesinde yeni Vary Header sütunu

Vary HTTP yanıt başlığını görüntülemek için Önbellek Depolama bölmesindeki yeni Vary Header sütununu kullanın.

Chromium sorunu: 1186049

Kaynak paneliyle ilgili iyileştirmeler

Yeni JavaScript özellikleri için destek

Geliştirici Araçları artık #foo in obj olarak da bilinen yeni private brand check JavaScript dil özelliğini destekliyor.

Bu özel marka kontrolü özelliği, in operatörünü genişleterek herhangi bir nesnede özel sınıf alanlarının test edilmesini destekler.

Console ve Sources panelinde deneyin. Özel alanları hata ayıklayıcı bölmesindeki Kapsam bölümünde de inceleyebilirsiniz.

Chromium sorunu: 11374

Kesme noktalarıyla hata ayıklama için gelişmiş destek

DevTools artık birden fazla komut dosyasında kesme noktalarını doğru şekilde ayarlıyor. Modern JavaScript paketleyiciler (ör.Webpack, Rollup) kod bölme özelliğini destekler. Paylaşılan bir bileşenin birden fazla rotaya (kod bölmeleri) dahil edilebileceği senaryolar vardır.

Daha önce, Geliştirici Araçları yalnızca bir ham konumda kesme noktaları ayarlayabiliyordu. Bu son iyileştirme sayesinde DevTools, tüm ilgili konumlarda kesme noktalarını doğru şekilde ayarlayabilir.

Chromium sorunları: 1142705, 979000, 1180794

[] notuyla fareyle üzerine gelindiğinde önizleme desteği

DevTools artık Kaynaklar panelinde [] gösterimini kullanan JavaScript üye ifadelerinde fareyle üzerine gelme önizlemesini destekliyor.

Chromium sorunu: 1178305

HTML dosyalarının iyileştirilmiş ana hatları

DevTools artık HTML dosyaları için daha iyi ana hat desteği sunuyor. Kaynaklar panelinde bir HTML dosyası açın. Mac'te Cmd + Üst Karakter + O, Windows'da ise Ctrl + Üst Karakter + O klavye kısayolunu kullanarak kod ana hattını açıp kapatabilirsiniz.

Aşağıdaki örnekte, Geliştirici Araçları artık ana hattaki tüm işlevleri doğru şekilde listeliyor. Daha önce DevTools yalnızca işlevlerin bir kısmını gösteriyordu.

Chromium sorunu: 761019, 1191465

Wasm hata ayıklama için uygun hata yığın izlemeleri

Geliştirici Araçları artık satır içi işlev çağrılarını çözümlüyor ve Wasm hata ayıklama için uygun hata yığını izlerini gösteriyor.

Daha önce Geliştirici Araçları, hata yığın izlemelerinde yalnızca genel Wasm referanslarını gösteriyordu.

Soldaki eski Chrome sürümünde hata yığını izlerinde kaynak konumu (ör. dsquare) gösterilmezken sağdaki yeni sürümde gösterilir.

Chromium sorunu: 1189161

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