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

1、首先是找到vscode断点调试按钮

2、然后点击debug断点，第一次会提示你选择语言，选择Dart&Flutter即可，我下面这个是选择完调试语言之后的页面

3、debug运行之后你本地vscode可能会出现下面提示

这个是让你激活Dart DevTools工具，可以直接点击左侧的激活按钮，会自动在浏览器上打开调试页面，如下：

那有的同学说了我这根本就没有弹出这个弹窗啊，说明你之前已经绑定过DevTools了，你只需要在vscode中使用快捷键command+shift+p打开如下工具栏：

然后在里面输入Open DevTools也是能直接打开并跳转到浏览器的调试窗口的；

上面的端口号都是默认的，我这没有主动修改端口号。

4、那么以上工作完成之后我们就能够在vscode里面进行代码调试了

（当然了你也可以不使用DevTools）也能直接在vscode里面调试的

在你想要调试的地方打上断点 如下：

在触发了断点执行之后：

这样就可以在你本地一步步的断点调试你本地代码了。

5、热更新

使用debug模式的时候本地更改代码之后不用在使用r命令刷新模拟器了，debug模式值自己重新reload刷新模拟器 如下：

以上这些都是本人在开发过程中的一些总结，希望能帮到你们，感谢各位的支持。