Cómo depurar WebAssembly de C/C++

Sofia Emelianova
Sofia Emelianova

WebAssembly proporciona una manera de ejecutar, por ejemplo, código C/C++ en la Web a una velocidad casi nativa y junto con JavaScript. Este documento muestra cómo configurar y usar las Herramientas para desarrolladores de Chrome a fin de depurar mejor esas aplicaciones.

Una vez que configures Herramientas para desarrolladores, podrás hacer lo siguiente:

  • Inspecciona tu código original en Fuentes > Editor.
  • Pausa la ejecución con puntos de interrupción de línea de código y recorre el código fuente C/C++ original, no el archivo binario .wasm compilado.

Mientras está en pausa, puedes hacer lo siguiente:

  • Coloca el cursor sobre las variables en el archivo fuente original y observa sus valores.
  • Comprende los nombres de las funciones en la Pila de llamadas y las variables en el Alcance.
  • Envía propiedades profundamente anidadas y objetos complejos a Console.
  • Inspecciona la memoria de objetos con el Inspector de memoria.

Configurar

Para habilitar la depuración de WebAssembly con C/C++ en Herramientas para desarrolladores, sigue estos pasos:

  1. Compila tu aplicación con la información de depuración de DWARF incluida. Ejecuta el compilador de Emscripten más reciente y pásale la marca -g. Por ejemplo:

    emcc -g source.cc -o app.html
    

    Para obtener más información, consulta Cómo compilar proyectos con información de depuración.

  2. Instala la extensión de Chrome para la compatibilidad con Herramientas para desarrolladores de C/C++ (DWARF).

Depurar

Con las Herramientas para desarrolladores configuradas, depura tu código:

  1. Abre Herramientas para desarrolladores para inspeccionar tu sitio web. Para este instructivo, puedes probarlo en esta página de demostración, que se compiló con la marca -g requerida.
  2. De manera opcional, puedes agrupar los archivos que creaste para facilitar la navegación. En Fuentes, marca Menú de tres puntos > Página > Casilla de verificación > Agrupa por escrito/implementado Experimental..
  3. Selecciona el archivo fuente original del árbol de archivos. En este caso: mandelbrot.cc.
  4. Para establecer un punto de interrupción de línea de código, haz clic en un número de línea en la columna a la izquierda del Editor, por ejemplo, en la línea 38.

    Un punto de interrupción de línea de código establecido en la línea 38.

  5. Vuelve a ejecutar el código. La ejecución se detiene antes de la línea que tiene el punto de interrupción.

Mientras está en pausa, prueba lo siguiente:

  • En Fuentes > Editor, coloca el cursor sobre una variable para ver su valor en el cuadro de información.

Es el valor de una variable en un cuadro de información.

  • En Fuentes > Pila de llamadas, visualiza los nombres de las funciones como están en la fuente.

Es la función principal de la pila de llamadas.

  • En Fuentes > Alcance, consulta las variables locales y globales, sus tipos y sus valores.

El panel Alcance con variables locales y sus valores.

  • En la consola, las variables de salida y los objetos a los que es difícil navegar en Alcance:

    • Variables anidadas de forma profunda, por ejemplo, elementos indexados en arrays grandes.
    • Objetos complejos, incluidos aquellos a los que se puede acceder con punteros (->). Expándelos para inspeccionarlos.

Una variable anidada y un objeto complejo expandido en la consola.

  • En Fuentes > Alcance, haz clic en el ícono Memoria. para abrir el Inspector de memoria y, luego, inspeccionar los bytes sin procesar de la memoria del objeto. Para obtener más información, consulta Inspección de memoria de WebAssembly.

Inspeccionar la memoria de una variable

Rendimiento del perfil

Con las Herramientas para desarrolladores configuradas y abiertas, el código que ejecuta Chrome no está optimizado. Está nivelado para brindarte una mejor experiencia de depuración.

En este caso, no puedes confiar en console.time() y performance.now() en tu código para perfilar el rendimiento. En su lugar, usa el panel Rendimiento para generar perfiles.

Como alternativa, puedes ejecutar el código de generación de perfiles sin abrir las Herramientas para desarrolladores y, luego, abrirlo para inspeccionar los mensajes en la consola.

Separa la información de depuración

Para acelerar la carga y seguir teniendo una mejor experiencia de depuración, puedes dividir la información de depuración en un archivo .wasm independiente. Para obtener más información, consulta Depura WebAssembly más rápido.

Puedes conservar el archivo de forma local o alojarlo en otro servidor. Para hacerlo con Emscripten, pasa la marca -gseparate-dwarf=<filename> y especifica la ruta de acceso al archivo:

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

Compila y depura en diferentes máquinas

Si compilas en una máquina con un sistema operativo diferente (contenedor, VM o servidor remoto) al de la máquina en la que ejecutas Chrome, es posible que debas asignar manualmente las rutas del archivo de depuración.

Por ejemplo, si tu proyecto se encuentra en C:\src\project de forma local, pero se compiló en un contenedor de Docker con la ruta de acceso /mnt/c/src/project, haz lo siguiente:

  1. Ve a chrome://extensions/, busca la extensión C/C++ Herramientas para desarrolladores (DWARF) y haz clic en Detalles > Opciones de extensión:
  2. Especifica la ruta de acceso al archivo anterior y la nueva.

Las rutas de archivo anteriores y nuevas especificadas

Más información

Para obtener más información sobre la depuración de WebAssembly, consulta el blog de ingeniería de Herramientas para desarrolladores de Chrome: