偵錯你的 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 指令。

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。

   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 標題下方。