Contexto
Até pouco tempo atrás, a única depuração com o WebAssembly aceita pelo Chrome DevTools era stack traces brutos do WebAssembly e acompanhamento de instruções individuais em uma formato de texto WebAssembly desmontado.
Embora isso funcione com qualquer módulo do WebAssembly e ajude a depurar funções pequenas e isoladas, não é muito prático para apps 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 de mapas de origem para o WebAssembly. Isso permitiu mapeamentos entre deslocamentos binários no módulo compilado para os 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 o WebAssembly com linguagens de origem arbitrárias, sistemas de tipo e uma memória linear. Isso tornava a integração complicada, limitada e não amplamente suportada fora da Emscripten.
Entre em 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 tipos 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á aceitam a emissão de informações DWARF em módulos WebAssembly, o que permitiu que a equipe do DevTools começasse a usá-las diretamente no DevTools.
Como primeira etapa, o DevTools agora oferece suporte ao mapeamento de origem nativa usando essas informações, para que você possa 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, basta 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
É possível 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á inclui suporte para percorrer o código, definir pontos de interrupção e resolver stack traces nas linguagens de origem.
O futuro
Ainda há muito trabalho a ser feito.
Por exemplo, em relação às ferramentas, Emscripten (Binaryen) e wasm-pack (wasm-bindgen) não são compatíveis com a atualização de informações DWARF sobre as transformações que ainda executam. Por enquanto, eles não se beneficiarão dessa integração.
No Chrome DevTools, vamos melhorar 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 estilo de formatação
- Avaliação de expressões nos idiomas 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 dão acesso aos recursos mais recentes do DevTools, testam APIs modernas da plataforma Web e encontram problemas no seu site antes que os usuários o façam!
Entrar em contato com a equipe do Chrome DevTools
Use as opções a seguir para discutir os novos recursos e mudanças na postagem ou qualquer outro assunto relacionado ao DevTools.
- Envie uma sugestão ou feedback pelo site crbug.com.
- Informe um problema do DevTools usando Mais opções
> Ajuda > Relate problemas no DevTools no DevTools. - Tuíte em @ChromeDevTools.
- Deixe comentários nos vídeos do YouTube sobre as novidades do DevTools ou nos vídeos do YouTube com dicas sobre o DevTools.