Depurar aplicaciones web de Dart

Puedes usar un IDE de Dart, Dart DevTools y herramientas de navegador como Chrome DevTools para depurar tus aplicaciones web de Dart.

• Para depurar la lógica de tu aplicación, utiliza tu IDE, Dart DevTools o las herramientas del navegador. Dart DevTools tiene mejor soporte que las herramientas de navegador para inspeccionar y recargar automáticamente el código de Dart.
• Para depurar la apariencia (HTML/CSS) y el rendimiento de tu aplicación, utiliza tu IDE o herramientas de navegador como Chrome DevTools.

Para servir tu aplicación, utiliza webdev serve (ya sea en la línea de comandos o a través de tu IDE) para iniciar el compilador de desarrollo de Dart. Para habilitar Dart DevTools, agrega la opción --debug o --debug-extension (en la línea de comandos o a través de tu IDE):

$ webdev serve --debug

Cuando ejecutes tu aplicación utilizando el indicador --debug de webdev, puedes abrir Dart DevTools presionando Alt+D (u Option+D en macOS).

Para abrir Chrome DevTools, presiona Control+Shift+I (o Command+Option+I en macOS). Si deseas depurar tu aplicación utilizando Chrome DevTools, puedes usar mapas de origen (source maps) para mostrar tus archivos de origen de Dart en lugar del JavaScript que produce el compilador. Para obtener más información sobre el uso de Chrome DevTools, consulta la documentación de Chrome DevTools.

Para utilizar Dart DevTools o Chrome DevTools para depurar una aplicación web de Dart, necesitas el siguiente software:

• Google Chrome.
• SDK de Dart, versión 2.0.0 o superior.
• One of the following development environments:
  • Línea de comandos: Paquetes de herramientas de línea de comandos de Dart como webdev (requerido tanto para Dart como para Chrome DevTools) y devtools (requerido para Dart DevTools).
    o bien
  • Un IDE o editor de Dart que admita el desarrollo web.
• Una aplicación web de Dart para depurar.

Esta sección te guía a través de los conceptos básicos del uso de Dart DevTools para depurar una aplicación web. Si ya tienes una aplicación que está lista para depurar, puedes omitir la creación de la aplicación de prueba (paso 1), pero deberás ajustar las instrucciones para que coincidan con tu aplicación.

1. Opcional: Clona el repositorio de webdev, para que puedas usar su aplicación de ejemplo para jugar con Dart DevTools.

2. Opcional: Instala la Dart Debug Extension para que puedas ejecutar tu aplicación y abrir Dart DevTools en una instancia de Chrome que ya se esté ejecutando.

3. En el directorio superior de tu aplicación, ejecuta dart pub get para obtener sus dependencias.

   $ cd example
   $ dart pub get
   

   content_copy

4. Compila y sirve la aplicación en modo de depuración, utilizando tu IDE o webdev en la línea de comandos.

   Si estás usando webdev en la línea de comandos, el comando a utilizar depende de si deseas (o necesitas) ejecutar la aplicación y el depurador en una instancia de Chrome que ya se esté ejecutando.

   • Si tienes instalada la Dart Debug Extension y deseas utilizar una instancia existente de Chrome para depurar:

     $ webdev serve --debug-extension
     

     content_copy

   • De lo contrario, utiliza el siguiente comando, el cual inicia una nueva instancia de Chrome y ejecuta la aplicación:

     $ webdev serve --debug
     

     content_copy

5. Si tu aplicación aún no se está ejecutando, ábrela en una ventana del navegador Chrome.
   Por ejemplo, si usas webdev serve --debug-extension sin argumentos, abre http://127.0.0.1:8080.

6. Abre Dart DevTools para depurar la aplicación que se está ejecutando en la ventana actual.

   • Si la Dart Debug Extension está instalada y utilizaste el indicador --debug-extension en webdev, haz clic en el logotipo de Dart en la esquina superior derecha de la ventana del navegador.

   • Si utilizaste el indicador --debug en webdev, presiona Alt+D (u Option+D en macOS).

   Aparece la ventana de Dart DevTools y muestra el código fuente del archivo principal de tu aplicación.

7. Establece un punto de interrupción (breakpoint) dentro de un temporizador o manejador de eventos haciendo clic a la izquierda de una de sus líneas de código.
   Por ejemplo, haz clic en el número de línea de la primera línea dentro de un manejador de eventos o de una devolución de llamada (callback) del temporizador.

8. Desencadena el evento que provoca la llamada a la función. La ejecución se detiene en el punto de interrupción (breakpoint).

9. En el panel Variables, inspecciona los valores de las variables.

10. Reanuda la ejecución del script y vuelve a desencadenar el evento o presiona Pause (Pausar). La ejecución se pausa de nuevo.

11. Prueba a ir paso a paso por el código línea por línea utilizando los botones Step In, Step Over y Step Out.

12. Modifica tu código fuente y recarga la ventana de Chrome que está ejecutando la aplicación. La aplicación se vuelve a compilar y se recarga rápidamente. Hasta que se solucione el problema 1925 (issue 1925), perderás tus puntos de interrupción al recargar la aplicación.

13. Haz clic en el botón Logging (Registro) para ver la salida estándar (stdout), la salida de errores (stderr) y los registros del sistema.

Si estás utilizando la línea de comandos en lugar de un IDE o un editor compatible con Dart, entonces necesitas la herramienta webdev. Dart DevTools viene provisto por el SDK.

$ dart pub global activate webdev

Si tu variable de entorno PATH está configurada correctamente, ahora puedes utilizar estas herramientas en la línea de comandos:

$ webdev --help
A tool to develop Dart web projects.
...

Para obtener información sobre cómo configurar la variable PATH, consulta la documentación de dart pub global.

Cada vez que actualices el SDK de Dart, actualiza las herramientas activándolas nuevamente:

$ dart pub global activate webdev     # update webdev

Esta sección ofrece consejos para depurar código compilado para producción en Chrome, Firefox, y Safari. Solo puedes depurar código JavaScript en navegadores que admitan mapas de origen (source maps), como Chrome.

Cualquiera que sea el navegador que utilices, debes habilitar la pausa en al menos las excepciones no detectadas, y quizás en todas las excepciones. Para los frameworks como dart:async que envuelven el código de usuario en bloques try-catch, recomendamos pausar en todas las excepciones.

Para depurar en Chrome:

1. Abre la ventana Developer Tools (Herramientas de desarrollador), como se describe en la documentación de Chrome DevTools.
2. Activa los mapas de origen (source maps), como se describe en el video SourceMaps in Chrome.
3. Habilita la depuración, ya sea en todas las excepciones o solo en las excepciones no detectadas, como se describe en Cómo establecer puntos de interrupción.
4. Recarga tu aplicación.

Para depurar en Edge:

1. Actualiza a la última versión de Edge.
2. Load Developer Tools (F12).
3. Recarga la aplicación. La pestaña del depurador (debugger) muestra los archivos mapeados con el origen.
4. Exception behavior can be controlled through Ctrl+Shift+E; the default is Break on unhandled exceptions.

Para depurar en Firefox:

1. Abre la ventana de Web Developer Tools, como se describe en la documentación de las herramientas para desarrolladores de Firefox.

2. Habilita Pausar en excepciones (Pause on exceptions), como se muestra en la siguiente figura:

   

3. Recarga la aplicación. La pestaña Debugger (Depurador) muestra los archivos mapeados con el origen.

Para depurar en Safari:

1. Activa el menú Desarrollo (Develop), como se describe en el tutorial del Inspector web de Safari (Safari Web Inspector Tutorial).
2. Habilita las interrupciones, ya sea en todas las excepciones o solo en las excepciones no detectadas. Consulta Añadir un punto de interrupción de JavaScript (Add a JavaScript breakpoint) en la ayuda para desarrolladores de Safari (Safari Developer Help).
3. Recarga tu aplicación.

Para obtener más información, consulta lo siguiente:

• Documentación de tu IDE
• Documentación de Dart DevTools
• Documentación de la herramienta webdev
• Documentación del paquete webdev