Hoy, lanzamos una nueva versión de Dart DevTools, que es nuestro conjunto de herramientas para depurar y analizar el rendimiento del código de Dart y Flutter. Ha sido reconstruido desde cero usando Flutter. Esta versión agrega varias mejoras, como actualizaciones de la página de memoria y rendimiento, y una nueva página web.
Mucha gente conoce la función de recarga en caliente de Flutter, que le permite modificar la aplicación móvil mientras se está ejecutando. Pero la recarga en caliente es solo una de las herramientas que proporcionamos. Las herramientas que proporcionamos pueden ayudarlo a escribir, probar, depurar y analizar sus aplicaciones.
Primero que nada, tomemos un momento para discutir por qué deberíamos reconstruir la intención original de DevTools. La respuesta corta es productividad y calidad. El equipo de Flutter comprende las ventajas de productividad de Flutter en la creación de interfaces de usuario hermosas y de alto rendimiento; esperamos que también podamos disfrutar de estas ventajas. Esta productividad nos permite no solo reconstruir DevTools, sino también agregar grandes características nuevas en el camino.
Elegimos publicar DevTools como una aplicación web porque nos facilita la integración en la experiencia de la herramienta existente en todas las plataformas e IDE de destino. La construcción centrada en la red también nos permite pensar en los problemas desde la perspectiva del cliente; al hacerlo, comprendemos (y solucionamos) algunos problemas de rendimiento, como el rendimiento de desplazamiento.
También hemos estado evaluando los beneficios de lanzar DevTools como una aplicación de escritorio compilada y, hasta ahora, los resultados son prometedores. Uno de los principales beneficios de elegir Flutter es que elegir el modo de distribución es algo que podemos hacer después de escribir el código, no la primera decisión que tenemos que tomar. Muchos clientes también nos dijeron que esta es una habilidad atractiva de Flutter.
Ahora que hemos discutido un poco sobre el pasado reciente y el nuevo futuro de DevTools, profundicemos en una descripción general rápida de todas las herramientas principales disponibles para cada desarrollador de Flutter. Porque DevTools no es la única herramienta que merece su atención.
Conocimiento básico
Por supuesto, existen flutterherramientas que pueden ejecutar su aplicación en modo de depuración, realizar recargas en caliente, compilar APK e IPA, etc. flutterLa herramienta está escrita en Dart y se ejecuta en la línea de comandos, por lo que no importa qué sistema operativo o editor prefiera, puede usar Flutter.
Dart Analysis Server proporciona análisis estático e inteligencia en varios IDE. Esto significa que puede completar el código ...
Esto resulta ser VS Code, pero todos los ejemplos aquí también se pueden usar en Android Studio, por supuesto.
... Los errores están resaltados y vinculados a la documentación sobre cómo solucionarlos ...
Para los errores estáticos más comunes, el IDE se vinculará a una versión más larga del mensaje de error, que incluye código de muestra y correcciones comunes.
... Y verificación de código inteligente.
Aquí, el analizador detectó que se creó un sumidero pero nunca se cerró; esto puede ser una pérdida de memoria.
El servidor de análisis también puede utilizar el protocolo del servidor de idiomas , lo que significa que todas las herramientas de desarrollo (hay muchas) que lo utilizan pueden admitirlo fácilmente.
Asistente de código de interfaz de usuario
Con Flutter, puede crear la interfaz de usuario en código creando un árbol de widgets. Esto significa que existe una gran cantidad de código de Dart en forma de constructores anidados, como los siguientes.
return MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome'),
),
body: Column(
...
),
),
);
复制代码Las herramientas de Flutter facilitan el manejo de dicho código. La guía de la interfaz de usuario destaca el árbol de widgets que está creando.
La línea de la izquierda, llamada guía de la interfaz de usuario, visualiza claramente el árbol de widgets.
Los siguientes comentarios pueden mostrar qué corchete de cierre pertenece a qué widget.
Los comentarios aquí son mostrados por el IDE, pero en realidad no son parte del archivo.
La refactorización inteligente puede ayudarlo a modificar el árbol en varios trazos, como envolver una parte de un nuevo nodo principal ...
Envuelva un IconButton con un SizedBox.
... Y mueve el widget.
herramientas de desarrollo
También está DevTools, que es un conjunto de herramientas independientes que se ejecutan en el navegador. Proporcionan telemetría y funciones adicionales que no es práctico mostrar en el IDE.
DevTools se abre en una ventana del navegador.
Las DevTools que lanzamos esta semana están escritas en Flutter. (Se escribieron anteriormente en Dart, pero no usaban el marco Flutter). Esta es una reescritura completa desde cero, lo que brinda oportunidades para mejorar la interfaz de usuario y agregar nuevas funciones.
La primera pestaña es Flutter Inspector , que es una herramienta para visualizar y explorar el árbol de widgets de Flutter. Desde aquí, puede seleccionar widgets en la aplicación en ejecución, ralentizar todas las animaciones, ver líneas de base de texto, etc.
Una de las nuevas funciones es el explorador de diseño, que puedes encontrar en la pestaña del inspector de Flutter junto al árbol de detalles. El Explorador de diseño te permite comprobar el modelo de diseño flexible de Flutter. Por ejemplo, cuando no está seguro de por qué una fila de widgets no se ve como esperaba, o por qué recibe el error "RenderFlex desbordado 42 píxeles", esto puede salvarle la vida.
Junto a la pestaña Flutter Inspector, encontrará tres pestañas dedicadas al análisis de rendimiento: vista de línea de tiempo, vista de memoria y vista de rendimiento.
La vista de línea de tiempo ahora muestra el tiempo de construcción de cada fotograma y el gráfico de llama. Esto facilita la identificación de marcos problemáticos mientras los ve en contexto.
El panel de línea de tiempo también tiene un nuevo botón de compilación de widget de seguimiento, que agrega el tiempo de compilación de todos los widgets en su aplicación a la línea de tiempo (a expensas del rendimiento de la compilación de su perfil, por eso no lo hace de manera predeterminada encender). Esto es útil cuando intenta averiguar qué widgets están causando el marco lento.
La vista de memoria le permite ver el uso de memoria de su aplicación en un momento específico. La vista ahora muestra un mapa de calor de la memoria asignada y permite el seguimiento de la memoria de la plataforma.
La vista de rendimiento es un generador de perfiles de CPU tradicional. Le permite grabar una sesión de la aplicación y ver en qué funciones dedica la CPU la mayor parte de su tiempo, en general. Suele utilizarse para decidir dónde realizar el trabajo de optimización.
DevTools incluso incluye su propio depurador . Esto puede ser útil si no usa un IDE para el desarrollo, pero aún desea elegir agregar puntos de interrupción, recorrer el código, echar un vistazo a los valores de las variables, etc.
La siguiente pestaña es nueva. La vista de red le permite comprobar, lo adivinó, el tráfico de red. Puedes ver todo el historial de solicitudes de tu aplicación desde que se inició, y la información detallada de cada solicitud. Esto le evita registrar estos eventos usted mismo cuando intenta depurar problemas de red. La pestaña de red muestra actualmente el tráfico HTTP; las mejoras futuras incluyen la visualización del tráfico de E / S de socket general .
Ahora también puede encontrar solicitudes de red en la vista "línea de tiempo" para poder verlas en contexto.
La vista de registro muestra eventos de su aplicación y marco. Con él, puede filtrar mensajes fácilmente (por ejemplo, puede especificar -gcfiltrar los eventos del recolector de basura o flutter.framemostrar solo los eventos de marco). En Dart, los mensajes de registro se pueden estructurar y la vista de registro se aprovecha de esto.
DevTools para aplicaciones móviles, aplicaciones de escritorio y aplicaciones web.
Reescribir DevTools a Flutter tiene muchos beneficios: mayor productividad, seguir el punto de vista del cliente y elegir libremente la plataforma de destino. Hay un beneficio que aún no hemos mencionado: reescribir DevTools en Flutter invita a la comunidad a contribuir más fácilmente. DevTools se desarrolló en la apertura , pero hoy, la mayoría de los usuarios estarán familiarizados con su estructura (desde lib/main.dartel runApp(DevToolsApp(...))principio).
Visión de conjunto
Las herramientas son fundamentales para la experiencia de los desarrolladores de Flutter. Invertimos mucho dinero todos los días para mejorarlo. Pero solo podemos lograrlo a través de sus comentarios.
Por lo tanto, actualice a las últimas DevTools hoy y pruébelas en su aplicación. Lea la documentación para comprender toda la esencia oculta. Si encuentra un error, informe el problema o vote por la nueva función en GitHub .
Esperamos que las nuevas DevTools hagan que su experiencia de desarrollo de Flutter sea más agradable.