Flutter Depuración y DevTools
Esta sección presentará las herramientas de depuración de Flutter y las técnicas de depuración comunes.
Introducción a Flutter DevTools
Flutter DevTools es un conjunto de herramientas para depurar y analizar aplicaciones Flutter.
Iniciar DevTools
$ flutter run
Después de ejecutar la aplicación, la terminal mostrará la URL de DevTools, normalmentehttp://127.0.0.1:9100
Comandos comunes
| Comando | Descripción |
|---|---|
| flutter doctor | Comprobar la configuración del entorno de desarrollo |
| flutter analyze | Análisis estático de código |
| flutter test | Ejecutar pruebas |
print y debugPrint
Ejemplo: salida básica de depuración
// Impresión básica
print('Hello Debug'); // Salida a la consola
// debugPrint evita la truncación de texto largo
debugPrint('Este es un texto muy largo que se puede imprimir completamente sin ser truncado');
// Impresión condicional
if (debugMode) {
print('Información de depuración');
}
// Imprimir objeto (requiere toString)
final user = {'name': 'Zhang San', 'age': 25};
print('Información del usuario: $user'); // Salida: Información del usuario: {name: Zhang San, age: 25}
print('Hello Debug'); // Salida a la consola
// debugPrint evita la truncación de texto largo
debugPrint('Este es un texto muy largo que se puede imprimir completamente sin ser truncado');
// Impresión condicional
if (debugMode) {
print('Información de depuración');
}
// Imprimir objeto (requiere toString)
final user = {'name': 'Zhang San', 'age': 25};
print('Información del usuario: $user'); // Salida: Información del usuario: {name: Zhang San, age: 25}
Aserción - assert
Las aserciones se usan para verificar condiciones durante el desarrollo y solo se activan en modo depuración.
< h2 class="example">Ejemplo: Uso de aserciones
// Aserción simple
assert(user != null, 'El usuario no puede estar vacío');
// Validación de parámetros de función
void setAge(int age) {
// La edad debe ser mayor que 0
assert(age > 0, 'La edad debe ser mayor que 0');
this.age = age;
}
// Aserción en la construcción de la UI (solo en desarrollo)
Widget build(BuildContext context) {
// Asegurar que context no sea null
assert(context != null);
// Asegurar que haya un Scaffold padre
assert(debugCheckHasMaterial(context));
return Scaffold(...);
}
assert(user != null, 'El usuario no puede estar vacío');
// Validación de parámetros de función
void setAge(int age) {
// La edad debe ser mayor que 0
assert(age > 0, 'La edad debe ser mayor que 0');
this.age = age;
}
// Aserción en la construcción de la UI (solo en desarrollo)
Widget build(BuildContext context) {
// Asegurar que context no sea null
assert(context != null);
// Asegurar que haya un Scaffold padre
assert(debugCheckHasMaterial(context));
return Scaffold(...);
}
Depuración con puntos de interrupción
Para depurar, establece puntos de interrupción en VS Code o Android Studio.
Depuración en VS Code
- Haz clic a la izquierda del número de línea para establecer un punto de interrupción
- Pulsa F5 o haz clic en el botón de depuración para iniciar la depuración
- Usa la barra de herramientas de depuración para controlar la ejecución del programa
Comandos comunes de puntos de interrupción
| Acción | Descripción |
|---|---|
| Continue / F5 | Continuar la ejecución hasta el siguiente punto de interrupción |
| Step Over / F10 | Ejecutar paso a paso, sin entrar en funciones |
| Step Into / F11 | Ejecutar paso a paso, entrando en funciones |
| Step Out / Shift+F11 | Salir de la función actual |
Flutter Inspector
Flutter Inspector es parte de DevTools, se usa para visualizar e inspeccionar el árbol de widgets.
Funciones principales
- Widget Tree: Ver la jerarquía de widgets
- Layout Explorer: Verificar las restricciones de diseño
- Performance Overlay: Mostrar métricas de rendimiento
Depuración de problemas comunes
Ejemplo: depurar por qué la UI no se actualiza
// Problema: la UI no se actualiza
// Causa: no se llamó a setState después de modificar el estado
// Ejemplo incorrecto
void _increment() {
_counter++; // ¡El estado ha cambiado, pero la UI no se actualizará!
}
// Ejemplo correcto
void _increment() {
setState(() {
_counter++; // Debe llamarse a setState
});
}
// Problema: gestión de estado desordenada
// Sugerencia: usar Provider u otra solución de gestión de estado
// Causa: no se llamó a setState después de modificar el estado
// Ejemplo incorrecto
void _increment() {
_counter++; // ¡El estado ha cambiado, pero la UI no se actualizará!
}
// Ejemplo correcto
void _increment() {
setState(() {
_counter++; // Debe llamarse a setState
});
}
// Problema: gestión de estado desordenada
// Sugerencia: usar Provider u otra solución de gestión de estado
Otras extensionesHerramientas comunes de depuración: print para registrar logs, Inspector para inspeccionar el árbol de widgets, Timeline para analizar el rendimiento.