馃殌 驴C贸mo instalar Dart DevTools para Flutter? Aprende a instalar la nueva herramienta de desarrollo

4 minuto(s) de lectura

C贸mo instalar DevTools en Android Studio e IntelliJ

Instale el complemento Flutter

Instale el complemento Flutter si a煤n no lo tiene instalado. Esto se puede hacer usando la p谩gina normal de complementos en la configuraci贸n de IntelliJ y Android Studio. Una vez que la p谩gina est谩 abierta, puede buscar en el mercado el complemento Flutter.

Inicie una aplicaci贸n para depurar

Para abrir DevTools, primero debe ejecutar una aplicaci贸n Flutter. Esto se puede lograr abriendo un proyecto Flutter, asegur谩ndose de que tiene un dispositivo conectado y haciendo clic en los botones de la barra de herramientas Ejecutar o Depurar .

Inicie DevTools desde la barra de herramientas / men煤

Una vez que se est谩 ejecutando una aplicaci贸n, puede iniciar DevTools utilizando uno de los siguientes:

  • Seleccione la acci贸n Abrir barra de herramientas DevTools en la vista Ejecutar.
  • Seleccione la acci贸n Abrir barra de herramientas DevTools en la vista Depuraci贸n. (si se est谩 depurando)
  • Seleccione la acci贸n Abrir DevTools del men煤 M谩s acciones en la vista del Inspector de aleteo.

captura de pantalla del bot贸n Abrir DevTools

Lanzar DevTools desde una acci贸n

Tambi茅n puede abrir DevTools desde una acci贸n IntelliJ. Abra el cuadro de di谩logo Buscar acci贸n 鈥 (en una Mac, presione Command+Shift+A)y busque la acci贸n Abrir DevTools . Cuando selecciona esa acci贸n, DevTools se instala (si a煤n no lo est谩), el servidor DevTools se inicia y se abre una instancia del navegador se帽alando a la aplicaci贸n DevTools.

Cuando se abre con una acci贸n IntelliJ, DevTools no est谩 conectado a una aplicaci贸n Flutter. Deber谩 proporcionar un puerto de protocolo de servicio para una aplicaci贸n que se est茅 ejecutando actualmente. Puede hacer esto utilizando el cuadro de di谩logo Conectar en l铆nea a una aplicaci贸n en ejecuci贸n .

C贸mo instalar DevTools en Visual Studio Code

Instale las extensiones de Visual Studio Code

Para usar DevTools de VS Code, necesita la extensi贸n Dart y si est谩 depurando aplicaciones de Flutter, tambi茅n debe instalar la extensi贸n Flutter.

Inicie una aplicaci贸n para depurar

Inicie una sesi贸n de depuraci贸n para su aplicaci贸n abriendo la carpeta ra铆z de su proyecto (la que contiene pubspec.yaml) en VS Code y haciendo clic en Debug> Start Debugging ( F5).

Lanzar DevTools

Una vez que la sesi贸n de depuraci贸n est谩 activa y la aplicaci贸n se ha iniciado, el siguiente comando Dart: Open DevTools estar谩 disponible en la paleta de comandos VS Code:

Captura de pantalla que muestra el comando Abrir DevTools

La primera vez que ejecute esto (y posteriormente cuando se actualice el paquete DevTools), se le solicitar谩 que active o actualice DevTools.

Captura de pantalla que muestra el comando Active DevTools

Al hacer clic en el bot贸n Activar / Actualizar debe usar pub global generate para activar el paquete DevTools. A continuaci贸n, DevTools se inicia en el navegador y se conecta autom谩ticamente a su sesi贸n de depuraci贸n.

Captura de pantalla que muestra DevTools en un navegador

Mientras las DevTools est茅n activas, las ver谩 en la barra de estado de VS Code. Si ha cerrado la pesta帽a del navegador, puede hacer clic en la barra de estado para volver a iniciar su navegador, siempre y cuando todav铆a haya disponible una sesi贸n de depuraci贸n Dart / Flutter adecuada.

Captura de pantalla que muestra DevTools en la barra de estado del c贸digo VS

C贸mo instalar DevTools desde la l铆nea de Comandos

Instalar DevTools

Si tiene pub como su ruta principal, puedes ejecutar:

pub global activate devtools

Si tienes flutter como su ruta principal, puede ejecutar:

flutter pub global activate devtools

Ese comando instala (o actualiza) DevTools en su m谩quina.

Inicie el servidor de aplicaciones DevTools

Luego, ejecute el servidor web local, que sirve a la aplicaci贸n DevTools. Para hacer eso, ejecute uno de los siguientes dos comandos:

pub global run devtools   # Si tienes `pub` como ruta principal.

O

flutter pub global run devtools   # Si tienes `flutter` como ruta principal.

En la l铆nea de comando, deber铆a ver una salida similar a:

Serving DevTools at http://127.0.0.1.9100

Inicie una aplicaci贸n para depurar

A continuaci贸n, inicie una aplicaci贸n para conectarse. Puede ser una aplicaci贸n Flutter o una aplicaci贸n de l铆nea de comandos Dart. El siguiente comando utiliza una aplicaci贸n Flutter:

cd path/to/flutter/app
flutter run

Necesitas tener un dispositivo conectado, o un simulador abierto, para comprobar mediante flutter run que todo esta funcionando. Una vez que se inicia la aplicaci贸n, ver谩 un mensaje en su terminal que se ve as铆:

An Observatory debugger and profiler on iPhone X is available
at: http://127.0.0.1:50976/Swm0bjIe0ks=/

Tenga en cuenta esta URL, ya que la usar谩 para conectar su aplicaci贸n a DevTools.

Abra DevTools y con茅ctese a la aplicaci贸n de destino

Una vez que est谩 configurado, usar DevTools es tan simple como abrir una ventana del navegador Chrome y navegar a http://localhost:9100.

Una vez que se abre DevTools, deber铆a ver un di谩logo de conexi贸n:

Captura de pantalla de una vista de registro

Pegue la URL que obtuvo al ejecutar su aplicaci贸n (en este ejemplo http://127.0.0.1:50976/Swm0bjIe0ks=/) en el cuadro de di谩logo de conexi贸n para conectar su aplicaci贸n a DevTools.

Esta URL contiene un token de seguridad, por lo que ser谩 diferente para cada ejecuci贸n de su aplicaci贸n. Esto significa que si detiene su aplicaci贸n y la vuelve a ejecutar, debe conectarse a DevTools a trav茅s de una nueva URL.

Gu铆a DevTools

馃憠 驴Qu茅 es DevTools? 馃搶 驴C贸mo instalar DevTools? 馃憠 驴C贸mo usar el inspector de DevTools? 馃憠 驴C贸mo usar la l铆nea de tiempo de DevTools? 馃憠 驴C贸mo usar la vista de memoria de DevTools? 馃憠 驴C贸mo usar la vista de rendimiento de DevTools? 馃憠 驴C贸mo usar el depurador de DevTools? 馃憠 驴C贸mo usar la vista de registro de DevTools? 馃憠 Gu铆a Flutter?

Relacionados

馃帗 Cursos en Espa帽ol 馃憠 Ejemplos de Aplicaciones 鈿 Documentaci贸n en Espa帽ol

Fuente: Salvo que se indique lo contrario, este trabajo est谩 licenciado bajo una licencia internacional Creative Commons Attribution 4.0 y los ejemplos de c贸digo est谩n licenciados bajo la licencia BSD. Creado por Flutter Oficial