Cómo depurar WebAssembly de C/C++

Sofia Emelianova

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

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

• Inspecciona el código original en Sources > 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.

Además, mientras la campaña esté pausada, podrás hacer lo siguiente:

• Coloca el cursor sobre las variables del archivo fuente original y consulta 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 del objeto 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 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 DevTools para inspeccionar tu sitio web. En este instructivo, puedes probarlo en esta página de demostración, que se compiló con la marca -g obligatoria.
2. Opcionalmente, agrupa los archivos que creaste para facilitar la navegación. En Fuentes, marca > Página > > Agrupar por autoría o implementación .
3. Selecciona tu 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 con 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, observa 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 puedes acceder con punteros (->). Expande los objetos 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

Si configuras y abres DevTools, el código que ejecuta Chrome no se optimiza. 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 DevTools y, luego, abrirlo para inspeccionar los mensajes en Console.

Separa la información de depuración

Para acelerar la carga y, al mismo tiempo, tener 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 este archivo de forma local o alojarlo en un servidor independiente. 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

Consulta el blog de ingeniería de Chrome DevTools para obtener más información sobre la depuración de WebAssembly:

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