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

Gemini ile CSS'de hata ayıklama

Chrome Geliştirici Araçları'na yeni deneysel yapay zeka yardımı paneli eklendi. Bu panelde Gemini ile sohbet edebilir ve CSS'nizi hata ayıklama konusunda yardım alabilirsiniz.

Ş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ı, yeni Yapay zeka yardımı panelini açar.

Yeni panelde, ilgili ayarı etkinleştirmeniz istenir. Koşulları karşıladığınızdan emin olun, ayar açma/kapatma düğmesini etkinleştirin ve Yapay zeka yardımı paneline geri dönün. Seçtiğiniz öğeyi bağlam olarak alı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 Asistanı ile Yapılabilecek 5 Harika Şey başlıklı makaleyi inceleyin ve Stil için yapay zeka yardımı başlıklı makaleye göz atın.

DevTools ekibi, geri bildirimlerinizi bekliyor. Geri bildiriminizi crbug.com/364805393 adresine gönderebilirsiniz.

Yapay zeka özelliklerini özel bir ayarlar sekmesinden kontrol etme

Artık tüm yapay zeka özelliklerini tek bir yerden yönetebilirsiniz: yeni ayarlar Ayarlar > Yapay zeka yenilikleri sekmesi. Önemli hususları listeler, yapay zeka özelliklerini açıklar ve bu özellikleri ayrı ayrı etkinleştirip devre dışı bırakmanıza olanak tanır.

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 ayarlar senkronizasyonunun etkinleştirilmesi gerekmiyor. Bu nedenle, daha önce kullanıma sunulan Console Insights ve stil oluşturma için yapay zeka yardımı özelliklerine tek tıklamayla erişebilirsiniz.

Chrome'da oturum açtıysanız Ayarlar > Yapay zeka yenilikleri'nde bu özellikleri etkinleştirmeniz yeterlidir.

Performans paneli iyileştirmeleri

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

Performans bulgularına not ekleme ve bunları paylaşma

Performans paneli, solda genişletilebilir bir kenar çubuğunda yeni Ek açıklamalar sekmesini içerir. Bu sekme, izleme keşfi için not oluşturma ve performans bulgularını paylaşırken işbirliği yapma sürecini kolaylaştırır.

Artık etkinlikleri etiketleyip oklarla bağlayabilir ve zaman aralıklarını doğrudan iz üzerinde vurgulayabilirsiniz. Daha sonra, açıklama eklenmiş 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 analizleri keşfedebilirsiniz. Analizler, Lighthouse raporu ve artık desteklenmeyecek olan Performans Analizleri panelinden alınır.

Analizler sekmesi, rehberli analiz sağlamayı 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 öğelerin üzerine gelip bunları tıklayın. Performans paneli, izdeki ilgili etkinlikleri vurgular.

DevTools ekibi, içgörülerin faydası, iyileştirme yöntemleri ve PageSpeed Insights ile 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ı izi yeni bir görünüme kavuştu. Düzen kaymaları 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 kümeleri, Özet sekmesinde zamanlamalar, puanlar, öğeler ve olası suçluların yer aldığı düzenli bir tabloya sahip olur.

Ayrıca, canlı metrikler görünümüne Etkileşimler sekmesinin yanına puanlar ve öğeler içeren Düzen kaymaları günlüğü eklenir.

Chromium sorunu: 369100729.

Birleştirilmemiş animasyonları tespit etme

Animasyonlar izi artık birleştirilmemiş animasyonlarla ilgili faydalı 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.
• Birleştirme hatasının nedenini Özet sekmesinde gösterir.

Daha fazla bilgi için Yalnızca Compositor Ö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, yani Sensörler paneline taşınıyor.

Chromium sorunu: 371463665.

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

Konsol'daki yığın izlemeleri artık yoksayma listesindeki dosyalardan gelen çerçeveleri doğru şekilde algılıyor, yoksayıyor, daraltıyor ve (genişletilmişse) gri renkte gösteriyor. Daha önce, genişletilmiş izlemede işlev adı gri renkte gösterilmiyordu.

Ayrıca, kaynak URL'si olmayan anonim komut dosyalarını yoksayması için DevTools'u ayarlamak üzere yeni ayarları da etkinleştirebilirsiniz: Ayarlar > Yoksayma listesi > check_box Değerlendirme veya konsoldan gelen anonim komut dosyaları.

Ayrıca, konsol günlüğünü sağ tıklayıp Farklı kaydet... seçeneğini kullandığınızda Daha fazla/daha az göster metni kaydedilmez.

Chromium sorunları: 40279542, 40945570, 345248263.

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

Öğeler > Stiller sekmesi artık şunları destekliyor:

• Görünüm penceresindeki ızgara yerleşimi 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 sekmesinde bunun yanında bir renk seçici gösterileceği anlamına gelir.

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 rapor oluşturabilir.

Erişilebilirlik

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

• Kaynaklar > Düzenleyici'de açık dosyaların bulunduğu sekmeler artık X düğmesine odaklanıp Enter veya Boşluk tuşuna basılarak kapatılabiliyor.
• Performans bölümünde artık izlemede bir giriş seçip Boşluk tuşuna basarak bağlam menüsünü açabilirsiniz.
• Performans bölümündeki soldaki kenar çubuğunda yer alan Analizler sekmesine klavyeyle erişilebilir ve sekme tuşuyla geçiş yapılabilir.

Chromium sorunu: 372411090.

Diğer önemli noktalar

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

• Sınırlama ayarları artık Performans ve Ağ panelleri arasında doğru şekilde senkronize ediliyor (370332090).
• Application (Uygulama) > Background services (Arka plan hizmetleri) > Speculative loads (Tahmini yüklemeler) > Rules (Kurallar) bölümünde artık Sources (Kaynaklar) > Editor (Düzenleyici) bölümündeki {} güzel yazdır düğmesine benzer bir düğme bulunuyor (40279147).
• Canlı ifadeler: Otomatik tamamlama seçeneği belirlendikten sonra Tab tuşuna basıldığında metni girintilemek yerine düzenleme alanından çıkılıyor (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, sabit yedek oluşturma (365802559).
• Ağ: GraphQL önizlemeleri düzeltildi (369931288).
• Performans: Artık izlerin yüklenmesi ve işlenmesiyle ilgili artımlı ilerleme raporları sunuluyor.
• WebAuthn: signal* yöntemleriyle değiştirilen kimlik bilgilerini artık dinamik olarak günceller (368467199).
• WebAssembly: Konsol'daki bir uyarı artık bir WebAssembly modülü için birden fazla hata ayıklama sembolü varsa ve hangisinin kullanıldığını bildiriyor (40879198, 369515221).
• Core Web Vitals yer paylaşımı, Rendering (Oluşturma) sekmesinden kaldırıldı 328487897.
• Ü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, Dev veya Beta'yı kullanmayı düşünebilirsiniz. Bu önizleme kanalları, en yeni DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve kullanıcılarınızdan önce sitenizdeki sorunları 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 diğer konuları tartışmak için aşağıdaki seçenekleri kullanın.

• crbug.com adresinden bize geri bildirim ve özellik istekleri gönderebilirsiniz.
• Geliştirici Araçları'nda more_vert Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunu bildirin.
• @ChromeDevTools hesabına tweet gönderin.
• Geliştirici Araçları'ndaki yenilikler veya Geliştirici Araçları İpuçları YouTube videolarına yorum bırakın.

Geliştirici Araçları'ndaki yenilikler

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