Información general
Hasta hace poco, la única depuración de WebAssembly que admitía las Herramientas para desarrolladores de Chrome era la visualización. seguimientos de pila de WebAssembly sin procesar y repasar instrucciones individuales en un formato de texto desensamblado de WebAssembly.
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 tus fuentes es menos evidente.
Una solución temporal
Para solucionar este problema, Emscripten y Herramientas para desarrolladores adaptaron temporalmente el servicio existente asignaciones de fuentes a WebAssembly. Esto permitió las asignaciones entre desplazamientos binarios en el módulo compilado con ubicaciones originales en archivos fuente.
Sin embargo, los mapas de origen se diseñaron para formatos de texto con asignaciones claras para 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 hackeada, limitada y poco compatible 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 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ó al equipo de Herramientas para desarrolladores comenzar a usarla. directamente en Herramientas para desarrolladores.
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, todavía hay bastante 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:
- Resuelve nombres de variables
- Tipos de impresión con formato estilístico
- 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 navegadores de desarrollo predeterminados. Estos canales de vista previa te brindan acceso a las funciones más recientes de Herramientas para desarrolladores, prueban API de plataforma web de vanguardia y detectan problemas en tu sitio antes que los usuarios.
Comunicarse con el equipo de Herramientas para desarrolladores de Chrome
Usa las siguientes opciones para hablar sobre las nuevas funciones y los cambios en la publicación, o cualquier otra cosa relacionada con Herramientas para desarrolladores.
- Para enviarnos sugerencias o comentarios, accede a 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 de Herramientas para desarrolladores o en videos de YouTube de las Sugerencias de las Herramientas para desarrolladores.