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

Sofia Emelianova
Sofia Emelianova
GitHub

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.

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

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.

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.

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

Yeni yapay zeka yenilikleri sekmesi.

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

Soldaki kenar çubuğunda yeni ek açıklama 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 analizler keşfedebilirsiniz. Analizler, Lighthouse raporu ve desteği sonlandırılmak üzere olan Performans analizleri panelinden birleştirilir.

Analizler sekmesi, rehberli analizler sunmayı ve web sitenizi yavaşlatabilecek performans sorunlarıyla ilgili 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 adresinden gönderebilirsiniz.

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.

"Düzenleme kaymaları" kanalında yapılan güncelleme ve "Özet" sekmesinin yeniden düzenlenmesi öncesi ve sonrası.

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.

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

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örler'e 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 önceki ve sonraki durum.

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 > Yoksayılacaklar listesi > eval veya konsoldan anonim komut dosyaları'nı da etkinleştirebilirsiniz.

Yığın izlemelerindeki yoksayma listelemesini 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 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. CSS genelindeki anahtar kelimelerin çözümlenmeden önceki ve sonraki hali.

Chromium sorunları: 40280717, 40706051, 40501131.

Lighthouse, zaman aralığı ve anlık görüntü modlarında HTTP olmayan sayfaları denetler

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

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

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 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ü 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ş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.

Geliştirici Araçları'ndaki yenilikler

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