Cómo depurar WebAssembly de C/C++

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 > Página > > Agrupa por escrito/implementado .
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.

   

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.

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

• En Fuentes > Alcance, consulta las variables locales y globales, sus tipos 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.

• En Fuentes > Alcance, haz clic en el ícono 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.

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.

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:

• Depura WebAssembly con herramientas modernas
• Depura WebAssembly más rápido
• Presentación del Inspector de memoria
• Cómo extender el Inspector de memoria para la depuración en C/C++