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 tek WebAssembly hata ayıklaması ham WebAssembly yığın izlemelerini analiz eder ve demonte WebAssembly metin biçimi.

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

Bu, herhangi bir WebAssembly modülünde çalışır ve küçük, yalıtılmış işlevlerde hata ayıklamaya bir şekilde yardımcı olur. Ancak, ayrılan kod ile kaynaklarınız arasındaki eşlemenin daha az belirgin olduğu büyük uygulamalar için pek pratik değildir.

Geçici bir çözüm

Emscripten ve Geliştirici Araçları, bu sorunun üstesinden gelmek için mevcut kaynak haritası biçimini geçici olarak WebAssembly'e uyarladı. Bu izin verilen eşlemeler kaynak dosyalardaki orijinal konumlarla derlenen modüldeki ikili ofsetler arasında

Kaynak eşleme destekli hata ayıklama işleminin ekran görüntüsü.

Ancak kaynak eşlemeleri; 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 eşlemeleri olan metin biçimleri için tasarlanmıştır. Bu, entegrasyonu karmaşık, sınırlı ve Emscripten dışında yaygın olarak desteklenmeyen bir hale getirdi.

DWARF yazın

Öte yandan, birçok yerel dilde zaten yaygın bir hata ayıklama biçimi vardır. DWARF, 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ğlar.

Tam uyumluluk için hâlâ WebAssembly'ye özgü bazı özellikler eklenmesi gereken özellikler bulunuyor. Bununla birlikte, Clang ve Rust gibi derleyiciler WebAssembly modüllerinde DWARF bilgilerinin paylaşılmasını zaten desteklemektedir. Bu sayede DevTools ekibi, bu bilgileri kullanmaya başlayabilir. Geliştirici Araçları'nda bulabilirsiniz.

DevTools, ilk adım olarak bu bilgileri kullanarak yerel kaynak eşlemeyi desteklemeye başladı. Böylece, bu derleyicilerden herhangi biri tarafından üretilen Wasm modüllerinde hata ayıklama işlemine, kaynak kodu ayrıştırılmış biçime başvurmadan veya özel komut dosyaları kullanmak zorunda kalmadan başlayabilirsiniz.

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

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

  emcc -g …sources… -o out.js

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

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

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

  cargo build --target wasm32-unknown-unknown

DWARF ile bu yeni DevTools entegrasyonu, kaynak dillerinizde kod üzerinde atlama, kesme noktası ayarlama ve yığın izlemelerini çözme desteğini zaten kapsamaktadır.

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

Gelecek

Ancak yapılması gereken çok iş var. Örneğin, araç tarafından Emscripten (Binaryen) ve wasm-pack (Wasm-bindgen) henüz gerçekleştirdikleri dönüşümlerle ilgili DWARF bilgilerinin güncellenmesini desteklemez. Şimdilik bu entegrasyondan yararlanamazlar.

Chrome Geliştirici Araçları tarafında ise sorunsuz bir hata ayıklama deneyimi sağlamak için zaman içinde entegrasyonu daha da geliştireceğiz. Bu değişiklikler arasında şunlar bulunuyor:

  • Değişken adlarını çözümleme
  • Şık yazdırma türleri
  • Kaynak dillerdeki ifadeleri değerlendirme
  • …ve 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, Geliştirici veya Beta sürümünü kullanabilirsiniz. Bu önizleme kanalları sayesinde en son Geliştirici Araçları özelliklerine erişebilir, en yeni web platformu API'lerini test edebilir ve sitenizdeki sorunları kullanıcılarınızdan önce bulabilirsiniz.

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.