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:
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.
Instale a extensão DWARF do Chrome para C/C++ DevTools.
Depurar
Com o DevTools configurado, depure o código:
- 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. - Se quiser, agrupe os arquivos de sua autoria para facilitar a navegação. Em Fontes, marque
> Página >
> Grupo por criado/implantado
.
- Selecione o arquivo de origem na árvore de arquivos. Nesse caso,
mandelbrot.cc
. 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.
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:
- Acesse
chrome://extensions/
, encontre a extensão C/C++ DevTools (DWARF) e clique em Detalhes > Opções de extensão. - 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: