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.
Bu, tüm WebAssembly modüllerinde ç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 sorunu çözmek için mevcut source maps biçimini kullanarak WebAssembly ile eşleşir. Bu izin verilen eşlemeler kaynak dosyalardaki orijinal konumlarla derlenen modüldeki ikili ofsetler arasında
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 da entegrasyonu karmaşık hale getiriyor, sınırlı ve Emscripten dışında yaygın bir şekilde desteklenmiyordu.
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.
Geliştirici Araçları, ilk adım olarak artık bu bilgileri kullanarak yerel kaynak eşlemeyi desteklemektedir. Böylece, bu derleyicilerden herhangi biri tarafından üretilen Wasm modüllerinde, sökülmüş biçime başvurmadan veya özel komut dosyaları kullanmak zorunda kalmadan hata ayıklamaya başlayabilirsiniz.
Bunun yerine, derleyicinize hata ayıklama bilgilerini diğer platformlarda olduğu gibi eklemesini söylemeniz yeterlidir. Örneğin, Clang ve Emscripten'de bu, derleme sırasında bir -g işareti iletilerek 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 yapılan bu yeni Geliştirici Araçları entegrasyonu, kaynak dillerinizde kodu adımlama, ayrılma noktalarını ayarlama ve yığın izlemeleri çözümleme desteğini zaten kapsar.
Gelecek
Yine de yapılacak ç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ı çözme
- Şık yazdırma 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, 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ı sorunlarını bildirmek için Diğer seçenekler'i
> Yardım > Geliştirici Araçları'nda Geliştirici Araçları ile ilgili sorunları bildirin. - @ChromeDevTools adresinden tweet atabilirsiniz.
- Geliştirici Araçları YouTube videoları veya Geliştirici Araçları ipuçları YouTube videolarına yorum yazın.