除錯您的 add-to-app 模組

如果您習慣在 VS Code 中除錯大部分程式碼，請從本節開始。

1. 要開啟 Flutter 應用目錄，請轉到 File（檔案） > Open Folder...（開啟資料夾...） 並選擇 my_app 目錄。

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

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

   轉到 View（檢視） > Command Palette...（命令面板...）

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

4. 輸入 flutter select。

5. 點選 Flutter: Select Device（Flutter：選擇裝置） 命令。

6. 選擇您的目標裝置。

7. 點選除錯圖示（）。這將開啟 Debug（除錯） 面板並啟動應用。等待應用在裝置上啟動，並觀察除錯面板顯示 Connected（已連線）。偵錯程式首次啟動耗時較長。後續啟動速度會更快。

   此 Flutter 應用包含兩個按鈕

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

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

1. 轉到 View（檢視） > Run（執行）。

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

   VS Code 會顯示 Run and Debug（執行和除錯） 側邊欄。

2. 在此側邊欄中，點選 create a launch.json file（建立 launch.json 檔案）。

   VS Code 會在頂部顯示 Select debugger（選擇偵錯程式） 選單。

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"
           }
       ]
   }
   

   content_copy

4. 要進行連線，請轉到 Run（執行） > Start Debugging（開始除錯）。

   你也可以按 F5。

要在 Xcode 中連線到 Flutter 應用

1. 轉到 Debug（除錯） > Attach to Process（連線到程序）。

2. 選擇 Runner。它應該出現在 Attach to Process（連線到程序） 選單頂部，位於 Likely Targets（可能的除錯目標） 標題下。