Robby Wu 的技術 Blog

如果你使用果粉信仰的 MacPro 進行 APP 開發，那你一定要試試！

ref：Kody Technolab.

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，但此一功能需要每次手動按，實在很麻煩...

人生而懶，懶覺除了使人恢復體力，更是科技進步的來源。

懶覺：指人貪睡，不愛起床。多指早晨晚起。如：他就愛睡懶覺，叫了幾次都不起床。

ref: 漢語網

而本篇最主要的需求是要同時啟動雙平台裝置，即 Android 與 iOS。

並且透過 vscode ，來協助我們進行 debugger、auto hot reload。

慶幸的是，官方在 2019 年 12 初，釋出實驗版，

而同年底也正式支援此功能。其實距離現在也才短短不到 1 個月 XD。

原本筆者還不知道，於是查到早期文章的奇淫技巧...，

嚐盡各種苦頭，踩盡各種深坑。

（汗...

總而言之，趕緊來試試這新的功能吧！

III. 開始設定

1. 環境檢查

在設定前，請確保 Flutter 環境是 ok 的：

flutter doctor

● No issues found !

設定流程很簡單，基本上照著官方流程做就可以了：

Multi device debugging in VS Code

2. 設定 launch.json

以專案為工作目錄，開啟 VSCODE ，

到左邊第4個蟲蟲，選擇 [ 建立 launch.json 檔案。 ]。

請選擇 [ Dart & Flutter ]，就會得到一個範本設定檔了。

接著到官方文件：

Multi device debugging in VS Code

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