Esegui il debug di WebAssembly C/C++

Sofia Emelianova

WebAssembly consente di eseguire, ad esempio, codice C/C++ sul web a una velocità quasi nativa e insieme a JavaScript. Questo documento mostra come configurare e utilizzare Chrome DevTools per eseguire meglio il debug di queste applicazioni.

Dopo aver configurato DevTools, puoi:

• Esamina il codice originale in Origini > Editor.
• Metti in pausa l'esecuzione con i breakpoint a livello di riga di codice ed esamina il codice sorgente C/C++ originale, non il file binario .wasm compilato.

Inoltre, in pausa puoi:

• Passa il mouse sopra le variabili nel file di origine originale e visualizzane i valori.
• Comprendi i nomi delle funzioni in Call Stack e le variabili in Ambito.
• Mostra proprietà nidificate in modo complesso e oggetti complessi nella console.
• Controlla la memoria dell'oggetto con Controllo memoria.

Configura

Per attivare il debug di WebAssembly C/C++ in DevTools:

1. Compila l'applicazione con le informazioni di debug DWARF incluse. Esegui l'ultimo compilatore Emscripten e passagli il flag -g. Ad esempio:

   emcc -g source.cc -o app.html
   

   Per ulteriori informazioni, consulta Compilare progetti con informazioni di debug.

2. Installa l'estensione di Chrome C/C++ DevTools Support (DWARF).

Debug

Dopo aver configurato DevTools, esegui il debug del codice:

1. Apri DevTools per ispezionare il tuo sito web. Per questo tutorial, puoi provarlo in questa pagina di demo, compilata con il flag -g obbligatorio.
2. Se vuoi, puoi raggruppare i file che hai creato per semplificare la navigazione. In Origini, seleziona > Pagina > > Raggruppa per autore/implementato .
3. Seleziona il file di origine originale dalla struttura dei file. In questo caso, mandelbrot.cc.

4. Per impostare un punto di interruzione riga del codice, fai clic su un numero di riga nella colonna a sinistra dell'Editor, ad esempio sulla riga 38.

   

5. Esegui di nuovo il codice. L'esecuzione si interrompe prima della riga con il punto di interruzione.

Mentre sei in pausa, prova a procedere nel seguente modo:

• In Origini > Editor, passa il mouse sopra una variabile per visualizzarne il valore in una descrizione comando.

• In Origini > Pila chiamate, visualizza i nomi delle funzioni così come sono nel codice sorgente.

• In Origini > Ambito, visualizza le variabili locali e globali, i relativi tipi e i valori.

• In Console, esegui l'output di variabili e oggetti difficili da raggiungere in Ambito:

  • Variabili con un alto livello di nidificazione, ad esempio elementi indicizzati in array di grandi dimensioni.
  • Oggetti complessi, inclusi quelli a cui puoi accedere con i puntatori (->). Espandili per ispezionarli.

• In Origini > Ambito, fai clic sull'icona per aprire Controllo memoria e ispezionare i byte non elaborati della memoria dell'oggetto. Per maggiori informazioni, consulta Ispezione della memoria di WebAssembly.

Rendimento del profilo

Con DevTools configurato e aperto, il codice eseguito da Chrome non è ottimizzato. È a livelli per offrirti una migliore esperienza di debug.

In questo caso, non puoi fare affidamento su console.time() e performance.now() nel tuo codice per profilare il rendimento. Per profilare, utilizza invece il riquadro Rendimento.

In alternativa, puoi eseguire il codice di profilazione senza aprire DevTools, quindi aprirlo per ispezionare i messaggi nella console.

Separa le informazioni di debug

Per velocizzare il caricamento, ma avere comunque un'esperienza di debug migliore, puoi suddividere le informazioni di debug in un file .wasm separato. Per ulteriori informazioni, consulta Eseguire il debug di WebAssembly più velocemente.

Puoi conservare questo file localmente o ospitarlo su un server separato. Per farlo con Emscripten, passa il flag -gseparate-dwarf=<filename> e specifica il percorso del file:

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

Esegui la compilazione e il debug su macchine diverse

Se esegui la compilazione su una macchina con un sistema operativo (contenitore, VM o server remoto) diverso da quello su cui esegui Chrome, potrebbe essere necessario mappare manualmente i percorsi dei file di debug.

Ad esempio, se il progetto si trova in C:\src\project localmente, ma è stato creato in un container Docker con il percorso /mnt/c/src/project, segui questi passaggi:

1. Vai a chrome://extensions/, trova l'estensione C/C++ DevTools (DWARF) e fai clic su Dettagli > Opzioni estensione.
2. Specifica i percorsi dei file vecchi e nuovi.

Scopri di più

Per ulteriori informazioni sul debug di WebAssembly, consulta il blog tecnico di Chrome DevTools:

• Eseguire il debug di WebAssembly con strumenti moderni
• Eseguire il debug di WebAssembly più velocemente
• Introduzione a Controllo memoria
• Estensione di Controllo memoria per il debug C/C++