如果你使用果粉信仰的 MacPro 進行 APP 開發，那你一定要試試！
目錄
- 前言
- 事情是這樣的
- 開始設定
- 參考資料
I. 前言
最近接到某個小小案子，專案平台需支援 Android，
一開始怕 deadline 的關係，所以簡單先用 webpack + PWA 建置，
最後再用 Cordova 封裝成 apk 提供安裝。
由於提早將專案完工...
乾脆來趁著機會學學 Flutter。
本篇記錄如何在 vscode 中，使用內建的 debug，
ㄧ次啟動 Android 與 iOS 兩個裝置，並且支援各種神器功能。
II. 事情是這樣的
你電腦不錯，想要同時執行 Android 與 iOS，
方便在開發時，可以確保雙平台的畫面與邏輯結果。
在多重裝置的啟用上，你可以直接開啟 terminal ，使用官方指令啟動所有裝置：
flutter run -d all
但卻無法在存檔 (Save) 程式碼時，自動更新 (Auto Update)，
通常我們使用指令啟動專案後，都會得到一段訊息：
雖然按下r可以進行 Hot Reload，但此一功能需要每次手動按，實在很麻煩...
人生而懶，懶覺除了使人恢復體力，更是科技進步的來源。
懶覺：指人貪睡，不愛起床。 多指早晨晚起。 如：他就愛睡懶覺，叫了幾次都不起床。
而本篇最主要的需求是要同時啟動雙平台裝置，即 Android 與 iOS。
並且透過 vscode ，來協助我們進行 debugger、auto hot reload。
慶幸的是，官方在 2019 年 12 初，釋出實驗版，
而同年底也正式支援此功能。其實距離現在也才短短不到 1 個月 XD。
原本筆者還不知道，於是查到早期文章的奇淫技巧...，
嚐盡各種苦頭，踩盡各種深坑。
（汗...
總而言之，趕緊來試試這新的功能吧！
III. 開始設定
1. 環境檢查
在設定前，請確保 Flutter 環境是 ok 的：
flutter doctor
● No issues found !
設定流程很簡單，基本上照著官方流程做就可以了：
2. 設定 launch.json
以專案為工作目錄，開啟 VSCODE ，
到左邊第4個蟲蟲，選擇 [ 建立 launch.json 檔案。 ]。
請選擇 [ Dart & Flutter ]，就會得到一個範本設定檔了。
接著到官方文件：
將 Setup 內的設定複製起來，全部覆蓋貼上。
{
"version": "0.2.0",
"configurations": [
{
"name": "Current Device",
"request": "launch",
"type": "dart"
},
{
"name": "Android",
"request": "launch",
"type": "dart",
"deviceId": "android"
},
{
"name": "iPhone",
"request": "launch",
"type": "dart",
"deviceId": "iphone"
},
],
"compounds": [
{
"name": "All Devices",
"configurations": ["Android", "iPhone"],
}
]
}
存！好！就這樣！
設定過後，你的專案也會多一個 .vscode / launch.json 檔案。
3. 啟動模擬器
接下來讓我們來執行看看，
請確保你的模擬器是否都有在執行。
如果 VSCODE 右下顯示，[ No Device ]，請記得點選，然後開啟。
例如筆者的 Android 已經啟動，但 iOS 還沒啟動，
廢話不多說，啟動就對了！
你知道嗎？尚未開啟的模擬器會有前綴 Start 的字眼。
4. 進行偵錯
再剛剛的 debug 頁籤中，選擇 [ All Devices ]。
如果你要連接的裝置，是目前作用中的一台裝置，那就選 [ Current Device ]。
然後點選 綠綠的按鈕 執行！
同時你也一定很興奮著看著畫面在跑：
確認模擬器都開始執行你的專案。
除了模擬器，也會自動打開網頁，提供 Dart DevTools！
5. Auto Hot Reload
接著你會開始瘋狂的修改與存檔，
並且可以看到偵錯主控台多次的 Reloaded 紀錄。
6. 快速偵錯
當你執行過一次後，VSCODE 底部會顯示快速偵錯的按鈕選單。
括弧內是你的專案名稱喇！
點選後，上頭會出現選單，
你就可以快快樂樂選擇你要的偵錯環境囉！
IV. 參考資料
有勘誤之處，不吝指教。ob'_'ov
