Contexto
Até recentemente, a única depuração do WebAssembly compatível com o Chrome DevTools era a visualização de stack traces brutos do WebAssembly e a substituição das instruções individuais em um formato de texto do WebAssembly desmontado.
Embora isso funcione com qualquer módulo WebAssembly e ajude um pouco na depuração de funções pequenas e isoladas, ele não é muito prático para aplicativos maiores, em que o mapeamento entre o código desmontado e as fontes é menos óbvio.
Uma solução temporária
Para contornar esse problema, o Emscripten e o DevTools adaptaram temporariamente o formato de mapas de origem para o WebAssembly. Isso permitia mapeamentos entre deslocamentos binários no módulo compilado para locais originais nos arquivos de origem
No entanto, os mapas de origem foram projetados para formatos de texto com mapeamentos claros para conceitos e valores JavaScript, não para formatos binários como WebAssembly com linguagens de origem arbitrárias, sistemas de tipo e uma memória linear. Isso tornava a integração drástica, limitada e sem suporte amplo fora da Emscripten.
Insira DWARF
Por outro lado, muitas linguagens nativas já têm um formato de depuração comum, DWARF, que fornece todas as informações necessárias para que os depuradores resolvam locais, nomes de variáveis, layouts de tipo e muito mais.
Embora ainda haja alguns recursos específicos do WebAssembly que precisam ser adicionados para compatibilidade total, compiladores como Clang e Rust já oferecem suporte à emissão de informações DWARF em módulos WebAssembly, o que permitiu que a equipe do DevTools começasse a usá-los diretamente no DevTools.
Como primeira etapa, o DevTools agora oferece suporte ao mapeamento de origem nativo usando essas informações. Assim, você pode começar a depurar módulos Wasm produzidos por qualquer um desses compiladores sem recorrer ao formato desmontado ou ter que usar scripts personalizados.
Em vez disso, você só precisa instruir o compilador a incluir informações de depuração, como faria normalmente em outras plataformas. Por exemplo, no Clang e Emscripten, isso pode ser feito transmitindo uma sinalização -g durante a compilação:
clang -g …sources… -target wasm32 -o out.wasm
emcc -g …sources… -o out.js
Você pode usar a mesma flag -g no Rust:
rustc -g source.rs --target wasm32-unknown-unknown -o out.wasm
Ou, se você estiver usando o Cargo, as informações de depuração serão incluídas por padrão:
cargo build --target wasm32-unknown-unknown
Essa nova integração do DevTools com o DWARF já abrange o suporte para a passagem pelo código, a definição de pontos de interrupção e a resolução de stack traces nas linguagens de origem.
O futuro
No entanto, ainda há muito trabalho a ser feito.
Por exemplo, com relação às ferramentas, Emscripten (Binaryen) e wasm-pack (Wasm-bindgen) não oferecem suporte à atualização de informações DWARF sobre as transformações que ainda executam. Por enquanto, essa integração não será vantajosa para essas empresas.
Em relação ao Chrome DevTools, vamos aprimorar a integração ao longo do tempo para garantir uma experiência de depuração perfeita, incluindo:
- Como resolver nomes de variáveis
- Tipos de estilos de formatação
- Como avaliar expressões em linguagens de origem
- E muito mais.
Fique ligado nas próximas atualizações!
Fazer o download dos canais de visualização
Use o Chrome Canary, Dev ou Beta como seu navegador de desenvolvimento padrão. Esses canais de pré-lançamento oferecem acesso aos recursos mais recentes do DevTools, testam as APIs modernas de plataformas da Web e encontram problemas no site antes dos usuários.
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na publicação ou qualquer outra coisa relacionada ao DevTools.
- Envie uma sugestão ou feedback em crbug.com.
- Informe um problema do DevTools em Mais opções
> Ajuda > Informar problemas no DevTools. - Envie um tweet em @ChromeDevTools.
- Deixe comentários nos nossos vídeos do YouTube sobre a ferramenta DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.