Depurar o WebAssembly C/C++

Sofia Emelianova

O WebAssembly fornece uma maneira de executar, por exemplo, código C/C++ na Web a uma velocidade quase nativa e junto com o JavaScript. Este documento mostra como configurar e usar o Chrome DevTools para depurar esses aplicativos da melhor forma.

Depois de configurar o DevTools, você pode:

• Inspecione seu código original em Fontes > Editor.
• Pause a execução com pontos de interrupção de linha de código e percorra o código-fonte C/C++ original, não o arquivo binário .wasm compilado.

E, enquanto estiver pausado, você pode:

• Passe o cursor sobre as variáveis no arquivo de origem original e confira os valores.
• Entenda os nomes das funções em Call Stack e variáveis em Scope.
• Envie propriedades aninhadas profundamente e objetos complexos para o Console.
• Inspecione a memória do objeto com o Memory Inspector.

Configurar

Para ativar a depuração do WebAssembly C/C++ no DevTools:

1. Compile seu aplicativo com as informações de depuração DWARF incluídas. Execute o compilador Emscripten mais recente e transmita a flag -g. Exemplo:

   emcc -g source.cc -o app.html
   

   Para saber mais, consulte Como criar projetos com informações de depuração.

2. Instale a extensão DWARF do Chrome para C/C++ DevTools.

Depurar

Com o DevTools configurado, depure o código:

1. Abra o DevTools para inspecionar o site. Para este tutorial, teste na página de demonstração, que foi compilada com a flag -g necessária.
2. Se quiser, agrupe os arquivos de sua autoria para facilitar a navegação. Em Fontes, marque > Página > > Grupo por criado/implantado .
3. Selecione o arquivo de origem na árvore de arquivos. Nesse caso, mandelbrot.cc.

4. Para definir um ponto de interrupção de linha de código, clique em um número de linha na coluna à esquerda do Editor, por exemplo, na linha 38.

   

5. Execute o código novamente. A execução é pausada antes da linha com o ponto de interrupção.

Enquanto estiver pausado, tente o seguinte:

• Em Fontes > Editor, passe o cursor sobre uma variável para ver o valor dela em uma dica.

• Em Fontes > Pilha de chamadas, confira os nomes das funções como estão na origem.

• Em Fontes > Escopo, analise as variáveis locais e globais, os tipos e os valores delas.

• No Console, gere variáveis e objetos difíceis de acessar em Escopo:

  • Variáveis profundasmente aninhadas, por exemplo, itens indexados em matrizes grandes.
  • Objetos complexos, incluindo aqueles que podem ser acessados com ponteiros (->). Expanda-os para inspecionar.

• Em Fontes > Scope, clique no ícone para abrir o Memory Inspector e inspecionar os bytes brutos da memória do objeto. Para saber mais, consulte Inspeção de memória do WebAssembly.

Performance do perfil

Com o DevTools configurado e aberto, o código executado pelo Chrome não é otimizado. Ela está em níveis menores para oferecer uma experiência de depuração melhor.

Nesse caso, não é possível confiar em console.time() e performance.now() no seu código para criar o perfil de desempenho. Em vez disso, use o painel Desempenho para criar o perfil.

Como alternativa, você pode executar o código de criação de perfil sem abrir o DevTools e abri-lo para inspecionar as mensagens no Console.

Separar as informações de depuração

Para acelerar o carregamento e ainda ter uma experiência de depuração melhor, você pode dividir as informações de depuração em um arquivo .wasm separado. Para saber mais, consulte Depuração de WebAssembly mais rápida.

É possível manter esse arquivo localmente ou hospedá-lo em um servidor separado. Para fazer isso com o Emscripten, transmita a flag -gseparate-dwarf=<filename> e especifique o caminho para o arquivo:

emcc -g source.cc -o app.html \
     -gseparate-dwarf=temp.debug.wasm \
     -s SEPARATE_DWARF_URL=[file://local/path/to/temp.debug.wasm] | [URL]

Criar e depurar em diferentes máquinas

Se você criar em uma máquina com um sistema operacional (contêiner, VM ou servidor remoto) diferente daquele na máquina em que executa o Chrome, talvez seja necessário mapear manualmente os caminhos dos arquivos de depuração.

Por exemplo, se o projeto estiver localmente em C:\src\project, mas tiver sido criado em um contêiner do Docker com o caminho /mnt/c/src/project, faça o seguinte:

1. Acesse chrome://extensions/, encontre a extensão C/C++ DevTools (DWARF) e clique em Detalhes > Opções de extensão.
2. Especifique os caminhos de arquivo antigo e novo.

Saiba mais

Confira o blog de engenharia do Chrome DevTools para saber mais sobre a depuração com o WebAssembly:

• Como depurar o WebAssembly com ferramentas modernas
• Depuração mais rápida do WebAssembly
• Introdução ao Inspetor de memória
• Como estender o Inspetor de memória para depuração C/C++