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:
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.
Instale a extensão C/C++ DevTools Support (DWARF) do Chrome.
Depuração
Com o DevTools configurado, depure seu código:
- 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. - É possível agrupar os arquivos criados para facilitar a navegação. Em Sources, marque > Page > > Group by Authored/Deployed .
- Selecione o arquivo de origem original 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.
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:
- Acesse
chrome://extensions/
, encontre a extensão C/C++ DevTools Support (DWARF) e clique em Details > Extension options. - 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: