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

Sofia Emelianova
Sofia Emelianova
GitHub
Jecelyn Yeen

WebAssembly hata ayıklama desteği

Geliştirici Araçları, Ayarlar'a dokunun. Ayarlar > Denemeler > 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 deney, 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ı.

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, işlevin dışına çıktığında (ör. işlevden döndükten sonra) adımlama sona erer.

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

Yeni ayar Tercihler, ardından 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, 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ün 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 Adımları yapılandırma başlıklı makaleye bakın.

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.

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

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 Ana 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, 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 yinelenen 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.

Web Vitals'ı Timings parçasına taşıma öncesi ve sonrası

Ayrıca, Deneyimler parçası, kullanımını daha doğru yansıtmak için Düzen Değişiklikleri 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'a dokunun. Ayarlar > Deneysel Özellikler'den geçici olarak etkinleştirebilir ve Üç nokta menüsü. üç nokta menüsünden açabilirsiniz.

Ayarlar'daki Denemeler bölümünde JavaScript Profil Aracı onay kutusu.

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:

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

Geliştirici Araçları'ndaki yenilikler

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