Bu sayfa, Cloud Translation API ile çevrilmiştir.

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

Sofia Emelianova

Jecelyn Yeen

WebAssembly hata ayıklama desteği

Geliştirici Araçları, varsayılan olarak Ayarlar > Denemeler > WebAssembly Hata Ayıklama: DWARF desteğini etkinleştir seçeneğini etkinleştirir. 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ı.

Hata Ayıklayıcı'da bir Wasm uygulaması duraklatıldı.

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'da varsayılan olarak etkindir.

Bu yeni ayar, Tercihler ve ardından Kaynaklar'da bulunur.

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ği incelemek için Ayarlar > Denemeler > Öğeler paneli DOM ağacında ihlalde bulunan bir düğümü veya özelliği vurgular seçeneğini etkinleştirin ve bu demo sayfasını inceleyin.

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

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 anlaşılabilir.

Varlığa göre gruplanmış denetimler.

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()`, fareyle üzerine gelindiğinde zamanlamayı Performans > Zamanlamalar bölümünde gösterir

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

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

Chromium sorunu: 1426762.

Performans > Ana sütununu `profile()` komutu doldurur

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

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

Chromium sorunu: 1429191.

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

200 milisaniyeden uzun süren kullanıcı etkileşimleri, Performans > Özet sekmesinde Sonraki Boyamayla Etkileşim (INP) uyarısı alır.

INP uyarısı.

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.

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

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 bölümünden bu paneli geçici olarak etkinleştirebilir ve üç nokta menüsünden açabilirsiniz.

JavaScript profil aracı onay kutusunu işaretleyin.

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 gamını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şlemelerini manuel olarak devre dışı bıraktığınızda (1423718) "Kaynak eşleme algılandı" mesajlarının gösterilmesi durduruldu.
Konsol, artık Ctrl + Enter 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ı'ndaki Diğer seçenekler > Yardım > Geliştirici Araçları ile ilgili sorun bildir bölümüne giderek Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresinden tweet atabilirsiniz.
Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.