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

Sofia Emelianova
Sofia Emelianova

WebAssembly hata ayıklama desteği

Geliştirici Araçları, Ayarlar'a dokunun. Ayarlar > Deneysel Özellikler > Onay kutusu. 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 bilgiler kullanılabilir:

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

Hata ayıklayıcıda duraklatılmış bir Wasm uygulaması.

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ışı

Sonrakini atla'yı tıklayın. 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 adımlama, başladığı işlevin dışında bir yere ulaştığında (ör. işlevden döndükten sonra) sona erer.

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

Yeni ayar, Tercihler ve Kaynaklar bölümünde bulunur.

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'a dokunun. Ayarlar > Denemeler > Onay kutusu. Nesneler paneli DOM ağacında ihlalde bulunan bir düğümü veya özelliği vurgular'ı etkinleştirin ve bu demo sayfasını inceleyin.

Öğeler panelinde vurgulanan ve Sorunlar paneli tarafından bildirilen otomatik doldurma sorunları.

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, anında özelleştirebileceğiniz waitForElement türünde bir adım 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 sayfadaki amaçlarını daha kolay belirleyebilmeniz için kategorileriyle etiketlenir.

Denetimler varlığa göre gruplandırılır.

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 bölümünde 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.

Zamanlamalar bölümünde, fareyle üzerine gelindiğinde zamanlamayı gösteren pop-up.

Chromium sorunu: 1426762.

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

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

console() komutu, Performans panelinde bir profil oluşturur.

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.

INP uyarısı

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,