Saltar al contenido principal

Depurar tu módulo add-to-app

Cómo ejecutar, depurar y realizar un hot reload en tu módulo Flutter add-to-app.

Una vez que hayas integrado el módulo Flutter en tu proyecto y utilizado las APIs de plataforma de Flutter para ejecutar el motor de Flutter y/o la UI, puedes compilar y ejecutar tu aplicación de Android o iOS de la misma manera en que ejecutas las aplicaciones normales de Android o iOS.

Flutter ahora maneja la UI dondequiera que tu código incluya FlutterActivity o FlutterViewController.

Resumen

#

Es posible que estés acostumbrado a tener disponible tu conjunto de herramientas de depuración de Flutter favoritas al ejecutar flutter run o un comando equivalente desde un IDE. Pero también puedes usar todas tus funcionalidades de depuración de Flutter como hot reload, superposiciones de rendimiento, DevTools y establecer puntos de interrupción en escenarios add-to-app.

El comando flutter attach proporciona estas funcionalidades. Para ejecutar este comando, puedes usar las herramientas de CLI del SDK, VS Code o IntelliJ IDEA o Android Studio.

El comando flutter attach se conecta una vez que ejecutas tu FlutterEngine. Permanece acoplado hasta que liberes tu FlutterEngine. Puedes invocar flutter attach antes de iniciar tu motor. El comando flutter attach espera a la próxima VM de Dart disponible que aloje tu motor.

Depurar desde la terminal

#

Para conectarte desde la terminal, ejecuta flutter attach. Para seleccionar un dispositivo objetivo específico, añade -d <deviceId>.

flutter attach

El comando debería mostrar una salida similar a la siguiente:

Syncing files to device iPhone 15 Pro...
 7,738ms (!)

To hot reload the changes while running, press "r".
To hot restart (and rebuild state). press "R".

Depurar la extensión de iOS en Xcode y VS Code

#

Compilar la versión de iOS de la aplicación Flutter en la terminal

#

Para generar las dependencias de plataforma de iOS necesarias, ejecuta el comando flutter build.

flutter build ios --config-only --no-codesign --debug

Warning: Building for device with codesigning disabled. You will have to manually codesign before deploying to device.
Building com.example.myApp for device (ios)...

Iniciar la depuración primero con VS Code

#

Si utilizas VS Code para depurar la mayor parte de tu código, comienza con esta sección.

Iniciar el depurador de Dart en VS Code
#

  1. Para abrir el directorio de la aplicación Flutter, ve a File > Open Folder... y elige el directorio my_app.

  2. Abre el archivo lib/main.dart.

  3. Si puedes compilar una aplicación para más de un dispositivo, debes seleccionar el dispositivo primero.

    Ve a View > Command Palette...

    También puedes presionar Ctrl / Cmd + Shift + P.

  4. Escribe flutter select.

  5. Haz clic en el comando Flutter: Select Device.

  6. Elige tu dispositivo de destino.

  7. Haz clic en el icono de depuración (Icono de depuración de VS Code para activar el modo de depuración de una aplicación Flutter). Esto abre el panel Debug y lanza la aplicación. Espera a que la aplicación se lance en el dispositivo y a que el panel de depuración indique Connected. El depurador tarda más tiempo en lanzarse la primera vez. Los lanzamientos posteriores se inician más rápido.

    Esta aplicación Flutter contiene dos botones:

    • Launch in browser: Este botón abre esta página en el navegador predeterminado de tu dispositivo.
    • Launch in app: Este botón abre esta página dentro de tu aplicación. Este botón solo funciona para iOS o Android. Las aplicaciones de escritorio lanzan un navegador.
Habilitar acoplamiento automático
#

Puedes configurar VS Code para que se acople a tu proyecto de módulo Flutter cada vez que comiences a depurar. Para habilitar esta función, crea un archivo .vscode/launch.json en tu proyecto de módulo Flutter.

  1. Ve a View > Run.

    También puedes presionar Ctrl / Cmd + Shift + D.

    VS Code muestra la barra lateral Run and Debug.

  2. En esta barra lateral, haz clic en create a launch.json file.

    VS Code muestra el menú Select debugger en la parte superior.

  3. Selecciona Dart & Flutter.

    VS Code crea y abre el archivo .vscode/launch.json.

    Expandir para ver un archivo launch.json de ejemplo
    json
    {
    // Use IntelliSense to learn about possible attributes.
    // Hover to view descriptions of existing attributes.
    // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
    "version": "0.2.0",
    "configurations": [
        {
            "name": "my_app",
            "request": "launch",
            "type": "dart"
        },
        {
            "name": "my_app (profile mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "profile"
        },
        {
            "name": "my_app (release mode)",
            "request": "launch",
            "type": "dart",
            "flutterMode": "release"
        }
    ]
}

  4. Para acoplarte, ve a Run > Start Debugging.

    También puedes presionar F5.

Acoplar al proceso de Flutter en Xcode
#

Para acoplar a la aplicación Flutter en Xcode:

  1. Ve a Debug > Attach to Process.

  2. Selecciona Runner. Debería estar en la parte superior del menú Attach to Process bajo el encabezado Likely Targets.

Iniciar la depuración primero con Xcode

#

Si utilizas Xcode para depurar la mayor parte de tu código, comienza con esta sección.

Iniciar el depurador de Xcode
#

  1. Abre ios/Runner.xcworkspace desde el directorio de tu aplicación Flutter.

  2. Selecciona el dispositivo correcto utilizando el menú Scheme en la barra de herramientas.

    Si no tienes preferencia, elige iPhone Pro 14.

  3. Ejecuta este Runner como una aplicación normal en Xcode.

    Cuando finaliza la ejecución, el área Debug en la parte inferior de Xcode muestra un mensaje con la URI del servicio Dart VM. Se asemeja a la siguiente respuesta:

    2023-07-12 14:55:39.966191-0500 Runner[58361:53017145]
    flutter: The Dart VM service is listening on
    http://127.0.0.1:50642/00wEOvfyff8=/

  4. Copia la URI del servicio Dart VM.

Acoplar a la Dart VM en VS Code
#

  1. Para abrir la paleta de comandos, ve a View > Command Palette...

    También puedes presionar Cmd + Shift + P.

  2. Escribe debug.

  3. Haz clic en el comando Debug: Attach to Flutter on Device.

  4. En la casilla Paste an VM Service URI, pega la URI que copiaste de Xcode y presiona Enter.

Depurar la extensión de Android en Android Studio

#

  1. Para abrir el directorio de la aplicación Flutter, ve a File > Open... y elige el directorio my_app.

  2. Abre el archivo lib/main.dart.

  3. Elige un dispositivo virtual Android. Ve a la barra de herramientas, abre el menú desplegable de la izquierda, y haz clic en Open Android Emulator: <device>.

    Puedes elegir cualquier emulador instalado que no incluya arm64.

  4. En ese mismo menú, selecciona el dispositivo Android virtual.

  5. Desde la barra de herramientas, haz clic en Run 'main.dart'.

    También puedes presionar Ctrl + Shift + R.

    Una vez que la aplicación se muestre en el emulador, continúa con el siguiente paso.

Depurar sin conexión USB

#

Para depurar tu aplicación a través de Wi-Fi en un dispositivo iOS o Android, utiliza flutter attach.

Depurar a través de Wi-Fi en dispositivos iOS

#

Para un dispositivo de destino iOS, completa los siguientes pasos:

  1. Verifica que tu dispositivo se conecte a Xcode a través de Wi-Fi como se describe en la guía de configuración de iOS.

  2. En tu máquina de desarrollo macOS, abre Xcode > Product > Scheme > Edit Scheme....

    También puedes presionar Cmd + <.

  3. Haz clic en Run.

  4. Haz clic en Arguments.

  5. En Arguments Passed On Launch, haz clic en +.

    1. Si tu máquina de desarrollo utiliza IPv4, añade --vm-service-host=0.0.0.0.

    2. Si tu máquina de desarrollo utiliza IPv6, añade --vm-service-host=::0.

    <DashImage figure img-class="site-mobile-screenshot border" image="development/add-to-app/debugging/wireless-port.png" caption="Argumentos pasados al inicio con una red IPv4 añadida", width="100%" />

Para determinar si te encuentras en una red IPv6

#

  1. Abre Settings > Wi-Fi.

  2. Haz clic en tu red conectada.

  3. Haz clic en Details...

  4. Haz clic en TCP/IP.

  5. Busca una sección de dirección IPv6.

    Cuadro de diálogo de Wi-Fi para la Configuración del Sistema de macOS

    Cuadro de diálogo de Wi-Fi para la Configuración del Sistema de macOS

Depurar a través de Wi-Fi en dispositivos Android

#

Verifica que tu dispositivo se conecte a Android Studio a través de Wi-Fi como se describe en la guía de configuración de Android.

A menos que se indique lo contrario, la documentación de este sitio refleja Flutter 3.44.0. Página actualizada por última vez el 2026-05-05. Ver código fuente oreportar un problema.