使用原生語言偵錯程式

如果您只使用 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 應用。您也可以使用安裝並配置了 Flutter 和 Dart 外掛的首選 IDE。

以下步驟說明了如何使用 Dart 偵錯程式和預設的示例 Flutter 應用。VS Code 中顯示的元件在除錯您自己的 Flutter 專案時也有效。

1. 建立一個基本的 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.club.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.
   

   content_copy

   $ cd my_app
   

   content_copy

2. 使用 VS Code 開啟 Flutter 應用中的 lib\main.dart 檔案。

3. 單擊蟲子圖示 ()。這將在 VS Code 中開啟以下面板

   • 除錯
   • 除錯控制檯
   • Widget 檢查器

   首次執行偵錯程式需要的時間最長。

4. 測試偵錯程式。

   a. 在 main.dart 中，單擊此行

   dart

   _counter++;
   

   content_copy

   b. 按 Shift + F9。這將在 _counter 變數遞增的地方新增一個斷點。

   c. 在應用中，單擊 + 按鈕以遞增計數器。應用將暫停。

   d. 此時，VS Code 將顯示

   • 在 編輯器組 中
     • main.dart 中高亮的斷點
     • 在 Widget 檢查器 的 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 + Special + F5
停止	Shift + F5
開啟 Widget 檢查器

在本指南的其餘部分，您需要更新測試 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),
             ],
           ),
         ),
       );
     }
   }
   

   content_copy

3. 要將 url_launcher 包新增為依賴項，請執行 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. 要檢查程式碼庫的更改

   1. 在 Linux 或 macOS 中，執行此 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. 在 Windows 中，在命令提示符中執行此命令。

      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

安裝 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 和 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 應用。在本節中，您將學習如何將兩個偵錯程式連線到您的應用：Flutter 透過 VS Code 和 Xcode。您需要同時執行 VS Code 和 Xcode。

本節使用在 更新測試 Flutter 應用 中建立的相同的示例 Flutter url_launcher 應用。

要生成所需的 macOS 平臺依賴項，請執行 flutter build 命令。

flutter build macos --debug

Building macOS application...

要除錯 C++ 程式碼，您需要一個包含 C++ 程式碼的 Flutter 應用。在本節中，您將學習如何將兩個偵錯程式連線到您的應用：Flutter 透過 VS Code 和 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 除錯橋 (adb)

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

• 除錯
• Instruments 幫助

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

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