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ı, varsayılan olarak Ayarlar'a dokunun. Ayarlar > Deneysel > Onay kutusu. WebAssembly Hata Ayıklama: DWARF desteğini etkinleştir seçeneğini etkinleştirir. Daha fazla bilgi için Modern araçlarla WebAssembly'de hata ayıklama başlıklı makaleyi inceleyin.

Bu deney, Wasm uygulamalarında yürütmeyi duraklatmanıza ve C ile C++ kodunda hata ayıklama bilgilerine erişerek hata ayıklamanıza olanak tanır:

  • DWARF hata ayıklama bilgileri kullanılarak eşlenen orijinal kaynak kodunuz.
  • Çağrı yığınındaki 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ıklama özelliğini test etmek için C/C++ DevTools Desteği (DWARF) uzantısını yükleyin ve Mandelbrot demosundaki kodda adım adım ilerleyin.

Chromium sorunu: 1414289.

Wasm uygulamalarında adımlama davranışı iyileştirildi

Sonrakini atla. Orijinal kodunuzda atlama özelliği artık kod ayrıştırma işleminde (.wasm dosyası) duraklamaya neden olmuyor. Daha önce burada duraklatılıyordu.

Ancak adım atma işlemi, başladığı işlevin dışına çıktığı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.

Tercihler ve ardından Kaynaklar bölümünde bulunan yeni ayar.

Chromium sorunu: 1418938.

Öğeler panelini ve Sorunlar sekmesini kullanarak otomatik doldurma hatalarını ayıklama

Chrome Otomatik Doldurma, adresleriniz veya ödeme bilgileriniz gibi kayıtlı bilgilerle formları otomatik olarak doldurur. Otomatik doldurma ile ilgili sorunları kolayca hata ayıklayabilmeniz için Öğeler panelinde artık bu sorunlar kırmızı kıvrık alt çizgilerle vurgulanabilir.

Bu özelliğe göz atmak için Ayarlar'a dokunun. Ayarlar > Deneysel çalışmalar > Onay kutusu. Nesneler paneli DOM ağacında ihlal eden bir düğümü veya özelliği vurgular seçeneğini 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 gelip Sorunu görüntüle'yi tıklayarak algılanan tüm sorunların listelenip hatanın nerede olduğuyla ilgili ipuçları verilen Sorunlar sekmesini açın.

Chromium sorunu: 1399414.

Kaydedici'de iddialar

Kaydedici paneli artık tüm çalışma zamanı verilerini kullanarak doğrudan kayıt sırasında doğrulama eklemenize olanak tanır.

Bir iddia eklemek için yeni bir kayıt başlatın, sayfanızla etkileşime geçin ve İddia ekle'yi tıklayın. Kaydedici, waitForElement türüne sahip ve anında özelleştirebileceğiniz bir adım ekler. Kahve arabası demosunda iddiaların işleyiş şeklini görmek için videoyu izleyin.

Bu videoda aşağıdakileri nasıl iddia edeceğiniz gösterilmektedir:

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

Ayrıca, JavaScript'teki koşullu ifadeler, düğümün alt öğelerinin sayısı (count), öğe görünürlüğü ve daha fazlası gibi konularda beyanlarda bulunmak için adımları yapılandırabilirsiniz. Daha fazla bilgi için Adımları yapılandırma bölümüne 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 komut dosyası biçimini hatırlıyor.

Chromium sorunu: 1423624.

Lighthouse 10.1.1

Lighthouse panelinde artık Lighthouse 10.1.1 sürümü kullanılıyor. Bu sürümde, 10.1.0 sürümünde kullanıma sunulan önemli bir değişiklik bulunuyor. URL'lerle ilgili tüm denetimler artık öğeye ve boyut veya süre gibi toplu sayısal istatistiklere göre gruplandırılıyor. Popüler üçüncü taraflar, sayfadaki amaçlarının daha kolay anlaşılması için kategorileriyle birlikte etiketlenir.

Denetlemelerin varlığa göre gruplandırılmış hali.

Geliştirici Araçları'ndaki Lighthouse panelini kullanmayla ilgili temel bilgileri öğrenmek için Lighthouse: Web sitesi hızını optimize etme başlıklı makaleyi inceleyin.

Chromium sorunu: 772558.

Performans iyileştirmeleri

performance.mark(), Performans > Zamanlamalar bölümünde fareyle üzerine geldiğinizde zamanlamayı gösterir.

performance.mark() yöntemi artık Performans > Zamanlamalar bölümündeki ilgili işaretin üzerine geldiğinizde zamanlamasını gösterir. Buradaki zamanlama, önceki gezinme etkinliğine göre bir zaman damgası olur.

Zamanlamalar bölümünde fareyle üzerine geldiğinizde gösterilen zamanlama pop-up'ı.

Chromium sorunu: 1426762.

profile() komutu, Performans > Ana sayfasını doldurur.

Konsol'daki profile() ve profileEnd() komutları artık Performans panelinin Ana iş akışında CPU profillemeyi başlatıyor ve durduruyor.

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

Chromium sorunu: 1429191.

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

200 milisaniyeden uzun kullanıcı etkileşimlerinde Performans > Özet sekmesinde Interaction to Next Paint (INP) uyarısı gösterilir.

INP uyarısı.

Ayrıca etkileşimin kimliği, ipucu alanından Özet bölümüne taşındı.

Chromium sorunları: 1432512, 1432509.

Web Verileri kanalı taşındı

Performans panelinde aşağıdaki parçalar kaldırıldı:

Hem Web Vitals hem de Uzun Görevler kanalları başka yerlerde kopyalanan bilgiler içeriyordu. Ayrıca, tıklandığında daha ayrıntılı bilgi sağlayan, daha kapsamlı özelliklere sahip alternatiflerine kıyasla etkileşimli değildi.

Web Vitals'ı Zamanlamalar kanalına taşımadan önce ve sonra.

Ayrıca, Denemeler kanalı, kullanım amacını daha iyi yansıtacak şekilde Düzen Geçişleri olarak yeniden adlandırıldı.

Web Vitals hakkında daha fazla bilgi edinin.

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

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

DevTools 114 sürümü, dört aşamalı JavaScript Profil Aracı desteğinin sonlandırılmasının üçüncü aşamasını başlatır. Bu aşamada JavaScript Profiler paneli DevTools'dan kaldırılır ancak Ayarlar'a dokunun. Ayarlar > Deneysel üzerinden geçici olarak etkinleştirebilir ve Üç noktalı menü. üç nokta menüsünden açabilirsiniz.

Ayarlardan Denemeler'e gidip JavaScript profil aracı onay kutusunu işaretleyin.

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

Chromium sorunu: 1428026.

Diğer öne çıkan özellikler

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

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni Geliştirilenler veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları, en son DevTools özelliklerine erişmenizi sağlar, en yeni web platformu API'lerini test etmenize olanak tanır ve sitenizdeki sorunları kullanıcılarınızdan önce 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 başka herhangi bir konu hakkında konuşmak için aşağıdaki seçenekleri kullanın.

Geliştirici Araçları'ndaki yenilikler

DevTools'daki yenilikler serisinde ele alınan tüm konuların listesi.