Chrome Geliştirici Araçları'nda iyileştirilmiş WebAssembly hata ayıklaması

Ingvar Stepanyan
Ingvar Stepanyan

Arka plan

Yakın zamana kadar, Chrome Geliştirici Araçları'nın desteklediği WebAssembly hata ayıklama yöntemi, ham WebAssembly yığın izlerini görüntülemek ve parçalarına bölünmüş WebAssembly metin biçiminde tek tek talimatların üzerinden geçmekti.

Chrome Geliştirici Araçları'ndaki daha önce sınırlı olan WebAssembly hata ayıklama desteğinin ekran görüntüsü.

Bu yöntem, tüm WebAssembly modülleriyle uyumlu olup küçük, izole işlevlerde hata ayıklamaya yardımcı olsa da, parçalara ayrılmış kod ile kaynaklarınız arasındaki eşlemenin daha az belirgin olduğu büyük uygulamalarda pek pratik bir yöntem değildir.

Geçici bir çözüm

Emscripten ve DevTools, bu sorunu çözmek için mevcut kaynak haritaları biçimini WebAssembly'ye geçici olarak uyarladı. Bu, derlenen modüldeki ikili ofsetler ile kaynak dosyalardaki orijinal konumlar arasında eşlemelere olanak tanıyordu.

Kaynak haritaları destekli hata ayıklamanın ekran görüntüsü.

Ancak kaynak haritaları, rastgele kaynak dilleri, tür sistemleri ve doğrusal belleğe sahip WebAssembly gibi ikili biçimler için değil, JavaScript kavramları ve değerleri ile açıkça eşleşen metin biçimleri için tasarlanmıştır. Bu durum, entegrasyonun bilgisayar korsanlığıyla sınırlanmasına ve Emscripten dışında geniş çapta desteklenmemesine neden oluyordu.

DWARF girin

Öte yandan, birçok yerel dilde halihazırda hata ayıklayıcıların konumları, değişken adlarını, tür düzenlerini ve daha fazlasını çözmesi için gerekli tüm bilgileri sağlayan, yaygın bir hata ayıklama biçimi olan DWARF bulunur.

Tam uyumluluk için eklenmesi gereken WebAssembly'ye özgü bazı özellikler olsa da Clang ve Rust gibi derleyiciler halihazırda WebAssembly modüllerinde DWARF bilgilerini yayınlamayı desteklemektedir. Bu sayede DevTools ekibi, bu bilgileri doğrudan Geliştirici Araçları'nda kullanmaya başlayabilir.

İlk adım olarak, DevTools artık bu bilgileri kullanarak yerel kaynak eşlemeyi desteklemektedir. Böylece, bu derleyicilerden herhangi biri tarafından üretilen Wasm modüllerini, ayrıştırılmış biçime başvurmadan veya özel komut dosyaları kullanmak zorunda kalmadan hata ayıklamaya başlayabilirsiniz.

Bunun yerine, derleyicinize normalde diğer platformlarda yaptığınız gibi hata ayıklama bilgilerini dahil etmesini söylemeniz gerekir. Örneğin, Clang ve Emscripten'de bu, derleme sırasında bir -g işareti geçirilerek yapılabilir:

  clang -g …sources… -target wasm32 -o out.wasm

  emcc -g …sources… -o out.js

Aynı -g işaretini Rust'ta kullanabilirsiniz:

  rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm

Kargo kullanıyorsanız hata ayıklama bilgileri varsayılan olarak eklenir:

  cargo build --target wasm32-unknown-unknown

DWARF ile yapılan bu yeni Geliştirici Araçları entegrasyonu, kaynak dillerinizde kod üzerinde ilerleme, ayrılma noktaları ayarlama ve yığın izlemelerini çözümleme desteğini zaten kapsar.

DWARF destekli yeni hata ayıklamanın ekran görüntüsü.

Gelecek

Yine de yapılması gereken çok iş var. Örneğin, araç açısından bakıldığında Emscripten (Binaryen) ve wasm-pack (wasm-bindgen), gerçekleştirdikleri dönüşümlerle ilgili DWARF bilgilerinin güncellenmesini desteklememektedir. Şu an için bu entegrasyondan yararlanamazlar.

Chrome Geliştirici Araçları tarafında, sorunsuz bir hata ayıklama deneyimi sağlamak için zaman içinde entegrasyonu daha da geliştireceğiz. Bu iyileştirmelerden bazıları:

  • Değişken adlarını çözümleme
  • Okunaklı baskı türleri
  • Kaynak dillerdeki ifadeleri değerlendirme
  • ...ve çok daha fazlası!

Gelecekteki güncellemeler için bizi takip etmeye devam edin!

Ö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   Diğer > 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.