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

Sofia Emelianova
Sofia Emelianova
GitHub

Gemini ile CSS hatalarını ayıkla

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ıp Yapay zekaya 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.

"Yapay Zeka'ya sor" menü seçeneği ve ilgili düğme.

Yeni panelde ilgili ayarı açmanız istenir. Koşulları karşıladığınızdan emin olun, ayarı açma/kapatma düğmesini açık konuma getirin 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.

Bir istemi yanıtlayan yeni yapay zeka yardım paneli.

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.

Geliştirici Araçları Ekibi, geri bildiriminizi öğrenmek için sabırsızlanıyor. crbug.com/364805393 adresinde bırakabilirsiniz.

Yapay zeka özelliklerini özel ayarlar sekmesinden kontrol edin

Artık tüm yapay zeka özelliklerini tek bir yerden yönetebilirsiniz: yeni Ayarlar > Yapay zeka yenilikleri sekmesi. Dikkat edilmesi gereken önemli noktaları listeleyen, yapay zeka özelliklerini açıklayan ve bunları ayrı ayrı etkinleştirip devre dışı bırakmanıza olanak tanır.

Yeni yapay zeka yenilikleri sekmesi.

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

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

Geliştirici Araçları'nda artık yapay zeka özellikleri için ayar senkronizasyonunun açık olması gerekmiyor. 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'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 iz üzerinde vurgulayabilirsiniz. Daha sonra ek açıklamalı izleri kaydedebilir, paylaşabilir ve Performans paneline yükleyebilirsiniz.

Soldaki kenar çubuğunda yer alan yeni ek açıklamalar sekmesi ve ek açıklamalı etkinlik, aralık ve bağlantı.

Performans analizlerini doğrudan Performans panelinde alma

Artık Performans panelinin sol kenar çubuğundaki yeni Analizler sekmesinde uygulanabilir analizleri keşfedebilirsiniz. Analizler, Lighthouse raporundan ve kullanımdan kaldırılmak üzere olan Performans analizleri panelinden birleştirilir.

Analizler sekmesi, rehberli analizler sunmayı ve web sitenizi yavaşlatabilecek performans sorunları hakkında uygulanabilir analizler önermeyi amaçlar. Analizlerden yararlanmak için Performans panelinin sol kenar çubuğundaki sekmeyi açın, farklı kategorileri genişletin ve öğelerin fareyle üzerine gelip 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. crbug.com/371170842 adresinden geri bildiriminizi iletebilirsiniz.

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 vardiyalara ait kümeler için Özet sekmesinde zamanlamaları, puanları, öğeleri ve olası suçluları içeren düzenli bir tablo gösterilir.

"Düzen kaymaları" parçasının güncellenmesinden ve "Özet" sekmesinin yeniden düzenlenmesinden önce ve sonra.

Ayrıca canlı metrikler görünümü, Etkileşimler sekmesinin yanında puanlar ve öğelerle birlikte Düzen kaymaları günlüğünü de alır.

"Düzen değişiklikleri" günlüğünü canlı metrik görünümüne eklemeden önceki ve sonraki durum.

Chromium sorunu: 369100729.

Birleştirilmemiş animasyonları tespit etme

Animasyonlar kanalı artık birleştirilmemiş animasyonlar hakkında yararlı bilgiler gösteriyor:

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

Kanaldaki animasyonların adlandırma öncesi ve sonrası görünümü, birleştirilmemiş animasyonların işaretlenmesi ve hatanın nedeninin gösterilmesi.

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örlere taşınıyor

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

"Donanım eşzamanlılığı" ayarının Sensörler paneline taşınmasından önce ve sonra.

Chromium sorunu: 371463665.

Anonim komut dosyalarını göz ardı edin ve yığın izlemelerde kodunuza odaklanın

Konsol'daki yığın izlemeler artık yoksayılanlar listesindeki dosyalardan gelen çerçeveleri düzgün şekilde algılıyor, yoksayar, daraltıyor ve (genişletilmişse) grileştiriyor. Daha önce, genişletilmiş izde 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 > Yoksayılacaklar listesi > eval veya konsoldan anonim komut dosyaları'nı da etkinleştirebilirsiniz.

Yığın izlemelerindeki yoksayılan girişi iyileştirmeden önce ve sonra.

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 şunları desteklemektedir:

  • 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. CSS genelindeki anahtar kelimelerin çözümlenmesinden önce ve sonra.

Chromium sorunları: 40280717, 40706051, 40501131.

Zaman aralığı ve anlık görüntü modlarında HTTP olmayan sayfalar için Lighthouse denetimleri

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

Zaman aralığı ve anlık görüntü modlarında HTTP olmayan sayfa için denetimin etkinleştirilmesinden önce ve sonra.

Erişilebilirlik

Bu sürüm aşağıdaki erişilebilirlik iyileştirmelerine sahiptir:

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

Çeşitli öne çıkan anlar

Bu sürümdeki önemli düzeltmeler ve iyileştirmelerden bazıları şunlardır:

  • Yavaşlatma 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 girintili değil, 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ü (343516786) atlayabileceğiniz yeni söz dizimini destekler. Ayrıca, yedek oluşturma sorunu düzeltildi (365802559).
  • Ağ: Düzeltilen GraphQL önizlemeleri (369931288).
  • Performans: Artık izleme ve işleme izlerinin artımlı ilerleme durumunu raporluyor.
  • 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ı ekibiyle 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.

Geliştirici Araçları'ndaki yenilikler

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