Esegui il debug di WebAssembly C/C++

Sofia Emelianova

WebAssembly offre un modo per 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 il debug di queste applicazioni in modo più efficace.

Una volta configurato DevTools, puoi:

• Controlla 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 per visualizzarne 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 Creare progetti con informazioni di debug.

2. Installa l'estensione di Chrome per il supporto di DevTools C/C++ (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, raggruppa i file che hai creato per facilitare 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 breakpoint di riga di 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 viene interrotta prima della riga con il punto di interruzione.

Mentre è 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 valori.

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

  • Variabili nidificate in modo molto approfondito, ad esempio elementi indicizzati in array di grandi dimensioni.
  • Oggetti complessi, inclusi quelli a cui puoi accedere con i cursori (->). Espandili per ispezionarli.

• In Origini > Ambito, fai clic sull'icona per aprire Memory Inspector e ispezionare i byte non elaborati della memoria dell'oggetto. Per ulteriori informazioni, consulta la sezione Ispezione della memoria WebAssembly.

Rendimento del profilo

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

In questo caso, non puoi fare affidamento su console.time() e performance.now() nel codice per profilare il rendimento. Utilizza invece il riquadro Prestazioni per creare il profilo.

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

Separare 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 contenitore Docker con il percorso /mnt/c/src/project, procedi nel seguente modo:

1. Vai a chrome://extensions/, individua l'estensione Supporto di DevTools per C/C++ (DWARF) e fai clic su Dettagli > Opzioni di 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++