Melhoria na depuração do WebAssembly no Chrome DevTools

Ingvar Stepanyan
Ingvar Stepanyan

Contexto

Até recentemente, a única depuração do WebAssembly que o Chrome DevTools suportava era a visualização de traços de pilha do WebAssembly brutos e a execução de instruções individuais em um formato de texto do WebAssembly desmemorizado.

Uma captura de tela do suporte limitado ao depurador do WebAssembly no Chrome DevTools.

Embora isso funcione com qualquer módulo do WebAssembly e ajude um pouco na depuração de funções pequenas e isoladas, não é muito prático para apps maiores, em que o mapeamento entre o código desmemorizado e as origens é menos óbvio.

Uma solução alternativa temporária

Para contornar esse problema, o Emscripten e o DevTools adaptaram temporariamente o formato de mapas de origem para o WebAssembly. Isso permitiu mapeamentos entre deslocamentos binários no módulo compilado para locais originais nos arquivos de origem.

Uma captura de tela da depuração com mapas de origem.

No entanto, os mapas de origem foram projetados para formatos de texto com mapeamentos claros para conceitos e valores do JavaScript, não para formatos binários como o WebAssembly com linguagens de origem arbitrárias, sistemas de tipos e uma memória linear. Isso tornou a integração hacky, limitada e sem suporte amplo fora do Emscripten.

Entrar no DWARF

Por outro lado, muitos idiomas nativos 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.

Ainda há alguns recursos específicos do WebAssembly que precisam ser adicionados para a compatibilidade total, mas compiladores como Clang e Rust já oferecem suporte à emissão de informações DWARF em módulos do WebAssembly, o que permitiu que a equipe do DevTools começasse a usá-lo diretamente no DevTools.

Como primeira etapa, o DevTools agora oferece suporte ao mapeamento de origem nativa usando essas informações. Assim, você pode começar a depurar módulos Wasm produzidos por qualquer um desses compiladores sem recorrer ao formato desmemorizado ou usar scripts personalizados.

Em vez disso, basta informar ao compilador para incluir informações de depuração, como você faria em outras plataformas. Por exemplo, no Clang e no Emscripten, isso pode ser feito transmitindo uma flag -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á oferece suporte para avançar no código, definir pontos de interrupção e resolver rastros de pilha nas suas linguagens de origem.

Captura de tela da nova depuração com DWARF.

O futuro

Ainda há muito trabalho a ser feito. Por exemplo, no lado das ferramentas, Emscripten (Binaryen) e wasm-pack (wasm-bindgen) ainda não oferecem suporte à atualização de informações DWARF nas transformações que executam. Por enquanto, eles não vão se beneficiar dessa integração.

E, no Chrome DevTools, vamos evoluir 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 impressão com estilo
  • Como avaliar expressões em 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 navegador de desenvolvimento padrão. Esses canais de visualização dão acesso aos recursos mais recentes do DevTools, permitem testar APIs de plataforma da Web de última geração e ajudam a encontrar problemas no seu site antes que os usuários.

Entre em contato com a equipe do Chrome DevTools

Use as opções a seguir para discutir os novos recursos, atualizações ou qualquer outra coisa relacionada ao DevTools.