Depuración de WebAssembly mejorada en las Herramientas para desarrolladores de Chrome

Ingvar Stepanyan
Ingvar Stepanyan

Información general

Hasta hace poco, la única depuración de WebAssembly que admitía Herramientas para desarrolladores de Chrome era ver seguimientos de pila de WebAssembly sin procesar y recorrer instrucciones individuales en un formato de texto de WebAssembly desensamblado.

Captura de pantalla de la compatibilidad con la depuración de WebAssembly limitada anteriormente en las Herramientas para desarrolladores de Chrome.

Si bien esto funciona con cualquier módulo de WebAssembly y ayuda de alguna manera a depurar funciones pequeñas y aisladas, no es muy práctico para apps más grandes en las que la asignación entre el código desensamblado y los orígenes es menos evidente.

Una solución temporal

Para solucionar este problema, Emscripten y Herramientas para desarrolladores adaptaron temporalmente el formato de mapas de origen existente a WebAssembly. Esto permitió asignaciones entre desplazamientos binarios en el módulo compilado para ubicaciones originales en archivos de origen.

Una captura de pantalla de la depuración con tecnología de mapas de origen.

Sin embargo, los mapas de origen se diseñaron para formatos de texto con asignaciones claras a conceptos y valores de JavaScript, no para formatos binarios como WebAssembly con lenguajes de origen arbitrarios, sistemas de tipos y una memoria lineal. Esto hizo que la integración fuera complicada, limitada y que no se admitiera ampliamente fuera de Emscripten.

Ingresar DWARF

Por otro lado, muchos lenguajes nativos ya tienen un formato de depuración común, DWARF, que proporciona toda la información necesaria para que los depuradores resuelvan ubicaciones, nombres de variables, diseños de tipos y mucho más.

Si bien todavía hay algunas funciones específicas de WebAssembly que se deben agregar para lograr una compatibilidad completa, los compiladores como Clang y Rust ya admiten la emisión de información de DWARF en los módulos de WebAssembly, lo que permitió que el equipo de Herramientas para desarrolladores comenzara a usarlo directamente en Herramientas para desarrolladores.

Como primer paso, Herramientas para desarrolladores ahora admite la asignación de fuentes nativas usando esta información, por lo que puedes comenzar a depurar módulos de Wasm producidos por cualquiera de estos compiladores sin recurrir al formato desensamblado ni tener que usar secuencias de comandos personalizadas.

En cambio, solo debes indicarle a tu compilador que incluya información de depuración como lo harías normalmente en otras plataformas. Por ejemplo, en Clang y Emscripten, esto se puede hacer pasando una marca -g durante la compilación:

  clang -g …sources… -target wasm32 -o out.wasm

  emcc -g …sources… -o out.js

Puedes usar la misma marca -g en Rust:

  rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm

Si usas Cargo, la información de depuración se incluirá de forma predeterminada:

  cargo build --target wasm32-unknown-unknown

Esta nueva integración de Herramientas para desarrolladores con DWARF ya abarca la compatibilidad con el desplazamiento por el código, la configuración de puntos de interrupción y la resolución de seguimientos de pila en tus idiomas de origen.

Captura de pantalla de la nueva depuración con tecnología DWARF.

El futuro

Sin embargo, todavía hay bastante trabajo por hacer. Por ejemplo, en el lado de las herramientas, Emscripten (Binaryen) y wasm-pack (wasm-bindgen) no admiten la actualización de la información de DWARF sobre las transformaciones que realizan aún. Por ahora, no se beneficiarán de esta integración.

Y en cuanto a las Herramientas para desarrolladores de Chrome, desarrollaremos más la integración con el tiempo para garantizar una experiencia de depuración fluida, lo que incluye lo siguiente:

  • Resuelve nombres de variables
  • Tipos de impresión con formato estilístico
  • Evalúa expresiones en los lenguajes de origen
  • ...y mucho más

No te pierdas las próximas actualizaciones.

Descarga los canales de vista previa

Considera usar Canary, Dev o Beta de Chrome como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueba APIs de plataformas web de vanguardia y encuentra problemas en tu sitio antes que tus usuarios.

Cómo comunicarse con el equipo de Herramientas para desarrolladores de Chrome

Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.

  • Envíanos tus sugerencias o comentarios a través de crbug.com.
  • Informa un problema en Herramientas para desarrolladores mediante Más opciones   Más   > Ayuda > Informar problemas con Herramientas para desarrolladores en Herramientas para desarrolladores.
  • Envía un tweet a @ChromeDevTools.
  • Deja comentarios en los videos de YouTube de las Novedades de las Herramientas para desarrolladores o en las sugerencias de Herramientas para desarrolladores (videos de YouTube).