C/C++ WebAssembly hatalarını ayıklama

Sofia Emelianova
Sofia Emelianova
GitHub

WebAssembly, örneğin web'de C/C++ kodunu neredeyse yerel hızda ve JavaScript ile birlikte çalıştırmak için bir yol sunar. Bu dokümanda, bu tür uygulamalarda daha iyi hata ayıklamak için Chrome Geliştirici Araçları'nın nasıl kurulacağı ve kullanılacağı gösterilmektedir.

Geliştirici Araçları'nı kurduktan sonra:

  • Kaynaklar > Düzenleyici'ye giderek orijinal kodunuzu inceleyin.
  • Kod satırı ayırma noktaları ile yürütmeyi duraklatın ve derlenen .wasm ikili dosyasını değil, orijinal C/C++ kaynak kodunuzda ilerleyin.

Duraklatılmış durumdayken de şunları yapabilirsiniz:

  • Orijinal kaynak dosyada değişkenlerin üzerine gelin ve değerlerini görün.
  • Çağrı Grubu'ndaki işlev adlarını ve Kapsam'daki değişkenleri anlayın.
  • Derinlemesine iç içe yerleştirilmiş mülklerin ve karmaşık nesnelerin çıktısını Konsol'da çıkarın.
  • Bellek Denetleyicisi ile nesne belleğini inceleyin.

Ayarla

Geliştirici Araçları'nda C/C++ WebAssembly hata ayıklamasını etkinleştirmek için:

  1. Sunulan DWARF hata ayıklama bilgileriyle uygulamanızı derleyin. En son Emscripten derleyicisini çalıştırın ve -g işaretini geçirin. Örneğin:

    emcc -g source.cc -o app.html

    Daha fazla bilgi için Hata ayıklama bilgileriyle projeler oluşturma bölümüne bakın.

  2. C/C++ Geliştirici Araçları Desteği (DWARF) Chrome uzantısını yükleyin.

Hata Ayıklama

Geliştirici Araçları kurulduktan sonra kodunuzdaki hataları ayıklayın:

  1. Web sitenizi incelemek için Geliştirici Araçları'nı açın. Bu eğiticiyi, gerekli -g işaretiyle derlenen bu demo sayfasında deneyebilirsiniz.
  2. İsterseniz daha kolay gezinme için yazdığınız dosyaları gruplandırabilirsiniz. Kaynaklar bölümünde, Üç nokta menü. > Sayfa > Onay kutusu. > Gruplama ölçütü: Yazar/Dağıtma Deneysel. seçeneğini işaretleyin.
  3. Dosya ağacından orijinal kaynak dosyanızı seçin. Bu durumda, mandelbrot.cc.

  4. Bir kod satırı ayrılma noktası ayarlamak için Düzenleyici'nin sol tarafındaki sütunda (ör. 38. satırda) bir satır numarasını tıklayın.

    38. satırda ayarlanmış kod satırı ayrılma noktası.

  5. Kodu tekrar çalıştırın. Yürütme işlemi, ayrılma noktasının bulunduğu satırdan önce duraklar.

Duraklatılmış durumdayken aşağıdakileri deneyin:

  • Kaynaklar > Düzenleyici bölümünde, ipucunda yer alan bir değişkenin değerini görmek için fareyle değişkenin üzerine gelin.

İpucundaki bir değişkenin değeri.

  • İşlev adlarını Kaynaklar > Çağrı Yığını'nda kaynaktaki haliyle görün.

Çağrı Yığınındaki ana işlev.

  • Kaynaklar > Kapsam bölümünde yerel ve genel değişkenleri, bunların türlerini ve değerlerini görüntüleyin.

Yerel değişkenleri ve değerlerini içeren Kapsam bölmesi.

  • Konsol'da, Kapsam'da gidilmesi zor olan çıkış değişkenleri ve nesneleri:

    • Derinlemesine iç içe yerleştirilmiş değişkenler (ör. büyük dizilerde dizine eklenmiş öğeler).
    • İşaretçilerle erişebileceğinizler de dahil olmak üzere karmaşık nesneler (->). İncelemek için bu nesneleri genişletin.

Konsol'da genişletilen iç içe yerleştirilmiş bir değişken ve karmaşık bir nesne.

  • Kaynaklar > Kapsam bölümünde, Bellek Denetleyicisi'ni açmak ve nesne belleğinin ham baytlarını incelemek için Bellek. simgesini tıklayın. Daha fazla bilgi için WebAssembly bellek denetimi bölümüne bakın.

Bir değişkenin belleğini inceleme.

Profil performansı

Geliştirici Araçları ayarlanıp açıkken Chrome'un çalıştırdığı kod optimize edilmez. Size daha iyi bir hata ayıklama deneyimi sunmak için katmanlara ayrılmıştır.

Bu durumda, performansın profilini belirlemek için kodunuzda console.time() ve performance.now() değerlerini kullanamazsınız. Bunun yerine, profil oluşturmak için Performans panelini kullanın.

Alternatif olarak, profil oluşturma kodunuzu Geliştirici Araçları'nı açmadan çalıştırabilir, ardından mesajları Konsol'da incelemek için açabilirsiniz.

Hata ayıklama bilgilerini ayırma

Yükleme işlemini hızlandırmak ancak daha iyi bir hata ayıklama deneyimi yaşamak için hata ayıklama bilgilerini ayrı bir .wasm dosyasına bölebilirsiniz. Daha fazla bilgi için WebAssembly Daha Hızlı Hata Ayıklama bölümüne bakın.

Bu dosyayı yerel olarak saklayabilir veya ayrı bir sunucuda barındırabilirsiniz. Bunu Emscripten ile yapmak için -gseparate-dwarf=<filename> işaretini iletin ve dosyanın yolunu belirtin:

emcc -g source.cc -o app.html \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]

Farklı makinelerde derleme ve hata ayıklama

Chrome'u çalıştırdığınız makinedekinden farklı bir işletim sistemine (kapsayıcı, sanal makine veya uzak sunucu) sahip bir makine üzerinde derleme yapıyorsanız hata ayıklama dosyası yollarını manuel olarak eşlemeniz gerekebilir.

Örneğin, projeniz yerel olarak C:\src\project konumundaysa ancak /mnt/c/src/project yoluyla bir Docker container'ında derlenmişse aşağıdakileri yapın:

  1. chrome://extensions/ adresine gidin, C/C++ Geliştirici Araçları Desteği (DWARF) uzantısını bulun ve Ayrıntılar > Uzantı seçenekleri'ni tıklayın.
  2. Eski ve yeni dosya yollarını belirtin.

Belirtilen eski ve yeni dosya yolları.

Daha fazla bilgi

WebAssembly hata ayıklaması hakkında daha fazla bilgi için Chrome DevTools mühendislik bloguna göz atın: