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

Performans panelinde Web Vitals bilgileri pop-up'ı

Performansın iyi mi, iyileştirme gerektiriyor mu yoksa kötü mü olduğunu anlamak için Performans panelindeki bir Web Vitals işaretçisinin üzerine gelin.

Chromium sorunu: 1147872

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

Artık CSS kaydırma anında hizalama özelliğini incelemek için Öğeler panelindeki scroll-snap rozetini açabilir veya 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 sabitleme yer paylaşımının gösterilmesini açmak veya kapatmak için rozeti tıklayın.

Yukarıdaki örnekte, sabitleme kenarlarında nokta işaretlerini görebilirsiniz. Kaydırma bağlantı noktasının kenarları kalın, sabitleme öğelerinin kenarları ise kısa çizgiyle belirtilir. Kaydırma dolgusu yeşil, kaydırma marjı ise turuncu renkte doldurulur.

Chromium sorunu: 862450

Yeni Bellek Denetleyicisi

JavaScript'teki ArrayBuffer'yi ve Wasm belleğini incelemek için yeni Bellek denetleyicisini 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 denetleyiciyle JavaScript ArrayBuffer ve WebAssembly.Memory'i inceleme hakkında daha fazla bilgi edinmek için dokümanlara göz atın.

Chromium sorunu: 1166577

Nesneler panelindeki yeni rozet ayarları bölmesi

Artık Öğeler panelindeki Rozet ayarları aracılığıyla rozetleri seçerek etkinleştirebilir veya devre dışı bırakabilirsiniz. Web sayfalarını incelerken önemli rozetleri özelleştirmek ve bunlara odaklanmak için bu özelliği kullanın.

Öğeler panelinde herhangi bir öğeyi sağ tıklayın. İçerik menüsünden Rozet ayarları'nı seçin. Rozet ayarları bölmesi en üstte görünür. Rozetleri göstermek/gizlemek için onay kutularını etkinleştirin veya devre dışı bırakın.

Chromium sorunu: 1066772

En boy oranı bilgileri içeren gelişmiş 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.

Resmi önizlemek için tıkladığınızda Ağ panelinde de resim en boy oranı bilgileri gösterilir.

Chromium sorunları: 1149832, 1170656

Content-Encoding'leri yapılandırma seçenekleri içeren yeni ağ koşulları düğmesi

Ağ paneline yeni bir ağ koşulları düğmesi eklendi. Ağ koşulları sekmesini açmak için tıklayın.

Ağ koşulları sekmesine yeni bir Kabul edilen içerik kodlamaları seçeneği eklendi. 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 edecek şekilde yapılandırın.

Chromium sorunu: 1162042

Stil bölmesinde yapılan geliştirmeler

Stil bölmesinde hesaplanmış değeri görüntülemek için yeni kısayol

Artık Stiller bölmesinde bir CSS özelliğini sağ tıklayıp Hesaplanan değeri göster'i 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 kelimesini algılar.Bu sayede web geliştiricileri, öğe tarafından oluşturulan kullanıcı arayüzü denetimleri (ör. onay kutusu, radyo düğmesi) için vurgu rengini belirtebilir.

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

Chromium sorunu: 1092093

Sorun türlerini renk ve simgelerle kategorilere ayırma

Sorunlar sekmesi artık sorunları önem derecesine göre sayfa hataları, yaklaşan önemli değişiklikler ve olası iyileştirmeler olarak kategorize ediyor. Console'da 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 hemen etkileyen sorunlar
• Yakında yapılacak önemli değişiklikler (sarı). Web platformunda yapılacak ve sayfa işlevselliğinin kaybedilmesine neden olabilecek uyumsuz bir değişiklik hakkında bilgi veren sorunlar (ör. yakında yapılacak CORS RFC 1918 değişiklikleri hakkında uyarı).
• Olası iyileştirmeler (mavi). Sayfada yapılabilecek iyileştirmeler olsa da şu anda sayfanın temel işlevini etkilemiyor (ör. erişilebilirlik sorunları)

Chromium sorunu: 1183241

Güven jetonlarını silme

Artık Uygulama panelinin altındaki Güven jetonları bölmesinde bulunan yeni sil 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. Güven rozetleri 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 çerçeve ayrıntıları görünümündeki İzin politikası bölümünden 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 mülküne gidin. Özelliğin neden engellendiğini öğrenmek için Ayrıntıları göster'i tıklayın. Özelliği engelleyen iframe'e veya ağ isteğine gitmek için her bir 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 bu özellikleri engelleme olanağı tanıyan bir web platformu API'sidir.

Chromium sorunu: 1158827

Denemeler ayarlarında denemeleri filtreleme

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

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

Vary HTTP yanıt üst bilgisini görüntülemek için Önbelleğe Alma Depolama Alanı bölmesinde yeni Vary Header sütununu kullanın.

Chromium sorunu: 1186049

Kaynaklar panelinde yapılan iyileştirmeler

Yeni JavaScript özellikleri için destek

Geliştirici Araçları artık #foo in obj olarak da bilinen yeni özel marka kontrolü JavaScript dil özelliğini destekliyor.

Bu özel marka kontrolleri özelliği, in operatörünü belirli bir nesnede özel sınıf alanlarının test edilmesini desteklemek için genişletir.

Konsol ve Kaynaklar panelinde deneyebilirsiniz. Özel alanları hata ayıklayıcı bölmesinin altındaki Kapsam bölümünde de inceleyebilirsiniz.

Chromium sorunu: 11374

Hata ayıklama için kesme noktaları desteği geliştirildi

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. Bir paylaşılan bileşenin birden fazla yola dahil edilebileceği senaryolar vardır (kod bölme).

Daha önce DevTools yalnızca bir ham konumda kesme noktası ayarlayabiliyordu. Bu son iyileştirmeyle DevTools, ilgili tüm konumlarda kesme noktalarını doğru şekilde ayarlayabilir.

Chromium sorunları: 1142705, 979000, 1180794

[] notasyonuyla fareyle üzerine gelme önizlemesi desteği

DevTools artık Kaynaklar panelinde [] gösterimini kullanan JavaScript üye ifadeleri için 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ğine sahip. Kaynaklar panelinde bir HTML dosyası açın. Kod ana hatlarını Mac'te Cmd + Üst Karakter + O, Windows'ta ise Ctrl + Üst Karakter + O tuş kombinasyonlarını kullanarak açabilir veya kapatabilirsiniz.

Aşağıdaki örnekte, Geliştirici Araçları artık tüm işlevleri ana hatlarıyla 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 doğru hata yığın izlemeleri

DevTools artık satır içi işlev çağrılarını çözüyor ve Wasm hata ayıklama için doğru hata yığın izlemelerini gösteriyor.

Daha önce DevTools, hata yığın izlemelerinde yalnızca genel Wasm referansları gösteriyordu.

Soldaki eski Chrome sürümünde, hata yığın izlemelerinde kaynak konum (ör.dsquare) gösterilmez. Sağdaki yeni sürümde ise kaynak konum gösterilir.

Chromium sorunu: 1189161

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

• crbug.com adresinden bize geri bildirim ve özellik isteği gönderin.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak bir Geliştirici Araçları sorununu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları'yla ilgili ipuçları konulu YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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