WebAssembly-modules debuggen
Gebruik browserontwikkeltools en andere debugtechnieken om uw WASM-applicaties te inspecteren en problemen op te lossen.
WebAssembly-modules debuggen is een gratis WebAssembly (WASM) voor performante toepassingen-les op CoddyKit. Dit is les 3 van 4. Je kunt de volledige les hieronder gratis lezen en daarna in de browser praktisch oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is. Deze les maakt deel uit van het leertraject WebAssembly (WASM) voor performante toepassingen. Je voortgang wordt gesynchroniseerd op het web en in de CoddyKit-app. De cursus WebAssembly (WASM) voor performante toepassingen bevat in totaal 4 lessen.
Foutopsporing in WASM: een overzicht
Heb je je ooit afgevraagd hoe je tijdens de uitvoering in je WebAssembly-code kunt kijken? Met foutopsporing in WASM vind en verhelp je problemen in je krachtige modules.
Dit verschilt enigszins van foutopsporing in pure JavaScript, maar moderne ontwikkelaarstools van browsers bieden krachtige mogelijkheden om je hierbij te helpen.
Ontwikkelaarstools van de browser: tabblad Sources
De ontwikkelaarstools van je browser zijn je beste hulpmiddel voor foutopsporing in WASM. Open in Chrome DevTools met F12 of Cmd+Option+I.
- Ga naar het tabblad Sources.
- Zoek je WASM-module in de bestandsstructuur, vaak onder
wasm://of iets vergelijkbaars. - Zonder bronkaarten zie je de onbewerkte tekstindeling van WebAssembly – die is erg moeilijk te lezen!
Bronkaarten: van WASM naar broncode
Foutopsporing in onbewerkte WebAssembly-tekst is bijzonder lastig! Bronkaarten zijn speciale bestanden die de gecompileerde WASM-code koppelen aan je oorspronkelijke C-, C++- of Rust-broncode.
Wanneer ze aanwezig zijn, kan je browser je oorspronkelijke bronbestanden weergeven, zodat je ze rechtstreeks kunt debuggen, net als JavaScript.
Bronkaarten voor Rust en wasm-pack
Bij het compileren van Rust naar WASM kunnen tools zoals wasm-pack automatisch bronkaarten genereren. Het belangrijkste is dat je in de debugmodus compileert.
Een eenvoudige Rust-functie die één bij een getal optelt:
// src/lib.rs
#[no_mangle]
pub extern "C" fn add_one(num: i32) -> i32 {
// This function adds 1 to the input number.
// It will be exported from the WASM module.
num + 1
}WASM en bronkaarten laden
Laten we bekijken hoe een browser een WASM-module laadt. Wanneer de module met bronkaarten is gecompileerd (bijvoorbeeld met wasm-pack build --target web --dev), gebruikt de browser deze om je oorspronkelijke Rust/C/C++-bestanden in het tabblad Sources weer te geven.
Zo laadt JavaScript een kleine, conceptuele WASM-module:
async function loadAndRunWasm() {
// This is a conceptual WASM binary for 'add(a, b) => a + b'
const wasmCode = new Uint8Array([
0x00, 0x61, 0x73, 0x6d, 0x01, 0x00, 0x00, 0x00, 0x01, 0x07, 0x01, 0x60,
0x02, 0x7f, 0x7f, 0x01, 0x7f, 0x03, 0x02, 0x01, 0x00, 0x07, 0x07, 0x01,
0x03, 0x61, 0x64, 0x64, 0x00, 0x00, 0x0a, 0x09, 0x01, 0x07, 0x00, 0x20,
0x00, 0x20, 0x01, 0x6a, 0x0b
]);
const wasmModule = await WebAssembly.instantiate(wasmCode, {});
const add = wasmModule.instance.exports.add;
console.log("WASM add(5, 7):", add(5, 7)); // Expected: 12
}
loadAndRunWasm();De uitvoering pauzeren met onderbrekingspunten
Net als in JavaScript kun je rechtstreeks onderbrekingspunten instellen in de oorspronkelijke C/C++/Rust-bronbestanden die in het tabblad Sources van de ontwikkelaarstools van je browser worden weergegeven.
- Klik op het regelnummer in de marge waar je de uitvoering wilt pauzeren.
- Wanneer je WASM-code die regel uitvoert, pauzeert de browser, zodat je variabelen en de aanroepstack kunt bekijken.
Variabelen, geheugen en stack inspecteren
Wanneer de uitvoering bij een onderbrekingspunt wordt gepauzeerd, krijg je krachtige inzichten:
- Deelvenster Scope: Bekijk lokale variabelen en functieargumenten, vaak met hun oorspronkelijke namen als de bronkaarten goed zijn.
- Memory Inspector: Gebruik het speciale tabblad 'Memory' of klik met de rechtermuisknop op een geheugenadres om de lineaire geheugenbuffer van WASM te inspecteren.
- Deelvenster Call Stack: Bekijk de reeks functieaanroepen die tot het huidige punt heeft geleid, inclusief JavaScript- en WASM-frames.
Uitvoering stap voor stap
Gebruik de debuggerbesturing om, nadat je bij een onderbrekingspunt hebt gepauzeerd, regel voor regel door je code te navigeren:
- Step Over (F10): Voer de huidige regel uit en ga naar de volgende.
- Step Into (F11): Ga een functieaanroep op de huidige regel binnen.
- Step Out (Shift+F11): Voltooi de uitvoering van de huidige functie en ga terug naar de plaats waar deze werd aangeroepen.
- Resume (F8): Hervat de uitvoering tot het volgende onderbrekingspunt of het einde van het programma.
Interactie tussen JS en WASM debuggen
Vaak ontstaan fouten op de grens waar JavaScript WASM-functies aanroept of andersom. Stel onderbrekingspunten in zowel je JavaScript- als je WASM-code in.
In de aanroepstack van DevTools kun je naadloos tussen uitvoeringsframes van JS en WASM stappen. Zo kun je de gegevensstroom eenvoudig volgen en problemen in de interoperabiliteitslaag vinden.
Kennistoets over foutopsporing
Test je begrip van foutopsporing in WebAssembly!
Foutopsporing in WASM: samenvatting
Vandaag heb je geleerd hoe je de ontwikkelaarstools van een browser gebruikt om je WebAssembly-toepassingen te debuggen. We hebben behandeld:
- Bronkaarten gebruiken om de oorspronkelijke broncode te bekijken.
- Onderbrekingspunten instellen en stap voor stap door de uitvoering gaan.
- Variabelen, geheugen en de aanroepstack inspecteren.
- Interacties tussen JavaScript en WASM debuggen.
Deze technieken beheersen is cruciaal voor het bouwen van robuuste en goed presterende WASM-toepassingen. Blijf oefenen!
Leer WebAssembly (WASM) voor performante toepassingen met een AI-tutor — gratis
Schrijf echte code en voer die uit in je browser, krijg direct hulp van een AI-tutor die 24/7 beschikbaar is en ga verder waar je gebleven bent op het web of in de app.
- Cursussen
- 12
- Lessen
- 48
Veelgestelde vragen
Is de les “WebAssembly-modules debuggen” gratis?
Ja — de volledige tekst van “WebAssembly-modules debuggen” kun je hier gratis op het web lezen. Als je interactief wilt oefenen met een ingebouwde code-editor en een AI-begeleider die 24/7 beschikbaar is, en de rest van de cursus WebAssembly (WASM) voor performante toepassingen wilt ontgrendelen, kun je upgraden naar CoddyKit PRO. De cursus WebAssembly (WASM) voor performante toepassingen bevat in totaal 4 lessen.
Wat leer ik in “WebAssembly-modules debuggen”?
Gebruik browserontwikkeltools en andere debugtechnieken om uw WASM-applicaties te inspecteren en problemen op te lossen. Je oefent met WebAssembly (WASM) voor performante toepassingen door code rechtstreeks in de browser uit te voeren. Een AI-begeleider die 24/7 beschikbaar is beantwoordt je vragen terwijl je de les doorwerkt.
Heb ik ervaring nodig om met WebAssembly (WASM) voor performante toepassingen te beginnen?
Ervaring vooraf is niet nodig. WebAssembly (WASM) voor performante toepassingen op CoddyKit is opgebouwd voor beginners tot gevorderden, zodat je hier of bij het begin kunt starten en in je eigen tempo kunt leren. Dit is les 3 van 4.
Hoe lang duurt de les “WebAssembly-modules debuggen”?
De meeste lessen van CoddyKit duren ongeveer 5–10 minuten. Elke les is kort en interactief, zodat je gestaag vooruitgaat en op het web en in de app precies verdergaat waar je was gebleven.
Kan ik code schrijven en uitvoeren in deze les over WebAssembly (WASM) voor performante toepassingen?
Ja. Elke les over WebAssembly (WASM) voor performante toepassingen bevat een ingebouwde code-editor, zodat je rechtstreeks in je browser echte code kunt schrijven en uitvoeren en direct feedback van AI krijgt — lokale installatie is niet nodig.
Alle lessen in deze cursus
- WASM-prestaties benchmarken
- Rust-code optimaliseren voor WASM
- WebAssembly-modules debuggen
- SIMD en multithreading voor maximale throughput