WebAssembly - Debug di WASM in Firefox

Il supporto WebAssembly viene aggiunto a tutti i browser più recenti disponibili oggi con te come Chrome, Firefox. La versione di Firefox 54+ in poi offre una funzione speciale per eseguire il debug del codice wasm.

Per fare ciò, esegui il tuo codice all'interno dei browser Firefox che chiamano wasm. Ad esempio, considera di seguire il codice C che trova il quadrato del numero.

Un esempio per il programma C è il seguente:

#include<stdio.h>
int square(int n) {
   return n*n;
}

Useremo WASM explorer per ottenere il codice wasm -

Scarica il codice WASM e usalo per vedere l'output nel browser.

Il file html che carica il wasm è il seguente:

!doctype html> 
<html>
   <head>
      <meta charset="utf-8"> 
      <title>WebAssembly Square function</title> 
      <style> 
         div { 
            font-size : 30px; text-align : center; color:orange; 
         } 
      </style> 
   </head> 
   <body> 
      <div id="textcontent"></div> 
      <script> 
         let square; 
         fetch("findsquare.wasm").then(bytes => bytes.arrayBuffer()) 
            .then(mod => WebAssembly.compile(mod)) 
            .then(module => {return new WebAssembly.Instance(module) }) 
            .then(instance => {  
            square = instance.exports.square(13);
            console.log("The square of 13 = " +square);           
            document.getElementById("textcontent").innerHTML = "The square of 13 = " +square; 
         }); 
      </script> 
   </body> 
</html>

Apri il tuo browser Firefox e carica il file html sopra e apri lo strumento debugger.

Dovresti vedere wasm: // voce nello strumento debugger. Fare clic su wasm: // e mostra il codice wasm convertito in formato .wat come mostrato sopra.

Puoi dare un'occhiata al codice della funzione esportata e puoi eseguire il debug del codice, se si verificano problemi. Firefox intende anche aggiungere punti di interruzione, in modo da poter eseguire il debug del codice e controllare il flusso di esecuzione.