Esegui il debug di WebAssembly C/C++

Sofia Emelianova

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

Una volta configurato DevTools, puoi:

• Controlla il codice originale in Origini > Editor.
• Metti in pausa l'esecuzione con punti di interruzione riga di codice e passa attraverso il codice sorgente C/C++ originale, non il file binario .wasm compilato.

Mentre sei in pausa, puoi:

• Passa il mouse sopra le variabili nel file di origine originale per visualizzarne i valori.
• Scopri i nomi delle funzioni in Stack di chiamate e le variabili in Ambito.
• Genera proprietà con molti livelli di nidificazione e oggetti complessi nella console.
• Ispeziona la memoria degli oggetti con Memory Inspector.

Configura

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

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

   emcc -g source.cc -o app.html
   

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

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

esegui il debug

Dopo aver configurato DevTools, esegui il debug del codice:

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

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

   

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

Mentre la chiamata è 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 > Stack di chiamate, visualizza i nomi delle funzioni così come sono nell'origine.

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

• Nella console, le variabili di output e gli oggetti difficili da accedere in Ambito:

  • Variabili nidificate profondamente, ad esempio elementi indicizzati in grandi array.
  • Oggetti complessi, inclusi quelli a cui puoi accedere con i puntatori (->). Espandili per ispezionarli.

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

Rendimento del profilo

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

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

In alternativa, puoi eseguire il codice di profilazione senza aprire DevTools e poi aprirlo per esaminare i messaggi nella console.

Separa le informazioni di debug

Per velocizzare il caricamento pur continuando a migliorare l'esperienza di debug, puoi suddividere le informazioni di debug in un file .wasm separato. Per ulteriori informazioni, consulta Eseguire il debug di WebAssembly più velocemente.

Puoi mantenere questo file localmente oppure ospitarlo su un server separato. Per farlo con Emscripten, passa il flag -gseparate-dwarf=<filename> e specifica il percorso al 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]

Crea ed esegui il debug su macchine diverse

Se crei su un computer con un sistema operativo diverso (container, VM o server remoto) rispetto a quello sul computer su cui esegui Chrome, potrebbe essere necessario mappare manualmente i percorsi dei file di debug.

Ad esempio, se il tuo progetto si trova all'indirizzo C:\src\project in locale, ma è stato creato in un container Docker con il percorso /mnt/c/src/project:

1. Vai a chrome://extensions/, trova l'estensione C/C++ DevTools Support (DWARF) e fai clic su Dettagli > Opzioni estensione.
2. Specifica il percorso dei file precedente e quello nuovo.

Scopri di più

Per saperne di più sul debug di WebAssembly, consulta il blog ingegneristico di Chrome DevTools:

• Eseguire il debug di WebAssembly con strumenti moderni
• Eseguire più rapidamente il debug di WebAssembly
• Presentazione di Controllo memoria
• Estensione di Memory Inspector per il debug C/C++