使用原生語言除錯器

如果您只使用 Dart 程式碼編寫 Flutter 應用程式，您可以使用 IDE 的除錯器來除錯程式碼。Flutter 團隊推薦使用 VS Code。

如果您編寫特定平台的插件或使用特定平台的函式庫，您可以使用原生除錯器來除錯該部分的程式碼。

• 若要除錯以 Swift 或 Objective-C 編寫的 iOS 或 macOS 程式碼，您可以使用 Xcode。
• 若要除錯以 Java 或 Kotlin 編寫的 Android 程式碼，您可以使用 Android Studio。
• 若要除錯以 C++ 編寫的 Windows 程式碼，您可以使用 Visual Studio。

本指南說明如何將兩個除錯器連接到您的 Dart 應用程式，一個用於 Dart，另一個用於原生程式碼。

本指南說明如何使用 VS Code 來除錯您的 Flutter 應用程式。您也可以使用您慣用的 IDE，並安裝和設定 Flutter 和 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://flutter-docs.dev.org.tw/
   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. 按一下錯誤圖示 ()。這會在 VS Code 中開啟以下窗格

   • 除錯
   • 除錯主控台
   • Widget Inspector

   第一次執行除錯器所需的時間最長。

4. 測試除錯器。

   a. 在 main.dart 中，按一下這行

   dart

   _counter++;

   b. 按下 Shift + F9。這會在 _counter 變數遞增的位置新增一個中斷點。

   c. 在應用程式中，按一下 + 按鈕以遞增計數器。應用程式會暫停。

   d. 此時，VS Code 會顯示

   • 在編輯器群組中
     • main.dart 中醒目顯示的中斷點
     • Widget Inspector 的 Widget 樹狀結構中 Flutter 應用程式的 widget 階層
   • 在側邊欄中
     • 呼叫堆疊區段中應用程式的狀態
     • 變數區段中 this 區域變數的值
   • 在面板中
     • 除錯主控台中 Flutter 應用程式的記錄

VS Code 的 Flutter 插件會在 VS Code 使用者介面中新增許多元件。

啟動時，Flutter 除錯器會在 VS Code 介面中新增除錯工具。

以下螢幕截圖和表格說明每個工具的用途。

若要變更面板 (橘色) 在 VS Code 中顯示的位置，請前往檢視 > 外觀 > 面板位置。

您可以使用工具列透過任何除錯器進行除錯。您可以逐步執行、跳出和跳過 Dart 陳述式、熱重載或繼續執行應用程式。

圖示	動作	預設鍵盤快速鍵
	開始或繼續	F5
	暫停	F6
	逐步執行	F10
	逐步進入	F11
	逐步跳出	Shift + F11
	熱重載	Ctrl + F5
	熱重新啟動	Shift + 特殊 + F5
	停止	Shift + F5
	開啟 Widget Inspector

在本指南的其餘部分中，您需要更新測試 Flutter 應用程式。此更新會新增要除錯的原生程式碼。

1. 使用您慣用的 IDE 開啟 lib/main.dart 檔案。

2. 將 main.dart 的內容替換為下列程式碼。

   展開以檢視此範例的 Flutter 程式碼

   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),
             ],
           ),
         ),
       );
     }
   }

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 應用程式目錄中新增所有目標平台的設定檔和程式碼檔案。

本節說明如何除錯 Flutter 應用程式中的 Dart 程式碼，以及使用其常規除錯器的任何原生程式碼。此功能讓您可以在編輯原生程式碼時利用 Flutter 的熱重載功能。

若要除錯原生 Android 程式碼，您需要一個包含 Android 程式碼的 Flutter 應用程式。在本節中，您將學習如何將 Dart、Java 和 Kotlin 除錯器連接到您的應用程式。您不需要 VS Code 即可同時除錯 Dart 和 Android 程式碼。本指南包含 VS Code 指示，以與 Xcode 和 Visual Studio 指南保持一致。

這些章節使用在更新測試 Flutter 應用程式中建立的相同 Flutter url_launcher 應用程式範例。

若要產生所需的 Android 平台相依性，請執行 flutter build 命令。

flutter build appbundle --debug

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

若要除錯 iOS 程式碼，您需要一個包含 iOS 程式碼的 Flutter 應用程式。在本節中，您將學習如何將兩個除錯器連線至您的應用程式：透過 VS Code 連線 Flutter 和 Xcode。您需要同時執行 VS Code 和 Xcode。

這些章節使用在更新測試 Flutter 應用程式中建立的相同 Flutter url_launcher 應用程式範例。

若要產生所需的 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)...

若要除錯 macOS 程式碼，您需要一個包含 macOS 程式碼的 Flutter 應用程式。在本節中，您將學習如何將兩個除錯器連線至您的應用程式：透過 VS Code 連線 Flutter 和 Xcode。您需要同時執行 VS Code 和 Xcode。

這些章節使用在更新測試 Flutter 應用程式中建立的相同 Flutter url_launcher 應用程式範例。

若要產生所需的 macOS 平台相依性，請執行 flutter build 命令。

flutter build macos --debug

Building macOS application...

若要除錯 C++ 程式碼，您需要一個包含 C++ 程式碼的 Flutter 應用程式。在本節中，您將學習如何將兩個除錯器連線至您的應用程式：透過 VS Code 連線 Flutter 和 Visual Studio。您需要同時執行 VS Code 和 Visual Studio。

這些章節使用在更新測試 Flutter 應用程式中建立的相同 Flutter url_launcher 應用程式範例。

若要產生所需的 Windows 平台相依性，請執行 flutter build 命令。

C:\> flutter build windows --debug

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

請查看以下有關除錯 Flutter、iOS、Android、macOS 和 Windows 的資源

• 除錯 Flutter 應用程式
• Flutter inspector 和 DevTools 文件
• 效能分析

您可以在 developer.android.com 上找到以下除錯資源。

• 除錯您的應用程式
• Android Debug Bridge (adb)

您可以在 developer.apple.com 上找到以下除錯資源。

• 除錯
• Instruments 說明

您可以在 Microsoft Learn 上找到除錯資源。

• Visual Studio 除錯器
• 學習使用 Visual Studio 除錯 C++ 程式碼

除非另有說明，本網站上的文件反映 Flutter 的最新穩定版本。頁面最後更新於 2024-07-07。 檢視原始碼 或 回報問題。