Depurando aplicações web Dart

Você pode depurar aplicações web Dart usando sua IDE Dart, o Dart DevTools, e ferramentas do navegador, como o Chrome DevTools.

• Lógica e estado da aplicação: use o depurador embutido da sua IDE ou o Dart DevTools para definir breakpoints em arquivos .dart, inspecionar variáveis e avaliar expressões Dart.
• DOM, CSS e atividade de rede: use as ferramentas de desenvolvedor do navegador, como o Chrome DevTools.

A forma mais rápida de depurar uma aplicação web Dart durante o desenvolvimento é usar uma IDE com suporte a Dart, como VS Code ou IntelliJ IDEA. Abra seu projeto, defina breakpoints na margem do editor e inicie uma sessão de depuração. O editor compila sua aplicação com dartdevc, abre o Chrome e conecta o depurador automaticamente.

Para inspecionar os arquivos Dart com source map diretamente no Chrome DevTools a qualquer momento, pressione Control+Shift+I (Command+Option+I no macOS). O Chrome usa source maps para exibir seus arquivos .dart originais em vez do JavaScript ou WebAssembly compilado.

Para depurar pela linha de comando usando o Dart SDK mais recente e o Google Chrome, ative globalmente a ferramenta de linha de comando webdev com dart pub global:

$ dart pub global activate webdev

1. No diretório raiz da sua aplicação web Dart, busque as dependências do pacote:

   $ dart pub get
   

   content_copy

2. Inicie o servidor de desenvolvimento em modo de depuração (opcionalmente passe --auto restart para fazer hot restart quando os arquivos mudarem):

   • Abra uma nova instância de depuração do Chrome:

     $ webdev serve --debug --auto restart
     

     content_copy

   • Use uma janela do Chrome já aberta (requer a Dart Debug Extension):

     $ webdev serve --debug-extension --auto restart
     

     content_copy

3. Abra http://localhost:8080 no Chrome, caso ainda não esteja aberto.

4. Abra o Dart DevTools:

   • Com --debug, pressione Alt+D (Option+D no macOS).
   • Com --debug-extension, clique no ícone do Dart na barra de ferramentas do Chrome.

5. Na aba Debugger, clique no número de uma linha do seu arquivo .dart para definir um breakpoint e, em seguida, acione esse trecho de código na aplicação. Quando a execução pausar, inspecione as variáveis no painel Variables e avance pelo código com Step In, Step Over e Step Out.

6. Abra a visualização Logging para inspecionar stdout, stderr e eventos do sistema.

Para executar testes unitários no navegador, passe -p (--platform) para o dart test:

$ dart test -p chrome

Você também pode usar o Firefox (-p firefox) ou o Safari (-p safari).

Para pausar a execução depois do carregamento, de modo que você possa abrir o DevTools do navegador e definir breakpoints antes de os testes rodarem, passe --pause-after-load:

$ dart test -p chrome --pause-after-load

Para coletar cobertura de código dos testes web em JavaScript (dart2js) no Chrome, passe -p chrome para o test_with_coverage (requer o package:coverage 1.16.0 ou superior):

$ dart run coverage:test_with_coverage -p chrome

Chrome, Edge, Firefox e Safari oferecem suporte a source maps tanto para builds de produção em JavaScript (.js.map) quanto em WebAssembly (.wasm.map).

Ao compilar para WebAssembly com dart compile wasm, o compilador gera um source map <nome>.wasm.map junto com <nome>.wasm e remove os nomes estáticos de símbolos do binário .wasm por padrão (e minifica os nomes de tipos em tempo de execução a partir de -O2). Passe --no-strip-wasm para manter os nomes de símbolos estáticos legíveis nos stack traces e flamecharts do DevTools do navegador:

$ dart compile wasm -O2 --no-strip-wasm web/main.dart -o build/main.wasm

Garanta que seu servidor web sirva o arquivo .js.map ou .wasm.map gerado junto com a saída compilada, para que o navegador consiga localizar os arquivos Dart.

Seja qual for o navegador, ative pausa pelo menos em exceções não tratadas. Para frameworks como dart:async que envolvem código do usuário em blocos try-catch, ative a pausa em todas as exceções para revelar erros capturados.

1. Abra o Chrome DevTools.
2. Confirme que os source maps estão habilitados (ativados por padrão), conforme descrito em Mapear código pré-processado para código-fonte.
3. Ative a pausa em todas as exceções ou em exceções não tratadas, conforme descrito em Pausar seu código com breakpoints.
4. Recarregue sua aplicação.

1. Abra o DevTools do Microsoft Edge (F12).
2. Na ferramenta Sources, abra o painel Breakpoints e habilite Pause on uncaught exceptions (ou Pause on caught exceptions), conforme descrito em Pausar seu código com breakpoints.
3. Recarregue sua aplicação para inspecionar os arquivos .dart com source map na ferramenta Sources.

1. Abra as Ferramentas de Desenvolvedor do Firefox.

2. Habilite Pause on exceptions:

   

3. Recarregue sua aplicação para ver os arquivos com source map na aba Debugger.

1. Ative o menu Develop, conforme descrito em Habilitando o Web Inspector.
2. Habilite breakpoints em todas as exceções ou em exceções não tratadas, veja Adicionar um breakpoint JavaScript em Safari Developer Help.
3. Recarregue sua aplicação.

• IDEs e editores Dart
• Documentação do Dart DevTools
• Documentação da ferramenta webdev
• Pacote webdev no pub.dev