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. En este documento, se muestra cómo configurar y usar las Herramientas para desarrolladores de Chrome para depurar mejor esas aplicaciones.

Cuando configures Herramientas para desarrolladores, podrás hacer lo siguiente:

• Inspecciona el 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 original de C/C++, no el archivo binario .wasm compilado.

Además, mientras está pausado, puede hacer lo siguiente:

• Coloca el cursor sobre las variables del archivo fuente original y observa sus valores.
• Comprender los nombres de las funciones de Call Stack y las variables en Scope
• Envía propiedades profundamente anidadas y objetos complejos a Console.
• Inspecciona la memoria de objetos con el Inspector de memoria.

Configuración

Para habilitar la depuración de C/C++ WebAssembly en Herramientas para desarrolladores, haz lo siguiente:

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 C/C++ (DWARF).

Depuración

Con las Herramientas para desarrolladores configurado, 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 obligatoria.
2. De manera opcional, agrupa los archivos que creaste para facilitar la navegación. En Fuentes, marca > Página > > Agrupar por autor/implementado .
3. Selecciona el archivo fuente original en el á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 de la columna ubicada a la izquierda del Editor, por ejemplo, en la línea 38.

   

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

Mientras la app está pausada, prueba lo siguiente:

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

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

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

• En Console, muestra variables y objetos difíciles de navegar en Alcance:

  • Variables anidadas de forma profunda, por ejemplo, elementos indexados en arreglos grandes
  • Objetos complejos, incluidos aquellos a los que puedes 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 configurado y abierto, el código que ejecuta Chrome no está optimizado. Cuenta con un nivel inferior 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 generar perfiles del rendimiento. En su lugar, usa el panel Rendimiento para generar perfiles.

Como alternativa, puedes ejecutar tu 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 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 Cómo depurar WebAssembly más rápido.

Puedes conservar este 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 de acceso de los archivos 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 Compatibilidad con Herramientas para desarrolladores de C/C++ (DWARF) y haz clic en Details > Extension options.
2. Especifica la ruta de acceso a los archivos 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
• Presentamos el Inspector de memoria
• Extensión del Inspector de memoria para depuración C/C++