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 melhor esses aplicativos.

Depois de configurar o DevTools, você pode:

• Inspecione o código original em Sources > 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.

Enquanto isso, você pode:

• Passe o cursor sobre as variáveis no arquivo de origem original e confira os valores.
• Entenda os nomes de função na Pilha de chamadas e as variáveis no Escopo.
• 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 de WebAssembly em C/C++, faça o seguinte:

1. Compilar o 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 mais informações, consulte Como criar projetos com informações de depuração.

2. Instale a extensão do Chrome de suporte ao C/C++ DevTools (DWARF).

Depurar

Com o DevTools configurado, depure seu 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 Origens, marque > Página > > Agrupar por autoria/implantação .
3. Selecione o arquivo de origem na árvore de arquivos. Nesse caso, mandelbrot.cc.

4. Para definir um ponto de interrupção da 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 Origens > Editor, passe o cursor sobre uma variável para conferir o valor dela em uma dica.

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

• Em Origens > Escopo, confira 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 profundamente aninhadas, por exemplo, itens indexados em matrizes grandes.
  • Objetos complexos, incluindo aqueles que você pode acessar com ponteiros (->). Expanda-os para inspecionar.

• Em Origens > Escopo, clique no ícone para abrir o Inspetor de memória e inspecionar os bytes brutos da memória do objeto. Para mais informações, consulte Inspeção de memória do WebAssembly.

Perfil de desempenho

Com o DevTools configurado e aberto, o código executado pelo Chrome não é otimizado. Ele é classificado para oferecer uma experiência de depuração melhor.

Nesse caso, não é possível usar console.time() e performance.now() no código para criar um 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 depois abrir para inspecionar as mensagens no Console.

Separar as informações de depuração

Para acelerar o carregamento e ainda ter uma melhor experiência de depuração, divida as informações de depuração em um arquivo .wasm separado. Para mais informações, consulte Depurar o WebAssembly mais rápido.

É 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 máquinas diferentes

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

Por exemplo, se o projeto estiver em C:\src\project localmente, 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 Details > Extension options.
2. Especifique os caminhos de arquivo antigo e novo.

Saiba mais

Confira o blog de engenharia do Chrome DevTools para mais informações sobre a depuração do WebAssembly:

• Como depurar o WebAssembly com ferramentas modernas
• Depurar o WebAssembly de forma mais rápida
• Conheça o Memory Inspector
• Como estender o Memory Inspector para depuração em C/C++