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".

感觉是有起来特别的不方便,要是忘记使用rR来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刷新模拟器 如下:

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

阅读 6.8k

推荐阅读
移动端技术
用户专栏

移动端技术汇总

1543 人关注
64 篇文章
专栏主页