Usar un depurador de lenguaje nativo

Si escribes apps de Flutter solo con código de Dart, puedes depurar tu código usando el depurador de tu IDE. El equipo de Flutter recomienda VS Code.

Si escribes un plugin específico de la plataforma o usas librerías específicas de la plataforma, puedes depurar esa parte de tu código con un depurador nativo.

• Para depurar código de iOS o macOS escrito en Swift o Objective-C, puedes usar Xcode.
• Para depurar código de Android escrito en Java o Kotlin, puedes usar Android Studio.
• Para depurar código de Windows escrito en C++, puedes usar Visual Studio.

This guide shows you how you can connect dos depuradores a tu app de Dart, uno para Dart, y uno para el código nativo.

Esta guía describe cómo usar VS Code para depurar tu app de Flutter. También puedes usar tu IDE preferido con los plugins de Flutter y Dart instalados y configurados.

El siguiente procedimiento explica cómo usar el depurador de Dart con la app de muestra predeterminada de Flutter. Los componentes destacados en VS Code funcionan y aparecen cuando depuras tu propio proyecto de Flutter también.

1. Crear una app básica de Flutter.

   $ flutter create my_app
   

   content_copy

   Creating project my_app...
   Resolving dependencies in my_app...
   Got dependencies in my_app.
   Wrote 129 files.
   
   All done!
   You can find general documentation for Flutter at: https://docs.flutter.dev/
   Detailed API documentation is available at: https://api.flutter.dev/
   If you prefer video documentation, consider: https://www.youtube.com/c/flutterdev
   
   In order to run your application, type:
   
     $ cd my_app
     $ flutter run
   
   Your application code is in my_app/lib/main.dart.
   

   content_copy

   $ cd my_app
   

   content_copy

2. Abre el archivo lib\main.dart en la app de Flutter usando VS Code.

3. Haz clic en el icono del insecto (). Esto abre los siguientes paneles en VS Code:

   • Debug
   • Debug Console
   • Widget Inspector

   La primera vez que ejecutas el depurador es la que más tarda.

4. Probar el depuración.

   a. En main.dart, haz clic en esta línea:

   dart

   _counter++;
   

   content_copy

   b. Presiona Shift + F9. Esto añade un punto de interrupción (breakpoint) donde se incrementa la variable _counter.

   c. En la app, haz clic en el botón + para incrementar el contador. La app se pausa.

   d. En este punto, VS Code muestra:

   • In the Editor Groups:
     • El punto de interrupción resaltado en main.dart
     • La jerarquía de widgets para la app de Flutter en el Widget Tree del Widget Inspector
   • In the side bar:
     • El estado de la app en la sección Call Stack
     • El valor de la variable local this en la sección Variables
   • In the panel:
     • El registro de la app de Flutter en la Debug console

El plugin de Flutter para VS Code añade una serie de componentes a la interfaz de usuario de VS Code.

Al iniciarse, el depurador de Flutter añade herramientas de depuración a la interfaz de VS Code.

La siguiente captura de pantalla y tabla explican el propósito de cada herramienta.

Para cambiar dónde aparece el panel (en naranja) en VS Code, ve a View > Appearance > Panel Position.

La barra de herramientas te permite depurar usando cualquier depurador. Puedes avanzar por instrucciones, salir y pasar por alto sentencias de Dart, hacer Hot Reload o reanudar la app.

Icon	Acción	Atajo de teclado predeterminado
Iniciar o Reanudar	F5
Pausar	F6
Paso a paso por procedimientos (Step Over)	F10
Paso a paso por instrucciones (Step Into)	F11
Salir (Step Out)	Shift + F11
Hot Reload	Ctrl + F5
Hot Restart	Shift + Special + F5
Detener	Shift + F5
Abrir Widget Inspector

Para el resto de esta guía, necesitas actualizar la app de Flutter de prueba. Esta actualización añade código nativo para depurar.

1. Abre el archivo lib/main.dart usando tu IDE preferido.

2. Reemplaza el contenido de main.dart con el siguiente código.

   Expandir para ver el código de Flutter de este ejemplo

   lib/main.dart

   dart

   // Copyright 2023 The Flutter Authors. All rights reserved.
   // Use of this source code is governed by a BSD-style license that can be
   // found in the LICENSE file.
   ​
   import 'package:flutter/material.dart';
   import 'package:url_launcher/url_launcher.dart';
   ​
   void main() {
     runApp(const MyApp());
   }
   ​
   class MyApp extends StatelessWidget {
     const MyApp({super.key});
   ​
     @override
     Widget build(BuildContext context) {
       return MaterialApp(
         title: 'URL Launcher',
         theme: ThemeData(
           colorSchemeSeed: Colors.purple,
           brightness: Brightness.light,
         ),
         home: const MyHomePage(title: 'URL Launcher'),
       );
     }
   }
   ​
   class MyHomePage extends StatefulWidget {
     const MyHomePage({super.key, required this.title});
     final String title;
   ​
     @override
     State<MyHomePage> createState() => _MyHomePageState();
   }
   ​
   class _MyHomePageState extends State<MyHomePage> {
     Future<void>? _launched;
   ​
     Future<void> _launchInBrowser(Uri url) async {
       if (!await launchUrl(
         url,
         mode: LaunchMode.externalApplication,
       )) {
         throw Exception('Could not launch $url');
       }
     }
   ​
     Future<void> _launchInWebView(Uri url) async {
       if (!await launchUrl(
         url,
         mode: LaunchMode.inAppWebView,
       )) {
         throw Exception('Could not launch $url');
       }
     }
   ​
     Widget _launchStatus(BuildContext context, AsyncSnapshot<void> snapshot) {
       if (snapshot.hasError) {
         return Text('Error: ${snapshot.error}');
       } else {
         return const Text('');
       }
     }
   ​
     @override
     Widget build(BuildContext context) {
       final Uri toLaunch = Uri(
           scheme: 'https',
           host: 'docs.flutter.dev',
           path: 'testing/native-debugging');
       return Scaffold(
         appBar: AppBar(
           title: Text(widget.title),
         ),
         body: Center(
           child: Column(
             mainAxisAlignment: MainAxisAlignment.center,
             children: <Widget>[
               Padding(
                 padding: const EdgeInsets.all(16),
                 child: Text(toLaunch.toString()),
               ),
               FilledButton(
                 onPressed: () => setState(() {
                   _launched = _launchInBrowser(toLaunch);
                 }),
                 child: const Text('Launch in browser'),
               ),
               const Padding(padding: EdgeInsets.all(16)),
               FilledButton(
                 onPressed: () => setState(() {
                   _launched = _launchInWebView(toLaunch);
                 }),
                 child: const Text('Launch in app'),
               ),
               const Padding(padding: EdgeInsets.all(16.0)),
               FutureBuilder<void>(future: _launched, builder: _launchStatus),
             ],
           ),
         ),
       );
     }
   }
   

   content_copy

3. Para añadir el paquete url_launcher como una dependencia, ejecuta flutter pub add:

   $ flutter pub add url_launcher
   

   content_copy

   Resolving dependencies...
     collection 1.17.1 (1.17.2 available)
   + flutter_web_plugins 0.0.0 from sdk flutter
     matcher 0.12.15 (0.12.16 available)
     material_color_utilities 0.2.0 (0.8.0 available)
   + plugin_platform_interface 2.1.4
     source_span 1.9.1 (1.10.0 available)
     stream_channel 2.1.1 (2.1.2 available)
     test_api 0.5.1 (0.6.1 available)
   + url_launcher 6.1.11
   + url_launcher_android 6.0.36
   + url_launcher_ios 6.1.4
   + url_launcher_linux 3.0.5
   + url_launcher_macos 3.0.5
   + url_launcher_platform_interface 2.1.3
   + url_launcher_web 2.0.17
   + url_launcher_windows 3.0.6
   Changed 10 dependencies!
   

   content_copy

4. Para comprobar qué cambió en la base de código:

   1. En Linux o macOS, ejecuta este comando find.

      $ find ./ -mmin -120
      

      content_copy

      ./ios/Flutter/Debug.xcconfig
      ./ios/Flutter/Release.xcconfig
      ./linux/flutter/generated_plugin_registrant.cc
      ./linux/flutter/generated_plugins.cmake
      ./macos/Flutter/Flutter-Debug.xcconfig
      ./macos/Flutter/Flutter-Release.xcconfig
      ./macos/Flutter/GeneratedPluginRegistrant.swift
      ./pubspec.lock
      ./pubspec.yaml
      ./windows/flutter/generated_plugin_registrant.cc
      ./windows/flutter/generated_plugins.cmake
      

      content_copy

   2. En Windows, ejecuta este comando en el símbolo del sistema.

      Get-ChildItem C:\dev\example\ -Rescurse | Where-Object {$_.LastWriteTime -gt (Get-Date).AddDays(-1)}
      

      content_copy

      C:\dev\example\ios\Flutter\
      
      
      Mode                LastWriteTime         Length Name
      ----                -------------         ------ ----
                      8/1/2025   9:15 AM                Debug.xcconfig
                      8/1/2025   9:15 AM                Release.xcconfig
      
      C:\dev\example\linux\flutter\
      
      
      Mode                LastWriteTime         Length Name
      ----                -------------         ------ ----
                      8/1/2025   9:15 AM                generated_plugin_registrant.cc
                      8/1/2025   9:15 AM                generated_plugins.cmake
      
      C:\dev\example\macos\Flutter\
      
      
      Mode                LastWriteTime         Length Name
      ----                -------------         ------ ----
                      8/1/2025   9:15 AM                Flutter-Debug.xcconfig
                      8/1/2025   9:15 AM                Flutter-Release.xcconfig
                      8/1/2025   9:15 AM                GeneratedPluginRegistrant.swift
      
      C:\dev\example\
      
      
      Mode                LastWriteTime         Length Name
      ----                -------------         ------ ----
                      8/1/2025   9:15 AM                pubspec.lock
                      8/1/2025   9:15 AM                pubspec.yaml
      
      C:\dev\example\windows\flutter\
      
      
      Mode                LastWriteTime         Length Name
      ----                -------------         ------ ----
                      8/1/2025   9:15 AM                generated_plugin_registrant.cc
                      8/1/2025   9:15 AM                generated_plugins.cmake
      

      content_copy

La instalación de url_launcher añadió archivos de configuración y archivos de código para todas las plataformas de destino en el directorio de la app de Flutter.

Esta sección explica cómo depurar el código de Dart en tu app de Flutter y cualquier código nativo con su depurador habitual. Esta capacidad te permite aprovechar el Hot Reload de Flutter al editar código nativo.

Para depurar código nativo de Android, necesitas una app de Flutter que contenga código de Android. En esta sección, aprenderás a conectar los depuradores de Dart, Java y Kotlin a tu app. No necesitas VS Code para depurar tanto el código de Dart como el de Android. Esta guía incluye las instrucciones de VS Code para ser consistente con las guías de Xcode y Visual Studio.

Esta sección usa la misma app de ejemplo de Flutter con url_launcher creada en Actualizar app de Flutter de prueba.

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

flutter build appbundle --debug

Running Gradle task 'bundleDebug'...                               27.1s
✓ Built build/app/outputs/bundle/debug/app-debug.aab.

Para depurar código de iOS, necesitas una app de Flutter que contenga código de iOS. En esta sección, aprenderás a conectar dos depuradores a tu app: Flutter a través de VS Code y Xcode. Necesitas ejecutar tanto VS Code como Xcode.

Esta sección usa la misma app de ejemplo de Flutter con url_launcher creada en Actualizar app de Flutter de prueba.

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)...

Para depurar código de macOS, necesitas una app de Flutter que contenga código de macOS. En esta sección, aprenderás a conectar dos depuradores a tu app: Flutter a través de VS Code y Xcode. Necesitas ejecutar tanto VS Code como Xcode.

Esta sección usa la misma app de ejemplo de Flutter con url_launcher creada en Actualizar app de Flutter de prueba.

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

flutter build macos --debug

Building macOS application...

Para depurar código de C++, necesitas una app de Flutter que contenga código de C++. En esta sección, aprenderás a conectar dos depuradores a tu app: Flutter a través de VS Code y Visual Studio. Necesitas ejecutar tanto VS Code como Visual Studio.

Esta sección usa la misma app de ejemplo de Flutter con url_launcher creada en Actualizar app de Flutter de prueba.

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

C:\> flutter build windows --debug

Building Windows application...                                    31.4s
√  Built build\windows\runner\Debug\my_app.exe.

Echa un vistazo a los siguientes recursos sobre depuración en Flutter, iOS, Android, macOS y Windows:

• Depurar apps de Flutter
• Documentación de Flutter inspector y DevTools
• Análisis de rendimiento (profiling)

Puedes encontrar los siguientes recursos de depuración en developer.android.com.

• Depura tu app
• Android Debug Bridge (adb)

Puedes encontrar los siguientes recursos de depuración en developer.apple.com.

• Depuración
• Ayuda de Instruments

Puedes encontrar recursos de depuración en Microsoft Learn.

• Depurador de Visual Studio
• Aprende a depurar código de C++ usando Visual Studio