Depurar o WebAssembly C/C++

Sofia Emelianova

O WebAssembly oferece uma maneira de executar, por exemplo, código C/C++ na Web em velocidade quase nativa e com 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 siga o código-fonte C/C++ original, e não o arquivo binário .wasm compilado.

Enquanto estiver pausado, você pode:

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

Configurar

Para ativar a depuração do WebAssembly em 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 ele 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 C/C++ DevTools Support (DWARF) do Chrome.

Depuração

Com o DevTools configurado, depure seu código:

1. Abra o DevTools para inspecionar seu site. Para este tutorial, você pode testá-la nesta página de demonstração (link em inglês), que foi compilada com a sinalização -g obrigatória.
2. É possível agrupar os arquivos criados para facilitar a navegação. Em Sources, marque > Page > > Group by Authored/Deployed .
3. Selecione o arquivo de origem original 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.

Durante a pausa, tente o seguinte:

• Em Fontes > 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 e os tipos e valores delas.

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

  • Variáveis aninhadas profundamente, por exemplo, itens indexados em grandes matrizes.
  • Objetos complexos, incluindo aqueles que você pode acessar com ponteiros (->). Expanda-os para inspecionar.

• Em Sources > 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 para oferecer uma melhor experiência de depuração.

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 depois abri-lo para inspecionar as mensagens no Console.

Separar as informações de depuração

Para acelerar o carregamento e melhorar a experiência de depuração, divida as informações de depuração em um arquivo .wasm separado. Para saber mais, consulte Como depurar o WebAssembly mais rapidamente.

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 do 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 diferente (contêiner, VM ou servidor remoto) daquele em que executa o Chrome, talvez seja necessário mapear manualmente os caminhos dos arquivos 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 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 (link em inglês)
• Como depurar o WebAssembly mais rapidamente
• Apresentação do Inspetor de memória
• Ampliar o Inspetor de memória para depuração C/C++