使用原生语言调试器

如果您仅使用 Dart 代码编写 Flutter 应用，则可以使用 IDE 的调试器调试代码。Flutter 团队推荐 VS Code。

如果您编写平台特定插件或使用平台特定库，则可以使用原生调试器调试代码的该部分。

• 要调试使用 Swift 或 Objective-C 编写的 iOS 或 macOS 代码，可以使用 Xcode。
• 要调试使用 Java 或 Kotlin 编写的 Android 代码，可以使用 Android Studio。
• 要调试使用 C++ 编写的 Windows 代码，可以使用 Visual Studio。

本指南展示了如何将两个调试器连接到您的 Dart 应用，一个用于 Dart，另一个用于原生代码。

调试 Dart 代码

本指南介绍如何使用 VS Code 调试 Flutter 应用。您还可以使用已安装并配置了 Flutter 和 Dart 插件的首选 IDE。

使用 VS Code 调试 Dart 代码

以下过程说明了如何使用 Dart 调试器和默认示例 Flutter 应用。VS Code 中的特色组件在调试您自己的 Flutter 项目时也能正常工作并显示。

1. 创建一个基本的 Flutter 应用。

    $ flutter create my_app
   

    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.fluttercn.cn/
    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.
   

    $ cd my_app
   

2. 使用 VS Code 在 Flutter 应用中打开 lib\main.dart 文件。

3. 单击 bug 图标 ()。这将在 VS Code 中打开以下窗格

   • 调试
   • 调试控制台
   • 小部件检查器

   首次运行调试器需要最长时间。

4. 测试调试器。

   a. 在 main.dart 中，单击此行

      _counter++;
   

   b. 按 Shift + F9。这将在 _counter 变量递增处添加一个断点。

   c. 在应用中，单击 + 按钮以递增计数器。应用暂停。

   d. 此时，VS Code 显示

   • 在 编辑器组 中
     • main.dart 中突出显示的断点
     • 小部件检查器 的 小部件树 中 Flutter 应用的小部件层次结构
   • 在 侧边栏 中
     • 调用堆栈 部分中应用的状态
     • 变量 部分中 this 本地变量的值
   • 在 面板 中
     • 调试控制台 中 Flutter 应用的日志

VS Code Flutter 调试器

VS Code 的 Flutter 插件向 VS Code 用户界面添加了许多组件。

VS Code 界面更改

启动后，Flutter 调试器会向 VS Code 界面添加调试工具。

以下屏幕截图和表格说明了每个工具的目的。

若要更改面板（以橙色显示）在 VS Code 中出现的位置，请转到视图 > 外观 > 面板位置。

VS Code Flutter 调试工具栏

该工具栏允许您使用任何调试器进行调试。您可以逐步执行、跳出和跳过 Dart 语句、热重载或恢复应用。

图标	操作	默认键盘快捷键
	开始或恢复	F5
	暂停	F6
	单步执行	F10
	单步进入	F11
	单步跳出	Shift + F11
	热重载	Ctrl + F5
	热重启	Shift + Special + F5
	停止	Shift + F5
	打开小组件检查器

更新测试 Flutter 应用

在本指南的其余部分中，您需要更新测试 Flutter 应用。此更新添加了要调试的本机代码。

1. 使用您首选的 IDE 打开 lib/main.dart 文件。

2. 用以下代码替换 main.dart 的内容。

   展开以查看此示例的 Flutter 代码

   lib/main.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),
              ],
            ),
          ),
        );
      }
    }

3. 要将 url_launcher 包添加为依赖项，请运行 flutter pub add

    $ flutter pub add url_launcher
   

    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!
   

4. 要检查代码库的更改内容

   1. 在 Linux 或 macOS 中，运行此 find 命令。

      $ find ./ -mmin -120 
      

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

   2. 在 Windows 中，在命令提示符中运行此命令。

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

      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
      

安装 url_launcher 会在 Flutter 应用目录中为所有目标平台添加配置文件和代码文件。

同时调试 Dart 和原生语言代码

本部分说明如何使用常规调试器调试 Flutter 应用中的 Dart 代码和任何原生代码。此功能允许您在编辑原生代码时利用 Flutter 的热重载。

使用 Android Studio 调试 Dart 和 Android 代码

要调试原生 Android 代码，您需要一个包含 Android 代码的 Flutter 应用。在本部分中，您将学习如何将 Dart、Java 和 Kotlin 调试器连接到您的应用。您不需要 VS Code 即可同时调试 Dart 和 Android 代码。本指南包括 VS Code 说明，以与 Xcode 和 Visual Studio 指南保持一致。

本部分使用在 更新测试 Flutter 应用 中创建的相同的示例 Flutter url_launcher 应用。

在终端中构建 Flutter 应用的 Android 版本

要生成所需的 Android 平台依赖项，请运行 flutter build 命令。

flutter build appbundle --debug

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

• 从 VS Code 开始
• 从 Android Studio 开始

使用 Xcode 调试 Dart 和 iOS 代码

要调试 iOS 代码，你需要一个包含 iOS 代码的 Flutter 应用。在本节中，你将学习如何将两个调试器连接到你的应用：通过 VS Code 和 Xcode 调试 Flutter。你需要同时运行 VS Code 和 Xcode。

本部分使用在 更新测试 Flutter 应用 中创建的相同的示例 Flutter url_launcher 应用。

在终端中构建 Flutter 应用的 iOS 版本

要生成所需的 iOS 平台依赖项，请运行 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)...

• 从 VS Code 开始
• 从 Xcode 开始

使用 Xcode 调试 Dart 和 macOS 代码

要调试 macOS 代码，你需要一个包含 macOS 代码的 Flutter 应用。在本部分中，你将学习如何将两个调试器连接到你的应用：通过 VS Code 和 Xcode 调试 Flutter。你需要同时运行 VS Code 和 Xcode。

本部分使用在 更新测试 Flutter 应用 中创建的相同的示例 Flutter url_launcher 应用。

在终端中构建 Flutter 应用的 macOS 版本

要生成所需的 macOS 平台依赖项，请运行 flutter build 命令。

flutter build macos --debug

Building macOS application...

• 从 VS Code 开始
• 从 Xcode 开始

使用 Visual Studio 调试 Dart 和 C++ 代码

要调试 C++ 代码，你需要一个包含 C++ 代码的 Flutter 应用。在本部分中，你将学习如何将两个调试器连接到你的应用：通过 VS Code 和 Visual Studio 调试 Flutter。你需要同时运行 VS Code 和 Visual Studio。

本部分使用在 更新测试 Flutter 应用 中创建的相同的示例 Flutter url_launcher 应用。

在 PowerShell 或命令提示符中构建 Flutter 应用的 Windows 版本

要生成所需的 Windows 平台依赖项，请运行 flutter build 命令。

C:\> flutter build windows --debug

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

• 从 VS Code 开始
• 从 Visual Studio 开始

资源

查看有关调试 Flutter、iOS、Android、macOS 和 Windows 的以下资源

Flutter

• 调试 Flutter 应用
• Flutter 检查器 和 DevTools 文档
• 性能分析

Android

您可以在 developer.android.com 上找到以下调试资源。

• 调试您的应用
• Android 调试桥 (adb)

iOS 和 macOS

您可以在 developer.apple.com 上找到以下调试资源。

• 调试
• Instruments 帮助

Windows

您可以在 Microsoft Learn 上找到调试资源。

• Visual Studio 调试器
• 了解如何使用 Visual Studio 调试 C++ 代码