Dart DevTools

Dart DevTools é um conjunto de ferramentas de depuração e desempenho para Dart e Flutter. Essas ferramentas são distribuídas como parte da ferramenta dart e interagem com ferramentas como IDEs, dart run e webdev.

A tabela a seguir mostra quais ferramentas você pode usar com tipos comuns de aplicações Dart.

Para informações sobre como usar o Dart DevTools com cada tipo de aplicação (por exemplo, aplicações de linha de comando), clique no tipo de aplicação na linha superior. Para detalhes sobre ferramentas individuais (por exemplo, o debugger), clique no nome da ferramenta na coluna da esquerda.

Como a tabela mostra, o debugger e a logging view são as únicas partes do Dart DevTools disponíveis para todos os tipos de aplicação. Aplicações web não podem usar as views de timeline, memory e performance; em vez disso, elas podem usar ferramentas do navegador, como o Chrome DevTools. O Flutter inspector funciona apenas para aplicações Flutter; outras aplicações web devem usar ferramentas do navegador, como o Chrome DevTools.

Você pode usar o DevTools para realizar depuração em nível de código-fonte ou para visualizar informações gerais de log e diagnóstico de uma aplicação de linha de comando em execução.

Use o comando dart run --observe para executar o arquivo principal da aplicação Dart de linha de comando que você quer depurar ou observar. Opcionalmente, adicione --pause-isolates-on-start, que interrompe automaticamente a execução no início do script.

$ cd path/to/dart/app
$ dart run --pause-isolates-on-start --observe main.dart

The Dart VM service is listening on http://127.0.0.1:8181/afZySiNbDPg=/
The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/afZySiNbDPg=/devtools/#/?uri=ws%3A%2F%2F127.0.0.1%3A8181%2FafZySiNbDPg%3D%2Fws

Anote a URL do Dart DevTools debugger and profiler. Você vai precisar dela no próximo passo.

Copie a URL do Dart DevTools debugger and profiler e cole-a na barra de endereços de uma janela do Chrome.

Quando você acessar essa URL no Chrome, a interface do Dart DevTools aparece, exibindo informações sobre a aplicação de destino. Clique em Debugger para começar a depurar a aplicação.

Configure o VS Code para iniciar aplicações Dart de linha de comando com o DevTools habilitado, para acessar recursos como a view de Timeline.

A tabela a seguir mostra exemplos de configurações de depuração do VS Code para aplicações Dart:

Para habilitar os eventos de timeline, adicione esta configuração ao seu .vscode/launch.json:

{
  "version": "0.2.0",
  "configurations": [
    {
      "name": "Dart with DevTools Timeline",
      "type": "dart",
      "request": "launch",
      "vmAdditionalArgs": [
        "--timeline_streams=VM,Isolate,GC"
      ],
      "program": "main.dart"
    }
  ]
}

Substitua "main.dart" pelo caminho do arquivo principal da sua aplicação.

1. Inicie a depuração no VS Code usando a configuração de launch configurada.

2. No Debug Console ou na saída do terminal do VS Code, procure uma linha semelhante a:

   The Dart DevTools debugger and profiler is available at: http://127.0.0.1:8181/aBcDeFg123=/devtools/#/?uri=...
   

   content_copy

3. Copie a URL do DevTools e cole-a em uma janela do Chrome.

4. No DevTools, visualize a timeline, a memória e a performance da sua aplicação em execução.

Para detalhes sobre como usar o DevTools com uma aplicação Flutter em qualquer plataforma (incluindo web), consulte a documentação do DevTools no flutter.dev.

Para iniciar uma aplicação web de modo que você possa usar o Dart DevTools, use o comando webdev serve com a flag --debug ou --debug-extension:

$ webdev serve --debug

Para mais informações, consulte Depurando aplicações web em Dart.