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

Sofia Emelianova

Jecelyn Yeen

WebAssembly hata ayıklama desteği

Geliştirici Araçları, Ayarlar > Deneysel Özellikler > WebAssembly Hata Ayıklama: DWARF desteğini etkinleştir seçeneğini varsayılan olarak etkinleştirir. Daha fazla bilgi için Debugging WebAssembly with modern tools (Modern araçlarla WebAssembly'de hata ayıklama) başlıklı makaleyi inceleyin.

Bu deneysel özellik, yürütmeyi duraklatmanıza ve Wasm uygulamalarında C ve C++ kodunda hata ayıklamanıza olanak tanır. Hata ayıklama ile ilgili tüm bilgilerden yararlanabilirsiniz:

• DWARF hata ayıklama bilgileri kullanılarak eşlenmiş orijinal kaynak kodunuz.
• Çağrı yığınında anlaşılır işlev adları.
• Kesme noktası desteği ve daha fazlası.

Wasm hata ayıklamayı test etmek için C/C++ DevTools Support (DWARF) uzantısını yükleyin ve Mandelbrot demosundaki kodu adım adım inceleyin.

Chromium sorunu: 1414289.

Wasm uygulamalarında geliştirilmiş adım adım ilerleme davranışı

Orijinal kodunuzda üzerinden geçme işlemi artık montajdan çıkarma (.wasm dosyası) sırasında duraklamayı önlüyor. Daha önce bu noktada duraklatılıyordu.

Ancak, işlevin dışına çıktığında (ör. işlevden döndükten sonra) adımlama sona erer.

Bu davranış, Ayarlar > Tercihler > Kaynaklar bölümünde varsayılan olarak etkindir.

Chromium sorunu: 1418938.

Öğeler panelini ve Sorunlar sekmesini kullanarak otomatik doldurma özelliğinde hata ayıklama

Chrome Otomatik Doldurma, formları adresleriniz veya ödeme bilgileriniz gibi kayıtlı bilgilerle otomatik olarak doldurur. Otomatik doldurmayla ilgili sorunları kolayca ayıklayabilmeniz için Öğeler paneli artık bu sorunları kırmızı kıvırcık alt çizgilerle vurgulayabilir.

Bu özelliği incelemek için Ayarlar > Denemeler > Nesneler paneli DOM ağacında ihlalde bulunan bir düğümü veya özelliği vurgular'ı etkinleştirin ve bu demo sayfasını inceleyin.

DOM ağacında vurgulanan bir sorunun üzerine gelin ve Sorunu görüntüle'yi tıklayarak Sorunlar sekmesini açın. Bu sekmede, algılanan tüm sorunlar listelenir ve neyin yanlış gittiğiyle ilgili ipuçları verilir.

Chromium sorunu: 1399414.

Kaydedici'de onaylamalar

Kaydedici paneli artık kayıt sırasında doğrudan onaylamalar eklemenize olanak tanıyor. Çalışma zamanı verilerinin tamamı kullanımınıza sunuluyor.

Bir onaylama eklemek için yeni bir kayıt başlatın, sayfanızla etkileşimde bulunun ve Onaylama ekle'yi tıklayın. Kaydedici, waitForElement türünde bir adımı anında özelleştirebileceğiniz şekilde ekler. Kahve arabası demosunda onaylamaların nasıl çalıştığını görmek için videoyu izleyin.

Bu videoda aşağıdakileri nasıl onaylayacağınız gösterilmektedir:

• HTML özellikleri (ör. bir öğenin class).
• JSON'daki JavaScript özellikleri (ör. .innerText).

Ayrıca, örneğin JavaScript'teki koşullu ifadeler, düğüm alt öğelerinin sayısı (count) ve öğe görünürlüğü gibi özellikleri onaylamak için adımlar da yapılandırabilirsiniz. Daha fazla bilgi için Yapılandırma adımları başlıklı makaleyi inceleyin.

Ayrıca Kaydedici artık yan yana kod görünümünde ve sağ tıklama adım menüsünde tercih ettiğiniz senaryo biçimini hatırlıyor.

Chromium sorunu: 1423624.

Lighthouse 10.1.1

Lighthouse paneli artık 10.1.0 sürümünde önemli bir değişiklikle birlikte Lighthouse 10.1.1'i çalıştırıyor. URL'lerle ilgili tüm denetimler artık tüzel kişiye göre gruplandırılıyor ve boyut veya süre gibi sayısal istatistikler birleştiriliyor. Popüler üçüncü taraflar da kategorileriyle etiketlenir. Böylece sayfadaki amaçlarını belirlemek daha kolay olur.

Geliştirici Araçları'nda Lighthouse panelini kullanmanın temel bilgileri için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 772558.

Performans geliştirmeleri

performance.mark(), Performans > Zamanlamalar'da fareyle üzerine gelindiğinde zamanlamayı gösterir.

performance.mark() yöntemi artık Performans > Zamanlamalar'da ilgili işaretin üzerine geldiğinizde zamanlamasını gösteriyor. Buradaki zamanlama, önceki gezinme etkinliğine göre belirlenen bir zaman damgasıdır.

Chromium sorunu: 1426762.

profile() komutu, Performans > Ana bölümünü doldurur.

Konsol'daki profile() ve profileEnd() komutları artık Performans panelinin Ana iş parçacığında CPU profil oluşturmayı başlatıp durduruyor.

Chromium sorunu: 1429191.

Yavaş kullanıcı etkileşimleriyle ilgili uyarı

200 milisaniyeden uzun süren kullanıcı etkileşimleri, Performans > Özet sekmesinde Interaction to Next Paint (INP) uyarısı alır.

Ayrıca etkileşimin kimliği, ipucundan Özet'e taşındı.

Chromium sorunları: 1432512, 1432509.

Web Verileri parçası taşındı

Performans panelinden aşağıdaki izler kaldırıldı:

• Web Verileri parçası. Bunun yerine, fareyle üzerine gelerek Zamanlamalar parçasındaki ilgili zamanlamalara bakın.
• Uzun Görevler alt izi. Bu tür görevleri, Ana parça bölümünde kırmızı renkte ve kırmızı üçgenle işaretlenmiş olarak bulabilirsiniz.

Hem Web Vitals (Web Verileri) hem de Long Tasks (Uzun Görevler) izlerinde başka yerlerde de bulunan bilgiler vardı. Ayrıca, tıklandığında daha ayrıntılı bilgi sağlayan, daha kapsamlı özelliklere sahip alternatiflerine kıyasla etkileşimli değillerdi.

Ayrıca, Deneyimler parçası, kullanımını daha doğru yansıtmak için Düzen Kaymaları olarak yeniden adlandırıldı.

Web Vitals hakkında daha fazla bilgi edinin.

JavaScript Profil Aracı desteğinin sonlandırılması: Üçüncü aşama

Geliştirici Araçları ekibi, Chrome 58'den itibaren JavaScript Profiler'ın desteğini sonlandırmayı ve Node.js ile Deno geliştiricilerinin JavaScript CPU performansını profillemek için Performans panelini kullanmasını planlamıştı.

DevTools 114 sürümü, dört aşamalı JavaScript Profiler desteğinin sonlandırılmasının üçüncü aşamasını başlatıyor. Bu aşamada, JavaScript Profiler paneli Geliştirici Araçları'ndan kaldırılır ancak Ayarlar > Deneysel'i kullanarak geçici olarak etkinleştirebilir ve üç nokta menüsünden açabilirsiniz.

CPU performansını profillemek için Performans panelini kullanın.

Chromium sorunu: 1428026.

Diğer önemli noktalar

Bu sürümdeki önemli düzeltmelerden bazıları şunlardır:

• Renk seçici artık kırpıldığında gamut dışı olan HWB değerlerini algılıyor (1429271).
• Kaynaklar paneli:
  • Kaynak eşleşmeleri için JSON sözdizimi vurgulama özelliği etkinleştirildi (1385374).
  • Kaynak eşleşmelerini manuel olarak devre dışı bıraktığınızda "Kaynak eşleşmesi algılandı" mesajlarının gösterilmesi durduruldu (1423718).
• Konsol artık Ctrl + Enter ile eksik JavaScript ifadelerini değerlendirmenize ve söz dizimi hatalarını (1314700) çıktı olarak vermenize olanak tanıyor.
• Kesme noktası düzenleme iletişim kutusunda artık kapat düğmesi var. Daha önce, Enter tuşuna basmanız veya iletişim kutusunun odağını kaldırmanız gerekiyordu (1412980).

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