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ı, Ayarlar > Denemeler > WebAssembly Hata Ayıklaması: DWARF desteğini etkinleştir'i varsayılan olarak 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ütme işlemini duraklatmanızı ve C ve C++ kodlarındaki hataları ayıklamanızı sağlar. Buradaki tüm hata ayıklama bilgilerini aşağıda bulabilirsiniz:

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

Debugger'da bir Wasm uygulaması duraklatıldı.

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

Chromium sorunu: 1414289.

Wasm uygulamalarında iyileştirilmiş adım davranışı

Artık sökme işlemi sırasında duraklatılmaması için orijinal kodunuzda bu adımı geçirin (.wasm dosyası). Daha önce orada duraklatılıyordu.

Ancak adımlama, örneğin işlevden döndükten sonra, başladığı işlevin dışına çıktığında sona erer.

Bu davranış Ayarlar > Tercihler > Kaynaklar seçeneğinde varsayılan olarak etkindir.

Yeni ayarı Tercihler'de, ardından Kaynaklar'da bulabilirsiniz.

Chromium sorunu: 1418938.

Nesne panelini ve Sorunlar sekmesini kullanarak Otomatik Doldurmada hata ayıklama

Chrome Otomatik Doldurma özelliği, formları adresleriniz veya ödeme bilgileriniz gibi kayıtlı bilgilerle otomatik olarak doldurur. Otomatik Doldurma ile ilgili sorunlarda kolayca hata ayıklamanıza olanak tanımak için Öğeler paneli artık bunları kırmızı kıvrı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'ı etkinleştirin ve bu demo sayfasını inceleyin.

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

Fareyle DOM ağacında vurgulanan bir sorunun üzerine gelin ve algılanan tüm sorunların listelendiği ve hatalarla ilgili ipuçları sağlayan Sorunlar sekmesini açmak için Sorunu görüntüle'yi tıklayın.

Chromium sorunu: 1399414.

Kaydedicideki Onaylama İşlemleri

Kaydedici paneli artık tüm çalışma zamanı verileriyle kayıt sırasında onay ekleyebilirsiniz.

Onay eklemek için yeni bir kayıt başlatın, sayfanızla etkileşimde bulunun ve Onay ekle'yi tıklayın. Kaydedici, waitForElement türünde o anda özelleştirebileceğiniz bir adım ekler. Kahve arabası demosundaki iddiaları uygulamalı olarak görmek için videoyu izleyin.

Aşağıdaki videoda nasıl hak iddia edeceğiniz gösterilmektedir:

HTML özellikleri (ör. bir öğenin class özelliği).
JSON'deki JavaScript özellikleri, örneğin, .innerText.

JavaScript'teki koşullu ifadeler, düğümün alt öğesi sayısı (count), öğe görünürlüğü vb. doğrulama adımlarını 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ıklanan adım menüsünde tercih ettiğiniz komut dosyası biçimini hatırlar.

Chromium sorunu: 1423624.

Lighthouse 10.1.1

Lighthouse paneli artık Lighthouse 10.1.1'i çalıştırmaktadır ve 10.1.0'da önemli bir değişiklik kullanıma sunulmuştur. URL'lerle ilgili tüm denetimler artık varlığa göre gruplandırılıyor ve boyut veya süre gibi sayısal istatistikleri topluyor. Popüler üçüncü taraflar da kategorileriyle etiketlenir. Böylece, sayfadaki amaçlarını belirlemek daha kolay olur.

Denetimler varlığa göre gruplanmış.

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 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 bunların zamanlamasını gösteriyor. Buradaki zamanlama, önceki gezinme etkinliğine göre bir zaman damgasıdır.

Zamanlamalar bölümünde fareyle üzerine gelindiğinde zamanlamanın gösterildiği pop-up.

Chromium sorunu: 1426762.

`profile()` komutu Performans > Ana makineyi doldurur

Console'daki profile() ve profileEnd() komutları artık Performans panelinin Ana iş parçacığı'nda CPU profili oluşturma işlemini başlatır ve durdurur.

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

Chromium sorunu: 1429191.

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

200 milisaniyeden uzun olan kullanıcı etkileşimleri için Performans > Özet sekmesinde Sonraki Boyamayla Etkileşim (INP) uyarısı gösterilir.

INP uyarısı.

Ayrıca, etkileşimin kimliği ipucundan Özet'e taşındı.

Chromium sorunları: 1432512, 1432509.

Web Verileri kanalı taşındı

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

Web Vitals kanalı. Bunun yerine, fareyle üzerine geldiğinizde Zamanlamalar kanalındaki alakalı zamanlamaları görün.
Uzun Görevler alt parçası. Bu tür görevleri Ana kanalda, kırmızı renkte ve kırmızı bir üçgenle zaten bulabilirsiniz.

Hem Web Verileri hem de Uzun Görevler kanalları, başka yerlerde yinelenen bilgiler içeriyordu. Ayrıca, tıklandıklarında daha ayrıntılı bilgi sağlayan tam özellikli alternatiflerine kıyasla etkileşim halinde değillerdi.

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

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

Web Verileri hakkında daha fazla bilgi edinin.

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

Chrome 58'den itibaren, Geliştirici Araçları ekibi JavaScript Profil Aracı'nı kullanımdan kaldırmayı ve JavaScript CPU performansının profilini çıkarmak için Node.js ve Deno geliştiricilerinin Performans panelini kullanmasını sağlamayı planlıyordu.

Geliştirici Araçları sürüm 114, dört aşamalı JavaScript Profil Aracı'nın kullanımdan kaldırılmasının üçüncü aşamasını başlatır. Bu aşamada, JavaScript Profil Aracı paneli Geliştirici Araçları'ndan kaldırılır ancak Ayarlar > Denemeler aracılığıyla geçici olarak etkinleştirebilir ve üç nokta menüsünden açabilirsiniz.

Ayarlar'da ve Denemeler'de JavaScript profil oluşturucu onay kutusunu tıklayın.

CPU performansını tanımlamak için Performans panelini kullanın.

Chromium sorunu: 1428026.

Öne çıkan çeşitli unsurlar

Bu sürümde yapılan bazı dikkate değer düzeltmeler şunlardır:

Renk Seçici artık kırpıldığında gam dışında olan HWB değerlerini (1429271) algılıyor.
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 "Kaynak eşlemesi algılandı" mesajlarının gösterilmesi durduruldu (1423718).
Konsol, artık tamamlanmamış JavaScript ifadelerini Ctrl + Enter ile değerlendirmenize olanak tanı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 kutusunun odaklanmasını kaldırmanız (1412980) gerekiyordu.

Önizleme kanallarını indirme

Varsayılan geliştirme tarayıcınız olarak Chrome Canary, Yeni geliştirilenler veya Beta'yı kullanmayı düşünün. Bu önizleme kanallarıyla Geliştirici Araçları'nın en yeni özelliklerine erişebilir, son teknoloji ürünü web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce tespit edebilirsiniz!

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

Yayındaki yeni özellikler ve değişiklikler ya da Geliştirici Araçları ile ilgili diğer konular hakkında konuşmak için aşağıdaki seçenekleri kullanın.

crbug.com adresinden öneri veya geri bildirim gönderin.
Geliştirici Araçları'nda, Diğer seçenekler > Yardım > Geliştirici Araçları sorunu bildir'i kullanarak Geliştirici Araçları sorunlarını bildirin.
@ChromeDevTools adresine tweet gönderin.
Geliştirici Araçları'ndaki YouTube videoları veya Geliştirici Araçları İpuçları YouTube videolarındaki yenilikler hakkındaki görüşlerinizi bizimle paylaşın.