Depurar o WebAssembly C/C++

Sofia Emelianova

O WebAssembly oferece uma maneira de executar, por exemplo, código C/C++ na Web com 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 as DevTools, você pode:

• Inspecione o código original em Sources > Editor.
• Pausar a execução com pontos de interrupção de linha de código e percorrer 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 delas.
• Entenda os nomes de função na Pilha de chamadas e as variáveis no Escopo.
• Produza propriedades profundamente aninhadas e objetos complexos no 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 para suporte ao C/C++ DevTools (DWARF).

Depurar

Com o DevTools configurado, depure seu código:

1. Abra o DevTools para inspecionar seu site. Para este tutorial, você pode testá-lo nesta página de demonstração, que foi compilada com a flag -g necessária.
2. Opcionalmente, agrupe os arquivos criados para facilitar a navegação. Em Origens, marque > Página > > Agrupar por autoria/implantação .
3. Selecione o arquivo de origem original 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, as variáveis e objetos de saída são difíceis de navegar no Escopo:

  • Variáveis profundamente aninhadas, por exemplo, itens indexados em matrizes grandes.
  • Objetos complexos, incluindo aqueles que podem ser acessados com ponteiros (->). Abra-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 Performance para criar perfis.

Como alternativa, é possível 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 WebAssembly mais rápido.

Você pode 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 o Chrome é executado, 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 Support (DWARF) e clique em Details > Extension options.
2. Especifique os caminhos de arquivo antigos e novos.

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++