Dart DevTools

Dart DevTools es un conjunto de herramientas de depuración y rendimiento para Dart y Flutter. Estas herramientas se distribuyen como parte de la herramienta dart e interactúan con herramientas como IDEs, dart run y webdev.

La siguiente tabla muestra qué herramientas puedes usar con los tipos comunes de aplicaciones de Dart.

Para obtener información sobre el uso de Dart DevTools con cada tipo de aplicación (por ejemplo, aplicaciones de línea de comandos), haz clic en el tipo de aplicación en la fila superior. Para obtener detalles sobre herramientas individuales (por ejemplo, el depurador), haz clic en el nombre de la herramienta en la columna de la izquierda.

Como muestra la tabla, el depurador y la vista de registro (logging view) son las únicas partes de Dart DevTools que están disponibles para todos los tipos de aplicaciones. Las aplicaciones web no pueden usar las vistas de timeline, memoria y rendimiento; en su lugar, pueden usar herramientas del navegador como Chrome DevTools. El inspector de Flutter funciona solo para aplicaciones de Flutter; otras aplicaciones web deben usar herramientas del navegador como Chrome DevTools.

Puedes usar DevTools para realizar depuración a nivel de fuente o para ver información general de diagnóstico y de registro para una aplicación de línea de comandos en ejecución.

Usa el comando dart run --observe para ejecutar el archivo principal de la aplicación de línea de comandos de Dart que deseas depurar u observar. Opcionalmente agrega --pause-isolates-on-start, lo cual detiene automáticamente la ejecución al inicio del 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

Toma nota de la URL de depuración y perfilado de Dart DevTools. La necesitarás en el siguiente paso.

Copia la URL de depuración y perfilado de Dart DevTools y pégala en la barra de direcciones de una ventana del navegador Chrome.

Cuando visitas esa URL en Chrome, aparece la interfaz de usuario de Dart DevTools, mostrando información sobre la aplicación objetivo. Haz clic en Debugger para comenzar a depurar la aplicación.

Configura VS Code para lanzar aplicaciones de línea de comandos de Dart con DevTools habilitado para acceder a características como la vista del Timeline.

La siguiente tabla muestra ejemplos de configuraciones de depuración de VS Code para aplicaciones de Dart:

Para habilitar los eventos del timeline, agrega esta configuración a tu .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"
    }
  ]
}

Reemplaza "main.dart" con la ruta al archivo principal de tu aplicación.

1. Inicia la depuración en VS Code usando la configuración de lanzamiento establecida.

2. En la Consola de depuración de VS Code o en la salida de la terminal, busca una línea similar a:

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

   content_copy

3. Copia la URL de DevTools y pégala en una ventana del navegador Chrome.

4. En DevTools, visualiza el timeline, la memoria y el rendimiento de tu aplicación en ejecución.

Para obtener detalles sobre el uso de DevTools con una aplicación de Flutter para cualquier plataforma (incluyendo la web), consulta la documentación de DevTools en flutter.dev.

Para iniciar una aplicación web de modo que puedas usar Dart DevTools, usa el comando webdev serve con la bandera --debug o --debug-extension:

$ webdev serve --debug

Para obtener más información, consulta Depuración de aplicaciones web de Dart.