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

WebAssembly hata ayıklama desteği

Geliştirici Araçları, Ayarlar'ı etkinleştirir > Denemeler > WebAssembly Hata Ayıklaması: DWARF desteğini varsayılan olarak etkinleştirin. Daha fazla bilgi için Modern araçlarla WebAssembly hatalarını ayıklama bölümüne bakın.

Bu deneme, Wasm uygulamalarında yürütmeyi duraklatmanıza ve C ve C++ kodlarında hata ayıklamanıza olanak tanır. Böylece, tüm hata ayıklama bilgilerini kullanabilirsiniz:

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

Wasm hata ayıklamasını test etmek için C/C++ Geliştirici Araçları Desteği (DWARF) uzantısını yükleyin ve Mandelbrot demosundaki kodu adım adım inceleyin.

Chromium sorunu: 1414289.

Wasm uygulamalarındaki adım atma davranışı iyileştirildi

Orijinal kodunuzda artık sökme işlemi sırasında (.wasm dosya) duraklatmanın önüne geçmiş olursunuz. Adımları uygulayın. Önceden burada duraklıyordu.

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

Bu davranış Ayarlar > Tercihler > Kaynaklar.

Chromium sorunu: 1418938.

Öğeler panelini ve Sorunlar sekmesini kullanarak Otomatik Doldurma hatalarını ayıklayın

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

Bu özelliğe göz atmak için Ayarlar > Denemeler > Öğeler paneli DOM ağacında ihlalde bulunan bir düğümü veya özelliği vurgular ve bu tanıtım sayfasını inceleyin.

Fareyle DOM ağacında vurgulanan bir sorunun üzerine gelin ve Sorunu görüntüle'yi tıklayarak algılanan tüm sorunları listeleyen ve neler olduğuyla ilgili ipuçları sağlayan Sorunlar sekmesini açın.

Chromium sorunu: 1399414.

Kaydedicideki Onaylar

Kaydedici paneli, artık tüm çalışma zamanı verilerini kullanarak kayıt sırasında onaylamalar eklemenize olanak tanıyor.

Onaylama eklemek için yeni bir kayıt başlatın, sayfanızla etkileşim kurun ve Onay ekle'yi tıklayın. Kaydedici, anında özelleştirebileceğiniz waitForElement türünde bir adım ekler. Kahve sepeti demosundaki onayları uygulamalı olarak görmek için videoyu izleyin.

Bu videoda nasıl hak talebinde bulunacağınız gösterilmektedir:

• Bir öğenin class özelliği gibi HTML özellikleri.
• JSON dosyasındaki JavaScript özellikleri, örneğin, .innerText.

Doğrulama adımlarını yapılandırabilirsiniz. Örneğin, JavaScript'teki koşullu ifadeler, düğümün alt öğesi sayısı (count), öğe görünürlüğü ve daha fazlası. Daha fazla bilgi edinmek için Adımları yapılandırma başlıklı makaleye bakın.

Ayrıca Kaydedici, yan yana kod görünümünde ve sağ tıklamayla açılan adım menüsünde tercih ettiğiniz komut dosyası biçimini artık hatırlar.

Chromium sorunu: 1423624.

Lighthouse 10.1.1

Lighthouse paneli artık Lighthouse 10.1.1'i çalıştırıyor. 10.1.0'da önemli bir değişiklik yapıldı. URL'lerle ilgili tüm denetimler artık tüzel kişiliklere ve boyut veya süre gibi toplu sayısal istatistiklere göre gruplandırılmaktadır. Popüler üçüncü taraflar da kendi kategorileriyle etiketlenir. Böylece, sayfadaki amaçları daha kolay belirlenebilir.

Geliştirici Araçları'nda Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme konusuna bakın.

Chromium sorunu: 772558.

Performans geliştirmeleri

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

performance.mark() yöntemi artık Performans > Zamanlamalar. Buradaki zamanlama, önceki gezinme etkinliğine göre bir zaman damgasıdır.

Chromium sorunu: 1426762.

Performans alanını profile() komutuyla doldurur > Santral

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

Chromium sorunu: 1429191.

Yavaş kullanıcı etkileşimleri için uyarı

200 milisaniyeden uzun süren kullanıcı etkileşimleri Performans bölümünde Sonraki Boyamayla Etkileşim (INP) uyarısı alır > Özet sekmesi.

Ayrıca etkileşim kimliği, ipucundan Özet'e taşınmıştır.

Chromium sorunları: 1432512, 1432509.

Web Verileri kanalı taşındı

Performans paneli aşağıdaki kanalları kaldırdı:

• Web Verileri kanalı. Bunun yerine, fareyle üzerine geldiğinizde Zamanlamalar kanalındaki alakalı zamanlamalara bakın.
• Uzun Görevler alt kanalı. Bu tür görevleri, kırmızı ve kırmızı bir üçgen ile gölgelendirilmiş Ana kanalda bulabilirsiniz.

Hem Web Vitals hem de Uzun Görevler kanalları, başka bir yerde kopyalanan bilgiler içeriyordu. Ayrıca, kullanıcılar tıklandığında daha ayrıntılı bilgi sağlayan tam özellikli alternatiflerine kıyasla etkileşimsizdi.

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

Web Verileri hakkında daha fazla bilgi edinin.

JavaScript Profiler'ın kullanımdan kaldırılması: Üçüncü aşama

Chrome 58'in başlarında, Geliştirici Araçları ekibi, JavaScript Profiler'ı kullanımdan kaldırmayı ve Node.js ile Deno geliştiricilerin, JavaScript CPU performansının profilini çıkarmak için Performans panelini kullanmalarını sağlamayı planladı.

Geliştirici Araçları sürüm 114, JavaScript Profil Aracı desteğinin dört aşaması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 > Denemeler'i tıklayıp üç nokta menüsünden açın.

CPU performansını ölçmek için Performans panelini kullanın.

Chromium sorunu: 1428026.

Çeşitli öne çıkan anlar

Bu sürümde yer alan bazı önemli düzeltmeler şunlardır:

• Renk Seçici artık kırpıldığında gamın dışında olan HWB değerlerini (1429271) algılar.
• Kaynaklar paneli:
  • Kaynak eşlemeleri için JSON söz dizimi vurgulama etkinleştirildi (1385374).
  • "Kaynak eşlemesi algılandı" gösterimi durduruldu kaynak eşlemelerini manuel olarak devre dışı bıraktığınızda (1423718) gönderilen mesajlar.
• Konsol, artık Ctrl + Ctrl tuşlarına basarak tamamlanmamış JavaScript ifadelerini değerlendirmenizi sağlıyor ve söz dizimi hataları (1314700) veriyor.
• Ayrılma noktası düzenleme iletişim kutusunda artık bir kapat düğmesi var. Daha önce, Enter tuşuna basmanız veya iletişim kutusuna odaklanmanız (1412980) gerekiyordu.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Dev veya Beta'yı kullanabilirsiniz. Bu önizleme kanalları en yeni Geliştirici Araçları özelliklerine erişmenizi, son teknoloji ürünü web platformu API'lerini test etmenizi ve kullanıcılarınızdan önce sitenizdeki sorunları bulmanızı sağlar.

Chrome Geliştirici Araçları ekibiyle iletişim kurma

Yayındaki yeni özellikleri ve değişiklikleri ya da Geliştirici Araçları ile ilgili diğer her şeyi tartışmak için aşağıdaki seçenekleri kullanın.

• Öneri veya geri bildirimlerinizi crbug.com adresinden bize iletebilirsiniz.
• Geliştirici Araçları sorunlarını bildirmek için Diğer seçenekler'i > Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin.
• @ChromeDevTools adresinden tweet atabilirsiniz.
• Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.

Geliştirici Araçları'ndaki yenilikler

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