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

Sofia Emelianova

WebAssembly, örneğin web'de C/C++ kodunu neredeyse yerel hızda ve JavaScript ile birlikte çalıştırmanın bir yolunu 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ı ayarladıktan sonra:

• Kaynaklar > bölümünde orijinal kodunuzu inceleyin. Düzenleyici.
• Kod satırı ayırma noktaları ile yürütmeyi duraklatın ve derlenen .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ıklama özelliğini etkinleştirmek için:

1. Uygulamanızı DWARF hata ayıklama bilgileriyle 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'da > Sayfa > Yazma/dağıtılma bazında gruplandırma .
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 solundaki sütunda (ör. 38. satır) bir satır numarasını tıklayın.

   

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

Duraklatma sırasında aşağıdakileri deneyin:

• Kaynaklar'da > Düzenleyici, değerini ipucunda görmek için fareyle bir değişkenin üzerine gelin.

• Kaynaklar'da > Çağrı Grubu, işlev adlarını kaynaktaki şekliyle görüntüleyin.

• Kaynaklar'da > Kapsam'da yerel ve genel değişkenleri, türlerini ve değerlerini görüntüleyebilirsiniz.

• 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ğinizler de dahil olmak üzere karmaşık nesneler (->). İncelemek için sonuçları genişletin.

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

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 kademeli olarak düşürülür.

Bu durumda, kodunuzda console.time() ve performance.now() özelliklerini profil performansı için 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 bu kodu açarak Konsol'da mesajları inceleyebilirsiniz.

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 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 makinede derleme yaparsanız hata ayıklama dosyası yollarını manuel olarak eşlemeniz gerekebilir.

Örneğin, projeniz yerel olarak C:\src\project adresindeyse ancak /mnt/c/src/project yoluyla bir Docker container'ı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'ı tıklayın > Uzantı seçenekleri.
2. Eski ve yeni dosya yollarını belirtin.

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:

• Modern araçlarla WebAssembly hatalarını ayıklama
• WebAssembly'de Daha Hızlı Hata Ayıklama
• Bellek Denetleyicisi ile tanışın
• C/C++ hata ayıklaması için Bellek Denetleyicisi'ni genişletme