Geliştirici Araçları'ndaki yenilikler, Chrome 131

Gemini ile CSS'de hata ayıklama

Chrome DevTools'a, Gemini ile sohbet edip CSS'nizde hata ayıklama konusunda yardım alabileceğiniz yeni deneysel yapay zeka yardımı paneli eklendi.

Şimdi deneyin! Öğeler panelinde bir öğeyi sağ tıklayın ve Yapay Zeka'ya sor'u seçin veya öğenin yanındaki ilgili düğmesini tıklayın. Geliştirici Araçları'nda yeni yapay zeka yardımı paneli açılır.

Yeni panelde, ilgili ayarı etkinleştirmeniz istenir. Şartları karşıladığınızdan emin olun, ayar açma/kapatma düğmesini açın ve Yapay zeka yardımı paneline geri dönün. Seçtiğiniz öğe bağlam olarak alınır. Öğeyle ilgili sorunuzu yazın.

Yeni paneli en iyi şekilde kullanma hakkında daha fazla bilgi edinmek için Geliştirici Araçları Yapay Zeka Yardımı ile Yapabileceğiniz 5 Harika Şey başlıklı makaleyi inceleyin ve Stil oluşturma için yapay zeka yardımı başlıklı makaleyi inceleyin.

DevTools ekibi geri bildirimlerinizi bekliyor. crbug.com/364805393 adresinde bırakabilirsiniz.

Özel bir ayarlar sekmesinde yapay zeka özelliklerini kontrol etme

Artık tüm yapay zeka özelliklerini tek bir yerden yönetebilirsiniz: yeni ayarlar Ayarlar > Yapay zeka yenilikleri sekmesi. Bu sayfada, göz önünde bulundurulması gereken önemli noktalar listelenir, yapay zeka özellikleri açıklanır ve bu özellikleri tek tek etkinleştirip devre dışı bırakabilirsiniz.

Daha fazla bilgi için Ayarlar > Yapay zeka yenilikleri bölümüne bakın.

Console analizleri bir tık uzağınızda

Geliştirici Araçları'nda yapay zeka özellikleri için artık ayarlar senkronizasyonunun etkinleştirilmesi gerekmez. Böylece, daha önce yayınlanan Konsol analizleri ve stil oluşturma için yapay zeka yardımı tek tıklamayla erişilebilir.

Chrome'da oturum açtıysanız Ayarlar > Yapay zeka yenilikleri bölümünden bu özellikleri etkinleştirebilirsiniz.

Performans paneli iyileştirmeleri

Bu sürümde Performans panelinde çeşitli iyileştirmeler yapıldı.

Performans bulgularını not ekleyip paylaşma

Performans paneline, sol taraftaki genişletilebilir kenar çubuğunda yeni Açıklamalar sekmesi eklendi. Bu sekme, performans bulgularını paylaşırken izleme keşfi ve ortak çalışma için not oluşturma sürecini kolaylaştırır.

Artık etkinlikleri oklarla etiketleyip bağlayabilir ve zaman aralıklarını doğrudan izleme üzerinde vurgulayabilirsiniz. Ardından, ek açıklamalı izleri kaydedebilir, paylaşabilir ve Performans paneline geri yükleyebilirsiniz.

Performans analizlerini doğrudan Performans panelinde alma

Artık Performans panelinin sol kenar çubuğundaki yeni Analizler sekmesinde uygulanabilir analizler keşfedebilirsiniz. Analizler, Lighthouse raporu ve desteği sonlandırılmak üzere olan Performans analizleri panelinden birleştirilir.

Analizler sekmesi, web sitenizi yavaşlatabilecek performans sorunlarıyla ilgili rehberli analizler sunmayı ve uygulanabilir analizler önermeyi amaçlar. Analizlerden yararlanmak için Performans panelinin sol kenar çubuğundaki sekmeyi açın, farklı kategorileri genişletin ve fareyle öğeleri tıklayın. Performans panelinde, izlemedeki ilgili etkinlikler vurgulanır.

Geliştirici Araçları ekibi, analizlerin yararlılığı, iyileştirme yöntemleri ve PageSpeed Insights ve Lighthouse gibi diğer araçlarla birlikte kullanım deneyiminiz hakkındaki geri bildirimlerinizi bekliyor. Geri bildiriminizi crbug.com/371170842 adresinde paylaşabilirsiniz.

Aşırı düzen kaymalarını daha kolay tespit etme

Düzen kaymaları kanalı yeni bir görünüme kavuştu. Düzen değişiklikleri artık daha görünür mor elmaslarla işaretleniyor ve zaman çizelgesindeki yakınlıklarına göre kümeler halinde gruplandırılıyor. Hem vardiyalar hem de vardiyanın kümeleri için Özet sekmesinde zamanlamaları, puanları, öğeleri ve olası suçluları içeren düzenli bir tablo gösterilir.

Ayrıca canlı metrik görünümünde, Etkileşim sekmesinin yanında skorları ve öğeleri içeren Düzen değişiklikleri günlüğü de gösterilir.

Chromium sorunu: 369100729.

Birleştirilmemiş animasyonları tespit etme

Animasyonlar parçasında artık birleştirilmemiş animasyonlarla ilgili faydalı bilgiler gösteriliyor:

• Animasyonları, varsa ilgili CSS özelliğine göre adlandırır.
• Birleştirilmemiş animasyonları parçada kırmızı üçgenlerle işaretler.
• Özet sekmesinde, oluşturma hatasının nedenini gösterir.

Daha fazla bilgi için Yalnızca Oluşturucu Özelliklerini Kullanma ve Katman Sayısını Yönetme başlıklı makaleyi inceleyin.

Chromium sorunu: 41006273.

Donanım eşzamanlılığı, Sensörler'e taşınıyor

Donanım eşzamanlılığı ayarı, Performans panelinden daha uygun bir yere (Sensörler paneli) taşındı.

Chromium sorunu: 371463665.

Anonim komut dosyalarını yoksayma ve yığın izlemelerde kodunuza odaklanma

Console'daki yığın izlemeleri artık yoksayılanlar listesinde yer alan dosyalardan gelen çerçeveleri düzgün şekilde algılayıp yoksayıyor, daraltıyor ve (genişletildiyse) devre dışı bırakıyor. Önceden, genişletilmiş izlemede işlev adı devre dışı bırakılmıyordu.

DevTools'u kaynak URL'si olmayan anonim komut dosyalarını yoksayacak şekilde ayarlamak için yeni ayarlar Ayarlar > Yoksayılacaklar listesi > check_box eval veya konsoldan anonim komut dosyaları'nı da etkinleştirebilirsiniz.

Ayrıca, konsol günlüğünü sağ tıklayıp Farklı kaydet'i seçtiğinizde Daha fazla/az göster metni kaydedilmez.

Chromium sorunları: 40279542, 40945570, 345248263.

Öğeler > Stiller: Izgara yer paylaşımları ve CSS genelindeki anahtar kelimeler için sideways-* yazma modları desteği

Öğeler > Stiller sekmesi artık aşağıdakileri destekler:

• Görüntü alanındaki ızgara yer paylaşımı artık sideways-rl ve sideways-lr yazma modları için ızgaralar gösteriyor.
• CSS genelindeki anahtar kelimeleri çözer. Pratikte bu, örneğin inherit bir renkse Stiller sekmesinin yanında bir renk seçici gösterileceği anlamına gelir.

Chromium sorunları: 40280717, 40706051, 40501131.

Lighthouse, zaman aralığı ve anlık görüntü modlarında HTTP olmayan sayfalar için denetleme yapar.

Lighthouse artık zaman aralığı ve anlık görüntü modlarında HTTP olmayan sayfalar için rapor oluşturabilir.

Erişilebilirlik

Bu sürümde aşağıdaki erişilebilirlik iyileştirmeleri yapılmıştır:

• Kaynaklar > Düzenleyen bölümünde, açık dosyaların bulunduğu sekmeler artık X düğmesine odaklanıp Enter veya Boşluk tuşuna basılarak kapatılabilir.
• Performans bölümünde artık izlemede bir giriş seçip Boşluk tuşuna basarak içerik menüsünü açabilirsiniz.
• Performans bölümünde, soldaki kenar çubuğundaki Analizler sekmesine klavyeden erişilebilir ve sekme tuşlarıyla "geçilebilir".

Chromium sorunu: 372411090.

Diğer öne çıkan özellikler

Bu sürümdeki dikkate değer düzeltme ve iyileştirmelerden bazıları şunlardır:

• Azaltma ayarları artık Performans ve Ağ panelleri arasında doğru şekilde senkronize ediliyor (370332090).
• Uygulama > Arka plan hizmetleri > Spekülatif yükler > Kurallar'da artık Kaynaklar > Düzenleyici'ye (40279147) benzer bir {} güzel yazdırma düğmesi bulunuyor.
• Canlı ifadeler: Bir otomatik tamamlama seçeneği belirledikten sonra Tab tuşuna basıldığında artık metin girintiye alınmak yerine düzenleme alanından çıkılır (349939551).
• Öğeler > Stiller: anchor() ve anchor-size(), bağımsız değişkenleri yeniden sıralayabileceğiniz ve anchor-size() yönünü atlayabileceğiniz yeni söz dizimini destekler (343516786). Ayrıca, yedek oluşturma sorunu düzeltildi (365802559).
• Ağ: GraphQL önizlemeleri düzeltildi (369931288).
• Performans: Artık izlemelerin yüklenmesi ve işlenmesi işleminin artımlı ilerlemesini raporlar.
• WebAuthn: Artık signal* yöntemleriyle değiştirilen kimlik bilgilerini dinamik olarak güncelliyor (368467199).
• WebAssembly: Artık Konsol'da, bir WebAssembly modülü için birden fazla hata ayıklama sembolünün olup olmadığını ve hangilerinin kullanıldığını (40879198, 369515221) belirten bir uyarı gösteriliyor.
• Core Web Vitals yer paylaşımı, Oluşturma sekmesinden 328487897 kaldırıldı.
• Üretken yapay zeka özellikleri artık Chrome ayarlarının senkronize edilmesini gerektirmiyor.

Ö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şmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır 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.