Google reconstruye Dart DevTools desde cero en Flutter

El aleteo es un marco de programación multiplataforma, con el objetivo de resolver los problemas de desarrollar aplicaciones multiplataforma sin el desorden del código no nativo. Con conocimiento del lenguaje de programación Dart, un desarrollador puede crear aplicaciones para Android, iOS, web y escritorio con una interfaz de usuario unificada en todos. Aleteo 1.9 trajo soporte para macOS y Catalina en un estado alfa mientras que el La versión v1.12 maduró su soporte más allá del estado pre-alfa y el v1.17 de Flutter y v2.8 de Dart marcó sus primeros lanzamientos estables en 2020. Hoy, Google lanza una nueva versión de DevTools para el código de Dart y Flutter, que ha sido reconstruida desde cero en Flutter y viene con varias mejoras.

En el anuncio anterior, Google mencionó su intención de cambiar la versión actual de Dart DevTools por una nueva versión de Flutter. Esto sucedió ahora que las nuevas DevTools se reconstruyeron desde cero en Flutter. Esta nueva versión de DevTools añade mejoras como cambios en las páginas de rendimiento y memoria, así como una página de red completamente nueva.

Pero ¿por qué reconstruir algo cuando todavía funciona? El equipo detrás de Flutter afirma que los beneficios de productividad son importantes cuando se construye un alto rendimiento. UI, y la mejor manera de demostrar confianza en estas afirmaciones es adoptar las mismas herramientas para ellos mismos. La reconstrucción en Flutter también permite a los desarrolladores seleccionar un modelo de distribución después de escribir el código, lo que es una desviación del actual diagrama de flujo de toma de decisiones en el que el modelo de distribución dictaría la código.

DevTools se envía como una aplicación web que facilita la integración de la herramienta en la experiencia de herramientas existente en todos los plataformas de destino e IDE. DevTools es un conjunto independiente de herramientas que se ejecuta en el navegador y funciona para aplicaciones móviles, de escritorio y web. aplicaciones.

DevTools incorpora las siguientes características:

• Inspector de aleteo: una herramienta para visualizar y explorar árboles de widgets. Puede seleccionar widgets en su aplicación en ejecución, ralentizar todas las animaciones, ver líneas base de texto y más.
  • Una de las nuevas características es el Explorador de diseño, que puede encontrar en la pestaña Inspector de Flutter junto al Árbol de detalles. Layout Explorer te permite inspeccionar el modelo de diseño flexible de Flutter. El equipo da un ejemplo de cómo esta herramienta puede ayudar a depurar por qué una fila de widgets no se ve como el desarrollador esperaba, por ejemplo.

• Vista de línea de tiempo: muestra los tiempos de construcción para cada cuadro y un gráfico de llamas. Esto facilita la identificación de marcos problemáticos en contexto.
  • Este panel ahora incorpora el nuevo botón Seguimiento de compilaciones de widgets que agrega tiempos de compilación de todos los widgets en su aplicación a la línea de tiempo (a expensas del rendimiento de la creación de su perfil, por lo que no aparece por por defecto). Esto es útil cuando intentas averiguar qué widgets, exactamente, están detrás de un fotograma lento.

• Vista de la memoria: le muestra cómo su aplicación está usando la memoria en un momento dado.
  • Esta vista ahora muestra un mapa de calor de la memoria asignada y también permite realizar un seguimiento de la memoria de la plataforma.

• Vista de rendimiento: Este es un perfilador de CPU tradicional. Le permite grabar una sesión de su aplicación y ver en qué funciones la CPU pasó la mayor parte de su tiempo. Puede utilizar esto para decidir dónde dedicar su tiempo a optimizar.
• DevTools incluso incluye el suyo propio Depurador. Esto puede resultar útil si no está utilizando un IDE pero aún desea tener la opción de agregar puntos de interrupción, recorrer el código, echar un vistazo a los valores de las variables, etc.

• Vista de red: esto es completamente nuevo.
  • Como su nombre lo indica, le permite inspeccionar el tráfico de la red. Puede ver el historial completo de solicitudes que realizó su aplicación desde que se inició y obtener información detallada sobre cada una. Esto le libera de tener que registrar estos eventos por su cuenta cuando intenta depurar un problema de red.
  • La pestaña Red muestra actualmente el tráfico HTTP; Las mejoras futuras incluyen mostrar Tráfico general de E/S de socket.
  • Las solicitudes de red también se muestran en la vista de línea de tiempo para que pueda verlas en contexto.
• Vista de registro: muestra eventos de su aplicación y el marco. Con él, puede filtrar mensajes fácilmente (por ejemplo, puede especificar "-gc" para filtrar los eventos del Recolector de basura o "flutter.frame" para mostrar solo eventos de fotogramas). En Dart, registrar mensajes puede ser estructurado, y la vista Registro hace uso de eso.

Para hacer un uso completo de DevTools, puede leer el documentación. Si encuentra algún error o si desea votar sobre nuevas funciones, puede hacerlo en GitHub.