DevTools es un conjunto de herramientas para desarrolladores de Flutter y Dart que consta de herramientas de inspección de diseño, herramientas de rendimiento, herramientas de memoria, básicamente todas las herramientas de depuración que necesita para ser un desarrollador de Flutter eficiente y efectivo, agrupadas en un único paquete web.
Uso de DevTools:
Flutter DevTools se puede utilizar para realizar una serie de operaciones. Algunos de ellos se enumeran a continuación:
- Inspección de IU.
- Inspección del estado de la aplicación.
- Diagnosticar el rendimiento no deseado de la interfaz de usuario.
- Diagnosticar problemas con las aplicaciones flutter.
- Uso de DevTools para la creación de perfiles de CPU.
- Creación de perfiles de red para una aplicación.
- Depuración a nivel de fuente de una aplicación.
- Depure problemas de memoria en una aplicación de línea de comandos o Flutter o Dart.
- Ver información general de registro y diagnóstico de una aplicación.
- Analice su código y el tamaño de la aplicación de la aplicación flutter.
Instalación de herramientas de desarrollo:
1. Instale Flutter DevTool en Android Studio
Siga los pasos a continuación para instalar DevTools en su Android Studio:
- Paso 1: instala el complemento Flutter en Android Studio, si aún no lo tienes instalado. Esto se puede hacer usando la página de Complementos normal en la configuración de Android Studio. Una vez que la página de configuración->complementos esté abierta, puede buscar flutter en el mercado e instalar el complemento.
- Paso 2: primero ejecuta una aplicación Flutter. Asegúrese de tener un dispositivo conectado al proyecto y haga clic en los botones de la barra de herramientas Ejecutar o Depurar.
- Paso 3: Inicie DevTools desde la barra de herramientas/menú en su proyecto flutter. Una vez que una aplicación se ejecuta correctamente, inicie DevTools implementando las siguientes instrucciones una por una:
- Abra la acción de la barra de herramientas DevTools desde la vista Ejecutar.
- Acción de la barra de herramientas DevTools visible en la vista Depurar. (si está depurando)
- Acción DevTools del menú Más acciones en la vista Inspector en su proyecto flutter.
2. Instalar DevTools desde VS Code
Siga los pasos a continuación para instalar DevTools desde VS Code:
- Paso 1: para usar DevTools de VS Code, primero instale la extensión Dart y también necesita instalar la extensión Flutter para depurar aplicaciones flutter.
- Paso 2: Inicie una aplicación para depurar su aplicación. Inicie la depuración en VS Code haciendo clic en Ejecutar > Iniciar depuración (F5) .
- Paso 3: si una vez iniciada la depuración, el comando Dart Opens DevTools está disponible en la paleta de comandos de VS Code:
Captura de pantalla que muestra el comando Abrir DevTools:
Cuando ejecute su aplicación por primera vez, se le pedirá que active o actualice DevTools. La siguiente imagen muestra un comando Active DevTools:
Al hacer clic en el botón Abrir para activar el paquete DevTools para su aplicación. Después de esto, DevTools se inicia en su navegador y se conecta automáticamente a su sesión de depuración como se muestra a continuación:
Cuando DevTools esté en estado activo, las verá en la barra de estado de VS Code.
3. Instale DevTools desde la línea de comandos
Si tienes flutter en tu computadora, puedes ejecutar:
flutter pub global activate devtools
El comando anterior instala o actualiza DevTools en su máquina o computadora. Inicie DevTools desde el servidor de aplicaciones. Ejecute el servidor web local. Para ello ejecuta los siguientes comandos:
flutter pub global run devtools
En la línea de comando, la salida se parece a esto:
Serving DevTools at http://127.0.0.1:9100
Inicie una aplicación para depurar:
Inicie una aplicación Flutter o una aplicación de línea de comandos de Dart. El comando para la aplicación flutter:
cd path/to/flutter/app flutter run
Necesitas tener un dispositivo conectado para que flutter run funcione. Después de que se inicia la aplicación, aparece el siguiente mensaje en su terminal:
An Observatory debugger and profiler on Galaxys20 is available at: http://127.0.0.1:50976/Swm0bjIe0hj=/
Tenga en cuenta que esta URL la usaremos para conectar nuestra aplicación a DevTools.
Conecte DevTools a la aplicación de destino:
Una vez que todo esté configurado, la depuración a través de DevTools es muy simple: abrir una ventana del navegador Chrome y navegar al siguiente enlace:
http://localhost:9100
Después de que se abra DevTools, el cuadro de diálogo emergente obtendrá la siguiente vista de registro:
Pegue la URL, que ya anotó al ejecutar su aplicación (por ejemplo, http://127.0.0.1:50976/Swm0bjIe0hg=/) en el cuadro de diálogo de conexión para conectar su aplicación a DevTools para la depuración.
El inspector de aleteo:
El inspector de widgets de Flutter es una excelente herramienta para visualizar y monitorear los árboles de widgets de Flutter de su aplicación. El marco Flutter utiliza widgets como el bloque de construcción central para controlar cualquier cosa (como texto, botones, etc.), para el diseño (como centrado, relleno, fila y columna). Inspector ayuda a visualizar y explorar árboles de widgets, y puede ser utilizado para lo siguiente:
- Con la ayuda del inspector, puede comprender fácilmente los diseños existentes de su aplicación.
- Diagnosticar problemas de diseño en su aplicación si surge alguno.
Depuración visual de problemas de diseño
La siguiente es una instrucción para las características disponibles en la barra de herramientas del inspector en DevTools de flutter:
- Seleccione el modo de widget: seleccione un widget y haga clic en el botón del dispositivo para inspeccionarlo.
- Actualizar árbol: este botón se utiliza para volver a cargar la información del widget actual.
- Animaciones lentas: se utiliza para ralentizar las animaciones para permitir la inspección visual.
- Pintura de depuración: botón de pintura de depuración que se usa para agregar depuración visual, que sugiere la representación que muestra bordes, relleno, alineación y espaciadores, etc.
- Pintar líneas base: uso de cada RenderBox para pintar una línea en cada una de sus líneas base de texto en el proyecto.
- Repaint Rainbow: Repaint Rainbow permite rotar los colores en las capas al volver a pintar.
- Banner de modo de depuración: se utiliza para mostrar el banner de depuración incluso cuando se ejecuta una compilación de depuración.
Inspeccionar un widget:
Explorador de diseño de Flutter
Flutter Layout Explorer te permite comprender mejor los diseños de Flutter. Admite la única exploración de diseños flexibles, pero es posible que se amplíe en el futuro. Para usar el Explorador de diseño, seleccione la siguiente pestaña para mostrar la función Explorador de diseño.
El Explorador de diseño visualiza cómo flexionar los widgets y sus elementos secundarios. El explorador identifica el eje principal y el eje transversal y la alineación actual en su aplicación cuando la depura. Además, el explorador muestra violaciones de restricciones de diseño y errores de desbordamiento de procesamiento en su aplicación. Durante las sesiones de depuración, las restricciones de diseño violadas se colorean en rojo y los errores de desbordamiento se presentan en el patrón estándar de «cinta amarilla», como puede ver en un dispositivo en ejecución en su emulador. Todas las visualizaciones anteriores y siguientes tienen como objetivo comprender fácilmente por qué ocurren los errores de desbordamiento y cómo solucionarlos.
La vista de línea de tiempo:
La vista de línea de tiempo nos proporciona información de tiempo y rendimiento para las aplicaciones que se están depurando actualmente. Contiene tres partes, cada una de las cuales aumenta en granularidad.
- Gráfico de fotogramas flutter.
- Gráfico de eventos de línea de tiempo.
- Perfilador de CPU.
Además, la vista de línea de tiempo admite la importación y exportación de archivos de datos de línea de tiempo.
Tabla de fotogramas de Flutter:
Este gráfico de cuadros contiene información de cuadros de Flutter para su aplicación. Cada barra en el gráfico representa un solo cuadro de Flutter. Las barras, que están codificadas por colores para resaltar las diferentes partes del trabajo que se producen al renderizar un cuadro Flutter como se muestra a continuación:
Al seleccionar una barra del gráfico de arriba, el gráfico de llamas a continuación se centra en los eventos de la línea de tiempo correspondientes al cuadro Flutter seleccionado, que está coloreado de azul en el gráfico, como se muestra a continuación:
La interfaz de usuario:
La interfaz de usuario ejecuta código Dart en Dart VM. Incluye código de su aplicación y marco Flutter. Cuando crea una aplicación y muestra una escena, este subproceso crea un árbol de capas, comandos de pintura independientes del dispositivo y envía el árbol de capas al subproceso de trama que se representará en el dispositivo.
El ráster:
El subproceso de trama (llamado subproceso de GPU) ejecuta el código de gráficos de Flutter Engine. Este hilo toma el árbol de capas y lo muestra con la ayuda de la GPU. No puede acceder directamente al subproceso de trama o sus datos.
El Jank:
Cada vez que un marco se convierte en janky, el marco jank es visible con una superposición roja. Un marco es irregular cuando tarda más de ~16 ms en completarse (para dispositivos de 60 FPS) siempre que este objetivo se pierda en los marcos descartados de la interfaz de usuario. Al lograr una tasa de procesamiento de cuadros de 60 FPS, cada cuadro debe procesarse en ~16 ms o menos.
El gráfico de eventos de la línea de tiempo:
El gráfico de eventos de la línea de tiempo muestra todo el seguimiento de eventos de la aplicación. El marco Flutter muestra los eventos de la línea de tiempo a medida que funciona para crear marcos, dibujar escenas y realizar un seguimiento de otras actividades. Todos los eventos se muestran aquí en la línea de tiempo.
El gráfico de la llama:
El gráfico Flame muestra muestras de CPU para el evento de marco seleccionado (como el diseño, etc.). Este generador de perfiles debe verse como un seguimiento de pila de arriba hacia abajo, donde el marco de pila superior llama al que está debajo, y el ancho de cada marco de pila representa la cantidad de tiempo que consumió la CPU durante la inspección o depuración, como se muestra a continuación. :
El árbol de llamadas:
El árbol de llamadas muestra el seguimiento del método para el perfil de la CPU. Esta tabla de árbol de llamadas es una representación de arriba hacia abajo del perfil, lo que significa que un método se puede expandir para describir a sus destinatarios.
- Tiempo total: tiempo que el método dedicó a ejecutar el código con sus destinatarios.
- Autotiempo: tiempo que el método dedicó a ejecutar su propio código.
- Método: Nombre o identidad del método llamado.
- Fuente: ruta de archivo para el sitio de llamada de método en su máquina.
A continuación se muestra una imagen del mismo:
El de abajo hacia arriba:
La vista de abajo hacia arriba muestra el seguimiento del método para el perfil de la CPU pero, de acuerdo con el nombre, es una representación de abajo hacia arriba del perfil. Esto significa que cada método de nivel superior en la tabla es en realidad el último método en la pila de llamadas para una muestra de CPU dada.
La vista de memoria:
El objeto asignado en cualquier aplicación creada usando un constructor de clase (como usando new MyClass() o MyClass()) vive en una parte de la memoria conocida como montón. La página de memoria en DevTools le permite ver cómo un aislado está usando la memoria en un momento dado. Con la ayuda de las opciones Supervisar asignaciones y Restablecer, cualquiera puede analizar los recuentos de acumuladores. Los acumuladores se pueden usar para estudiar la tasa de asignaciones de memoria para cualquier aplicación de Dart, si sospecha que su aplicación tiene fugas de memoria o tiene otros errores relacionados con la asignación de memoria, puede averiguarlo fácilmente en la página de memoria. La creación de perfiles de memoria consta de seis partes:
- Descripción general del gráfico de la memoria
- Gráfico para la memoria solo de Android
- Cronología del evento
- Monitoreo y configuración de instancias totales de Dart, tamaño y monitoreo de acumuladores para detectar fugas de memoria en aplicaciones
- Instantáneas de todas las instancias de clase de memoria en vivo, centinelas, etc.
Se utiliza un gráfico de serie temporal para visualizar el estado de la memoria de Flutter en intervalos de tiempo sucesivos a lo largo de su aplicación. Cada punto de datos en el gráfico corresponde a la marca de tiempo (eje x) de las cantidades medidas y (eje y) del montón. Ejemplo, uso, capacidad, externo, recolección de basura, tamaño del conjunto residente y muchos más.
La vista de rendimiento:
La vista de rendimiento nos proporciona una función para registrar y perfilar una sesión desde su aplicación Dart o Flutter. Si está ejecutando una aplicación Flutter, cree una compilación de perfil para analizar el rendimiento de su aplicación.
La vista de red:
La vista de red le permite inspeccionar el tráfico de socket web como HTTP y HTTPS desde su aplicación Dart o Flutter. Captura de pantalla de la pantalla de red:
Algunos ejemplos de consultas de filtro:
my-endpoint m:get t:json s:200 https s:404
El depurador:
DevTools contiene un depurador de nivel de origen totalmente originado que admite puntos de interrupción, pasos e inspección de variables. Cuando alguien abre su pestaña del depurador, debería ver la fuente del punto de entrada principal para su aplicación cargada en el depurador. Para explorar más de las fuentes de su aplicación, haga clic en Bibliotecas (arriba a la derecha) o use un método alternativo: el comando de tecla de acceso rápido ⌘ + P / ctrl + P. Esto abrirá la ventana de bibliotecas y le permitirá buscar otros archivos fuente de su aplicación.
Además, el botón Reanudar continúa la ejecución regular de la aplicación en la que trabajó.
Concepto de herramienta de tamaño de aplicación:
La herramienta de tamaño de la aplicación lo libera para analizar el tamaño total de su aplicación y puede ver una sola instantánea de «información de tamaño» usando la pestaña Análisis, o comparar dos instantáneas diferentes de «información de tamaño», que contiene datos de tamaño para el código Dart de su solicitud. El compilador de aleteo intenta optimizar el tamaño de su aplicación mediante la eliminación de fragmentos de código que no se utilizan o no se pueden alcanzar (código basura) en su aplicación.
Pestaña de análisis:
En la pestaña de análisis, puede ver la estructura jerárquica de los datos de tamaño usando el diagrama de árbol y la tabla, ver los datos de atribución del código (es decir, por qué se incluye un fragmento de código en su aplicación compilada) usando el árbol dominador y el gráfico de llamadas.
Cargando un archivo de tamaño:
Cada vez que abre la pestaña Análisis, instrucciones para cargar un archivo de tamaño de aplicación. Arrastre y suelte un archivo de tamaño de aplicación en el cuadro de diálogo y haga clic en el botón «Analizar tamaño».
Pestaña de diferencias:
La pestaña diff nos permite comparar dos instantáneas de información de tamaño, dos archivos de información de tamaño que está comparando deben generarse a partir de dos versiones diferentes de la misma aplicación, por ejemplo, el archivo de tamaño generado antes y después de los cambios en el código de su aplicación puede visualizar el diferencia entre los dos conjuntos de datos utilizando el mapa de árbol y la tabla.
Publicación traducida automáticamente
Artículo escrito por abhijat_sarari y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA