vscode中調試flutter很是實用方便

前言

以前每次啓動flutter時首先是要open -a Simulator打開本地的模擬器（我這裏是Mac Xcode的iOS模擬器），而後在運行flutter run命令，這是纔會把程序運行的模擬器；

Launching lib/main.dart on iPhone Xʀ in debug mode...
Running Xcode build...                                                  
 ├─Assembling Flutter resources...                           6.3s
 └─Compiling, linking and signing...                         5.3s
Xcode build done.                                           13.0s
Syncing files to device iPhone Xʀ...                                    
 2,176ms (!)

在每次修改代碼時都要進行以下操做：

🔥  To hot reload changes while running, press "r". To hot restart (and rebuild state), press "R".
An Observatory debugger and profiler on iPhone Xʀ is available at: http://127.0.0.1:57979/DumG7IuwegU=/
For a more detailed help message, press "h". To detach, press "d"; to quit, press "q".

感受是有起來特別的不方便，要是忘記使用r 或 R來reload的話還覺得本身代碼寫錯了。

那麼平時開發的使用咱們該如何來操做呢？

debug

一、首先是找到vscode斷點調試按鈕

二、而後點擊debug斷點，第一次會提示你選擇語言，選擇Dart&Flutter便可，我下面這個是選擇完調試語言以後的頁面

三、debug運行以後你本地vscode可能會出現下面提示

這個是讓你激活Dart DevTools工具，能夠直接點擊左側的激活按鈕，會自動在瀏覽器上打開調試頁面，以下：

那有的同窗說了我這根本就沒有彈出這個彈窗啊，說明你以前已經綁定過DevTools了，你只須要在vscode中使用快捷鍵command+shift+p打開以下工具欄：

而後在裏面輸入Open DevTools也是能直接打開並跳轉到瀏覽器的調試窗口的；

上面的端口號都是默認的，我這沒有主動修改端口號。

四、那麼以上工做完成以後咱們就可以在vscode裏面進行代碼調試了

（固然了你也能夠不使用DevTools）也能直接在vscode裏面調試的

在你想要調試的地方打上斷點 以下：

在觸發了斷點執行以後：

這樣就能夠在你本地一步步的斷點調試你本地代碼了。

五、熱更新

使用debug模式的時候本地更改代碼以後不用在使用r命令刷新模擬器了，debug模式值本身從新reload刷新模擬器 以下：

以上這些都是本人在開發過程當中的一些總結，但願能幫到大家，感謝各位的支持。