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

Sofia Emelianova
Sofia Emelianova
GitHub

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

Geliştirici Araçları'nı ayarladıktan sonra:

  • Kaynaklar > Düzenleyici bölümünde orijinal kodunuzu inceleyin.
  • Kod satırı durak noktaları ile yürütmeyi duraklatın ve derlenmiş .wasm ikili dosyası yerine orijinal C/C++ kaynak kodunuzda adım adım ilerleyin.

Duraklatılmış durumdayken şunları yapabilirsiniz:

  • Orijinal kaynak dosyadaki değişkenlerin üzerine gelin ve değerlerini inceleyin.
  • Çağrı Yığını'ndaki işlev adlarını ve Kapsam'daki değişkenleri anlayın.
  • Derinlemesine iç içe yerleştirilmiş özelliklerin ve karmaşık nesnelerin çıkışını Konsol'a gönderebilirsiniz.
  • Bellek Denetleyici ile nesne belleğini inceleyin.

Kur

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

  1. Uygulamanızı DWARF hata ayıklama bilgileri dahil olacak şekilde derleyin. En son Emscripten derleyicisini çalıştırın ve -g işaretini iletin. Örneğin:

    emcc -g source.cc -o app.html

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

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

Hata Ayıklama

Geliştirici Araçları'nı kurduktan sonra kodunuzda hata ayıklayın:

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

  4. Kod satırında durma noktası ayarlamak için Düzenleyici'nin solundaki sütunda bir satır numarasını tıklayın (ör. 38. satır).

    38. satırda bir kod satırı ayrılma noktası ayarlandı.

  5. Kodu tekrar çalıştırın. Yürütme, ayrılma noktası içeren satırdan önce duraklatılır.

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

  • Kaynaklar > Düzenleyici bölümünde, fareyle bir değişkenin üzerine gelerek değerini bir ipucu olarak görebilirsiniz.

Bir ipucu içindeki değişkenin değeri.

  • Kaynaklar > Çağrı Yığını bölümünde, işlev adlarını kaynaktaki şekliyle görüntüleyin.

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

  • Kaynaklar > Kapsam bölümünde yerel ve genel değişkenleri, 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 gezinmesi zor olan çıkış değişkenleri ve nesneleri:

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

Konsolda, iç içe yerleştirilmiş bir değişken ve karmaşık bir nesne genişletildi.

  • Kaynaklar > Kapsam bölümünde Bellek. simgesini tıklayarak Bellek Denetleyici'yi açın ve nesne belleğinin ham baytlarını inceleyin. Daha fazla bilgi için WebAssembly bellek incelemesi bölümüne bakın.

Bir değişkenin belleğini inceleme.

Profil performansı

Geliştirici Araçları ayarlanıp açıldığında Chrome'un çalıştırdığı kod optimize edilmez. Size daha iyi bir hata ayıklama deneyimi sunmak için katmanlı bir yapıya sahiptir.

Bu durumda, performansı profillemek için kodunuzdaki 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 ve ardından Konsol'daki mesajları incelemek için Geliştirici Araçları'nı 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'de Daha Hızlı Hata Ayıklama başlıklı makaleyi inceleyin.

Bu dosyayı yerel olarak saklayabilir veya ayrı bir sunucuda barındırabilirsiniz. Emscripten ile bunu 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 makineden farklı bir işletim sistemine (kapsayıcı, sanal makine veya uzak sunucu) sahip bir makinede 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 yoluna sahip bir Docker kapsayıcısında oluşturulduysa aşağıdakileri yapın:

  1. chrome://extensions/ sayfasına 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 Geliştirici Araçları mühendislik bloguna göz atın: