Segundo plano
Hasta hace poco, la única depuración de WebAssembly que admitía Chrome DevTools era ver los seguimientos de pila sin procesar de WebAssembly y omitir instrucciones individuales en un formato de texto de WebAssembly desarmado.
Si bien esto funciona con cualquier módulo de WebAssembly y ayuda un poco con la depuración de 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 descompilado y tus fuentes es menos obvia.
Una solución temporal
Para solucionar este problema, Emscripten y DevTools adaptaron temporalmente el formato existente de mapas de origen a WebAssembly. Esto permitió las asignaciones entre los desplazamientos binarios en el módulo compilado a las ubicaciones originales en los archivos fuente.
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 hacky, limitada y no admitida 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 aún hay algunas funciones específicas de WebAssembly que se deben agregar para lograr la compatibilidad total, los compiladores como Clang y Rust ya admiten la emisión de información DWARF en los módulos de WebAssembly, lo que permitió que el equipo de DevTools comenzara a usarlo directamente en DevTools.
Como primer paso, Herramientas para desarrolladores ahora admite la asignación nativa de fuentes a través de 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
O bien, 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 para recorrer el código, configurar puntos de interrupción y resolver seguimientos de pila en tus lenguajes de origen.
El futuro
Sin embargo, aún queda mucho trabajo por hacer.
Por ejemplo, en cuanto a las herramientas, Emscripten (Binaryen) y wasm-pack (wasm-bindgen) no admiten la actualización de información de DWARF en las transformaciones que realizan. Por ahora, no se beneficiarán de esta integración.
Y en el lado de las Herramientas para desarrolladores de Chrome, con el tiempo, mejoraremos la integración para garantizar una experiencia de depuración fluida, que incluye lo siguiente:
- Cómo resolver nombres de variables
- Tipos de impresión con formato
- Evaluar expresiones en idiomas de origen
- ...y mucho más
No te pierdas las próximas actualizaciones.
Descarga los canales de vista previa
Considera usar Chrome Canary, Dev o Beta como tu navegador de desarrollo predeterminado. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataformas web de vanguardia y detectan problemas en tu sitio antes que los usuarios.
Comunícate con el equipo de Chrome DevTools
Usa las siguientes opciones para analizar las nuevas funciones y los cambios en la publicación, o cualquier otro tema relacionado con DevTools.
- Envíanos una sugerencia o comentarios a través de crbug.com.
- Informa un problema en Herramientas para desarrolladores con Más opciones
> Ayuda > Informa problemas de Herramientas para desarrolladores en Herramientas para desarrolladores. - Twittea a @ChromeDevTools.
- Deja comentarios en nuestros videos de YouTube sobre las novedades de DevTools o en los videos de YouTube sobre sugerencias de DevTools.