# Dart DevTools: Tu Navaja Suiza
Dart DevTools es un conjunto de herramientas de depuración y perfilado (profiling) que se ejecutan en el navegador. Son esenciales para diagnosticar problemas de rendimiento, layout y memoria.
## Herramientas Principales
### 1. Flutter Inspector
Visualiza y explora el árbol de widgets en tiempo real.
- **Select Widget Mode:** Toca un widget en tu app y velo en el árbol.
- **Layout Explorer:** Visualiza diagramas de Flex (Row/Column) para entender por qué un layout se rompe o cómo se distribuye el espacio.
- **Show Guidelines:** Dibuja líneas guía en la app.
### 2. Performance View (Timeline)
Analiza el rendimiento cuadro por cuadro (frame by frame).
- **UI Thread:** Muestra cuánto tarda Dart en construir y maquetar.
- **Raster Thread:** Muestra cuánto tarda la GPU en pintar.
- **Jank:** Si una barra supera los 16ms (60fps), se marca en rojo. Significa que hubo un "tirón".
### 3. Memory View
Detecta fugas de memoria (leaks).
- Gráfico de uso de memoria (Heap).
- **Snapshot:** Toma una foto de todos los objetos vivos.
- **Allocation Profile:** Mira qué tipos de objetos se están creando más.
### 4. Network View
Inspecciona todo el tráfico HTTP/HTTPS (como la pestaña Network de Chrome).
- Ver headers, request body y response body.
- Tiempos de latencia.
### 5. CPU Profiler
Graba una sesión y ve exactamente en qué funciones pasa más tiempo la CPU.
- **Flame Chart:** Gráfico visual de la pila de llamadas.
- Útil para encontrar métodos lentos que bloquean el hilo principal.
## Cómo abrir DevTools
- **Desde VS Code:** Comando "Dart: Open DevTools" o clic en el texto "Dart DevTools" en la barra de estado cuando la app corre.
- **Desde Terminal:** Al correr `flutter run`, presiona `v`.
## Debugging Programático
### `debugPrint()`
Usa `debugPrint` en lugar de `print` en Flutter. `print` puede truncar mensajes largos en Android, `debugPrint` hace throttling para evitar saturar el log.
### `debugger()`
Inserta un breakpoint programático.
```dart
import 'dart:developer';
void myFunction() {
if (somethingWrong) {
debugger(); // Pausa la ejecución aquí si DevTools está conectado
}
}
```
### Flags de Visualización
Puedes activar ayudas visuales desde código (o DevTools):
```dart
import 'package:flutter/rendering.dart';
void main() {
debugPaintSizeEnabled = true; // Dibuja bordes en todos los widgets
debugPaintBaselinesEnabled = true; // Muestra líneas base de texto
debugPaintPointersEnabled = true; // Muestra toques
runApp(MyApp());
}
```
## Conclusión
No adivines por qué tu app es lenta o por qué el layout no funciona. **Mide y observa** con DevTools.
- ¿Layout roto? -> Inspector.
- ¿App lenta? -> Performance View.
- ¿Crash por memoria? -> Memory View.
Este apartado profundiza en los conceptos clave, proporcionando ejemplos prácticos y mejores prácticas para su aplicación en proyectos reales.
Al comprender estos detalles, podrás diseñar soluciones más robustas, mantenibles y escalables en tus aplicaciones Flutter y Dart.