除錯您的 add-to-app 模組

如果您使用 VS Code 除錯大部分程式碼，請從本節開始。

1. 要開啟 Flutter 應用目錄，請前往 **檔案** > **開啟資料夾...**，然後選擇 my_app 目錄。

2. 開啟 lib/main.dart 檔案。

3. 如果您可以為多個裝置構建應用，則必須先選擇裝置。

   前往 **檢視** > **命令面板...**

   你也可以按 Ctrl / Cmd + Shift + P。

4. 鍵入 flutter select。

5. 點選 **Flutter: Select Device** 命令。

6. 選擇您的目標裝置。

7. 點選除錯圖示（）。這將開啟 **除錯** 窗格並啟動應用。等待應用在裝置上啟動，並等待除錯窗格顯示 **已連線**。偵錯程式首次啟動時會花費更長時間。後續啟動會更快。

   此 Flutter 應用包含兩個按鈕：

   • 在瀏覽器中啟動：此按鈕會在您裝置的預設瀏覽器中開啟此頁面。
   • 在應用中啟動：此按鈕會在您的應用內開啟此頁面。此按鈕僅適用於 iOS 或 Android。桌面應用會啟動瀏覽器。

您可以配置 VS Code，以便在您開始除錯時自動附加到您的 Flutter 模組專案。要啟用此功能，請在您的 Flutter 模組專案中建立一個 .vscode/launch.json 檔案。

1. 前往 **檢視** > **執行**。

   您也可以按下 Ctrl / Cmd + Shift + D。

   VS Code 會顯示 **執行和除錯** 邊欄。

2. 在此邊欄中，點選 **建立 launch.json 檔案**。

   VS Code 會在頂部顯示 **選擇偵錯程式** 選單。

3. 選擇 **Dart & Flutter**。

   VS Code 會建立並開啟 .vscode/launch.json 檔案。

   展開以檢視 launch.json 檔案示例

   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. 要附加，請前往 **執行** > **開始除錯**。

   你也可以按 F5。

要在 Xcode 中附加到 Flutter 應用

1. 前往 **除錯** > **附加到程序** >

2. 選擇 **Runner**。它應該在 **可能的 targets** 標題下的 **附加到程序** 選單的頂部。