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

Performans panelinde Web Verileri bilgileri pop-up

Göstergenin neyle ilgili olduğunu (performansın iyi, iyileştirilmesi gerekiyor veya kötü olup olmadığını) anlamak için Performans panelindeki Web Verileri işaretçisinin üzerine gelin.

Web Verileri bilgi pop-up'ı

Chromium sorunu: 1147872

CSS kaydırma sabitlemesini görselleştirme

CSS kaydırmaya tutturma hizalamasını incelemek için artık Öğeler panelindeki scroll-snap rozetini açabilirsiniz.

CSS kaydırma sabitlemesi

Sayfanızdaki bir HTML öğesine (ör. bu demo sayfası) scroll-snap-type uygulandığında Öğeler panelinde bu öğenin yanında bir scroll-snap rozeti görebilirsiniz. Sayfada kaydırmaya tutturma yer paylaşımı görünümüne geçiş yapmak için rozeti tıklayın.

Yukarıdaki örnekte, tutturma kenarlarında nokta işaretleri görebilirsiniz. Kaydırma bağlantı noktası düz bir çizgiyle gösterilirken, tutturma öğelerinin dış çizgileri kısa çizgiyle gösterilir. Kaydırma dolgusu yeşil, kaydırma kenarlığı turuncu renkle doldurulur.

Chromium sorunu: 862450

Yeni Bellek denetleyicisi

Wasm belleğinin yanı sıra JavaScript'te ArrayBuffer öğelerini 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ıra bir ayrılma 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. Dosyayı tıklayarak Bellek Denetleyicisi'ni açın.

Bu yeni Bellek denetleyicisiyle JavaScript'i denetleme ArrayBuffer ve WebAssembly.Memory hakkında daha fazla bilgi edinmek için dokümanlara göz atın.

Bellek denetleyicisi

Chromium sorunu: 1166577

Nesne panelinde yeni rozet ayarları bölmesi

Artık Öğeler panelindeki Rozet ayarları üzerinden rozetleri seçerek etkinleştirebilir veya devre dışı bırakabilirsiniz. Bu özelliği, web sayfalarını denetlerken önemli rozetleri özelleştirmek ve bunlara odaklanmaya devam etmek için kullanın.

Nesne panelindeki rozet ayarları bölmesi

Öğ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 kullanılan onay kutularını etkinleştirin veya devre dışı bırakın.

Chromium sorunu: 1066772

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

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

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

En boy oranı bilgilerini içeren resim önizleme

Resim en boy oranı bilgileri, resmi önizlemek için tıkladığınızda panelinde de bulunur.

Ağ panelindeki resim en boy oranı bilgileri

Chromium sorunları: 1149832, 1170656

Content-Encoding yapılandırma seçeneklerinin gösterildiği yeni ağ koşulları düğmesi

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

Ağ koşulları sekmesine yeni bir Kabul Edilen İç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 bu parametreyi yapılandırın.

İçerik Kodlaması'nı yapılandırma seçeneklerinin gösterildiği yeni ağ koşulları düğmesi

Chromium sorunu: 1162042

Stiller bölmesi geliştirmeleri

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

Şimdi Stiller bölmesinde bir CSS özelliğini sağ tıklayabilir ve hesaplanan CSS değerini görüntülemek için Hesaplanan değeri görüntüle'yi seçebilirsiniz.

Hesaplanan değeri görüntülemek için yeni kısayol

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 anahtar kelime, web geliştiricilerin öğe tarafından oluşturulan kullanıcı arayüzü kontrolleri (ör. onay kutusu, radyo düğmesi) için vurgu rengini belirtmesine olanak tanır.

accent-color CSS mülkü şu anda deneme aşamasındadır. Test etmek için lütfen chrome://flags/#enable-experimental-web-platform-features hizmetini etkinleştirin.

vurgu rengi

Chromium sorunu: 1092093

Renk ve simgelerle sorun türlerini kategorilere ayırın

Sorunlar sekmesi artık sorunları sayfa hataları, yaklaşan zarar veren değişiklikler ve önem düzeyini daha iyi göstermek için olası iyileştirmeler olarak kategorilere ayırıyor. Konsol'daki sorun sayısı düğmesini tıklayarak Sorunlar sekmesini açabilirsiniz.

  • Sayfa hataları (kırmızı). Doğru CORS üstbilgilerinin ayarlanmaması gibi sayfanın işlevselliğini hemen etkileyen sorunlar.
  • Yaklaşan zarar veren değişiklikler (sarı). Web platformunda yapılacak ve sayfa işlevi kaybına yol açabilecek uyumsuz bir değişikliği bildiren sorunlar (ör. yaklaşan CORS RFC 1918 değişiklikleriyle ilgili uyarı).
  • Olası iyileştirmeler (mavi). Sayfada yapılabilecek olası iyileştirmeler (ör. erişilebilirlik sorunları) şu an için sayfanın temel işlevselliğine zarar vermiyor

Renk ve simgelerle sorun türlerini kategorilere ayırın

Chromium sorunu: 1183241

Güven jetonlarını silme

Artık, Uygulama panelindeki Güven jetonları bölmesindeki yeni sil düğmesini kullanarak güven jetonlarını silebilirsiniz.

Güven Jetonu, pasif izleme olmaksızın sahtekarlıkla mücadeleye ve botları gerçek insanlardan ayırt etmeye yardımcı olan yeni bir API'dir. Güven Jetonlarını kullanmaya nasıl başlayacağınızı öğrenin.

Güven jetonlarını silme

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ünde, engellenen özelliklerle ilgili ayrıntıları görebilirsiniz.

Bu demo sayfasını açın. Uygulama paneline gidin ve 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örüntülemek için Ayrıntıları göster'i tıklayın. Özelliği engelleyen iframe'e veya ağ isteğine gitmek için her politikanın yanındaki simgeyi tıklayın.

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

Çerçeve ayrıntıları görünümündeki engellenen özellikler

Chromium sorunu: 1158827

Denemeler ayarında denemeleri filtreleme

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

Denemeler ayarında denemeleri filtreleme

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

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

Vary Başlık sütunu

Chromium sorunu: 1186049

Kaynak paneli iyileştirmeleri

Yeni JavaScript özellikleri için destek

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

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

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

JavaScript gizli marka kontrolleri

Chromium sorunu: 11374

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

Geliştirici Araçları artık birden fazla komut dosyasında kesme noktalarını doğru şekilde ayarlıyor. Modern JavaScript paketleyicileri (ör.Webpack, Toplayıcı), kod bölme özelliğini destekler. Bir paylaşılan bileşenin birden fazla rotaya (kod bölmeleri) dahil edilebileceği senaryolar vardır.

Geliştirici Araçları daha önce yalnızca bir ham konumda kesme noktaları ayarlayabiliyordu. Bu son iyileştirme sayesinde Geliştirici Araçları, ilgili tüm konumlardaki ayrılma noktalarını doğru şekilde belirleyebiliyor.

Chromium sorunları: 1142705, 979000, 1180794

[] gösterimiyle fareyle üzerine gelme önizlemesini destekleme

Geliştirici Araçları artık Kaynaklar panelinde [] gösterimini kullanan JavaScript üye ifadelerinde fareyle üzerine gelme önizlemesini destekliyor.

"[]" gösterimiyle fareyle üzerine gelme önizleme desteği

Chromium sorunu: 1178305

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

Geliştirici Araçları artık HTML dosyaları için daha iyi bir özet desteği sunuyor. Kaynaklar panelinde bir HTML dosyası açın. Kod ana hatlarını, Mac'te Cmd + Üst Karakter + O veya Windows'da Ctrl + Üst Karakter + O tuşlarını kullanarak değiştirebilirsiniz.

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

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

Chromium sorunu: 761019, 1191465

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

DevTools artık satır içi işlev çağrılarını çözümliyor ve Wasm hata ayıklaması için uygun hata yığını izlerini gösteriyor.

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

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

Soldaki Chrome'un eski sürümü, Hata yığın izlemeleri bölümünde kaynak konumunu (ör. dsquare) göstermezken sağdaki yeni sürümde gösterir.

Chromium sorunu: 1189161

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

  • crbug.com adresinden öneri veya geri bildirim gönderin.
  • Geliştirici Araçları'nda, Diğer seçenekler   Diğer > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
  • @ChromeDevTools adresine tweet gönderin.
  • Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.

Geliştirici Araçları'ndaki Yenilikler

DevTools'daki Yenilikler serisinde ele alınan her şeyin listesi.

Chrome 123

Chrome 122

Chrome 121

Chrome 120

Chrome 119

Chrome 118

Chrome 117

Chrome 116

Chrome 115

Chrome 114

Chrome 113

Chrome 112

Chrome 111

Chrome 110

Chrome 109

Chrome 108

Chrome 107

Chrome 106

Chrome 105

Chrome 104

Chrome 103

Chrome 102

Chrome 101

Chrome 100

Chrome 99

Chrome 98

Chrome 97

Chrome 96

Chrome 95

Chrome 94

Chrome 93

Chrome 92

Chrome 91

Chrome 90

Chrome 89

Chrome 88

Chrome 87

Chrome 86

Chrome 85

Chrome 84

Chrome 83

Chrome 82

Chrome 82 iptal edildi.

Chrome 81

Chrome 80

Chrome 79

Chrome 78

Chrome 77

Chrome 76

Chrome 75

Chrome 74

Chrome 73

Chrome 72

Chrome 71

Chrome 70

Chrome 68

Chrome 67

Chrome 66

Chrome 65

Chrome 64

Chrome 63

Chrome 62

Chrome 61

Chrome 60

Chrome 59