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

Performans panelindeki Web Verileri bilgileri pop-up'ı

Performans panelindeki bir Web Verileri işaretçisinin üzerine gelerek göstergenin neyle ilgili olduğunu (performansın iyi, iyileştirilmesi gerekiyor veya kötü) hakkında bilgi edinebilirsiniz.

Chromium sorunu: 1147872

CSS Scroll-snap'ı görselleştirin

CSS kaydırma yapışkanlığı hizalamasını incelemek için artık Öğeler panelinde scroll-snap rozetini açıp kapatabilirsiniz.

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

Yukarıdaki örnekte, tutturma kenarlarında nokta işaretleri görebilirsiniz. Kaydırma bağlantı noktası sabit bir çizgiyle gösterilirken, tutturucu öğelerin dış çizgileri kısa çizgilidir. Kaydırma kenar boşluğu turuncu renkle doldurulurken kaydırma dolgusu yeşil renkte doldurulur.

Chromium sorunu: 862450

Yeni Bellek denetleyicisi

JavaScript'te ArrayBuffer 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 ayrılma noktası ayarlayın.

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

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

Chromium sorunu: 1166577

Öğeler panelindeki yeni rozet ayarları bölmesi

Artık Öğeler panelindeki Rozet ayarları üzerinden rozetleri seçerek etkinleştirebilir veya devre dışı bırakabilirsiniz. Web sayfalarını incelerken önemli rozetleri özelleştirmek ve bu rozetlere odaklanabilmek 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. En üstte rozet ayarları bölmesi gösterilir. Rozetleri göstermek/gizlemek için herhangi bir onay kutusunu 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 resimle ilgili daha fazla bilgi (oluşturulan boyut, oluşturulan en boy oranı, gerçek boyut, gerçek en boy oranı ve dosya boyutu) gösteriyor.

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

Resim en boy oranı bilgileri, resmi önizlemek için tıkladığınızda da Ağ panelinde görülebilir.

Chromium sorunları: 1149832, 1170656

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

Ağ paneline yeni bir ağ koşulları düğmesi eklenir. Ağ koşulları sekmesini açmak için bu ağı tıklayı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 öğelerini desteklemeyen tarayıcılarda doğru kodlanıp kodlanmadığını test edecek şekilde yapılandırın.

Chromium sorunu: 1162042

Stiller bölmesi geliştirmeleri

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

Artık Stiller bölmesinde bir CSS mülkünü sağ tıklayabilir ve hesaplanan CSS değerini görüntülemek için Hesaplanan değeri görüntüle'yi seçebilirsiniz.

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ştiricilerinin öğ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 özelliği şu anda deneyseldir. Test etmek için lütfen chrome://flags/#enable-experimental-web-platform-features eklentisini etkinleştirin.

Chromium sorunu: 1092093

Sorun türlerini renk ve simgelerle sınıflandırma

Sorunlar sekmesi artık sorunları sayfa hataları, yaklaşan zarar veren değişiklikler ve önem derecesinin daha iyi belirlenmesi için olası iyileştirmeler şeklinde kategorilere ayırıyor. Konsoldaki 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ği üzerinde doğrudan etkisi olan sorunlar.
• Yaklaşan zarar veren değişiklikler (sarı). Yakında web platformunda yapılacak ve uyumsuz şekilde yapılacak ve sayfa işlevselliği kaybına neden olabilecek bir değişiklik hakkında bilgi veren sorunlar (ör. yaklaşan CORS RFC 1918 değişiklikleriyle ilgili uyarı).
• Olası iyileştirmeler (mavi). Sayfadaki olası iyileştirmeler, ancak şu anda sayfanın temel işlevselliğine zarar vermiyor (ör. erişilebilirlik sorunları)

Chromium sorunu: 1183241

Güven jetonlarını silme

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

Güven Jetonu, 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 Jetonlarını 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öster

Engellenen özelliklerle ilgili ayrıntıları artık Çerçeve ayrıntıları görünümündeki İzin politikası bölümünde görebilirsiniz.

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ğiyle ilgili ayrıntıları görüntülemek için Ayrıntıları göster'i tıklayın. Özelliği engelleyen iframe veya ağ isteğine gitmek için her bir politikanın yanındaki simgeyi tıklayın.

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

Chromium sorunu: 1158827

Denemeler ayarında denemeleri filtreleme

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

Ö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 bölmesindeki yeni Vary Header sütununu kullanın.

Chromium sorunu: 1186049

Kaynaklar paneli iyileştirmeleri

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 kapsamını genişleterek herhangi bir nesnede özel sınıf alanları testini destekler.

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

Kesme noktalarında hata ayıklama 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. Paylaşılan bir bileşenin birden fazla rotaya (kod bölmeleri) dahil edilebildiği senaryolar vardır.

Daha önce Geliştirici Araçları, ayrılma noktalarını yalnızca bir ham konum için belirleyebiliyordu. Geliştirici Araçları, bu son iyileştirmeyle ilgili tüm konumlardaki ayrılma noktalarını doğru şekilde ayarlayabilir.

Chromium sorunları: 1142705, 979000, 1180794

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

Geliştirici Araçları artık Kaynaklar panelinde [] notasyonunu kullanan JavaScript üye ifadelerinde fareyle önizlemeyi destekliyor.

Chromium sorunu: 1178305

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

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

Aşağıdaki örnekte Geliştirici Araçları, ana hatlardaki tüm işlevleri artık doğru şekilde listeler. Geliştirici Araçları daha önce işlevlerin yalnızca bazılarını gösteriyordu.

Chromium sorunu: 761019, 1191465

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

Geliştirici Araçları 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 izlemelerini gösteriyor.

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

Soldaki Chrome'un eski sürümü, Hata yığın izlemelerinde kaynak konumunu (ör. dsquare) göstermezken sağdaki yeni sürüm gösteriyor.

Chromium sorunu: 1189161

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

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

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

Geliştirici Araçları'ndaki yenilikler serisinde ele alınan her şeyin listesi.