WebAssembly: depuración de WASM en Firefox
La compatibilidad con WebAssembly se agrega a todos los navegadores más recientes disponibles en la actualidad, como Chrome, Firefox. La versión 54+ de Firefox en adelante le brinda una función especial para depurar su código wasm.
Para hacer eso, ejecute su código dentro de los navegadores Firefox que llaman wasm. Por ejemplo, considere seguir el código C que encuentra el cuadrado del número.
Un ejemplo del programa C es el siguiente:
#include<stdio.h>
int square(int n) {
return n*n;
}Usaremos el explorador WASM para obtener el código wasm -
Descargue el código WASM y utilícelo para ver el resultado en el navegador.
El archivo html que carga el wasm es el siguiente:
!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>Abra su navegador Firefox y cargue el archivo html anterior y abra la herramienta de depuración.
Debería ver la entrada wasm: // en la herramienta de depuración. Haga clic en wasm: // y muestra el código wasm convertido a formato .wat como se muestra arriba.
Puede echar un vistazo al código de la función exportada y depurar el código, si surge algún problema. Firefox también tiene la intención de agregar puntos de interrupción, para que pueda depurar el código y verificar el flujo de ejecución.