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:
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.
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:
- 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. - İsterseniz daha kolay gezinme için yazdığınız dosyaları gruplandırabilirsiniz. Kaynaklar bölümünde, > Sayfa > > Gruplama ölçütü: Yazar/Dağıtma seçeneğini işaretleyin.
- Dosya ağacından orijinal kaynak dosyanızı seçin. Bu durumda,
mandelbrot.cc
. 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.
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.
- İşlev adlarını Kaynaklar > Çağrı Yığını'nda kaynaktaki haliyle görün.
- Kaynaklar > Kapsam bölümünde yerel ve genel değişkenleri, bunların türlerini ve değerlerini görüntüleyin.
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.
- Kaynaklar > Kapsam bölümünde, Bellek Denetleyicisi'ni açmak ve nesne belleğinin ham baytlarını incelemek için simgesini tıklayın. Daha fazla bilgi için WebAssembly bellek denetimi bölümüne bakın.
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:
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.- Eski ve yeni dosya yollarını belirtin.
Daha fazla bilgi
WebAssembly hata ayıklaması hakkında daha fazla bilgi için Chrome DevTools mühendislik bloguna göz atın: