即使你之前没有接触过客户端开发，没有使用过Android Studio，但看到Android Studio友好的操作界面，你也能猜到点击 按钮来启动项目（这也是上面推荐Android Studio编辑器的原因）。

再次点击启动按钮，启动Flutter应用。

控制台中，会输出相应的启动日志

同时手机模拟器上，也已经呈现了应用。恭喜，到这里你已经成功开启了第一个Flutter项目！🎉

项目调试

• 热更新

Flutter开发的时候支持Hot reload（热更新）。我们可以在初始化的项目中，修改应用的标题，将Flutter Demo Home Page 改为Hello world。 在编辑器中保存修改（mac环境是ctrl+s）。

眨眼之间，模拟器上是的显示就发生了变化。

• Dart语言错误调试

Flutter开发使用的是Dart语言，在开发中，如果发生语法错误，Android Studio也会友好的提示我们错误在哪里。

举个🌰，在刚才代码中，编写一些错误的语法。

编辑器会以多种形式告知你错误在哪。

1）当你【保存】以后，编辑器底部会有错误提示

2）当你编写时，编辑器就会友好的以红色波浪线〰告知你某一行代码编写错误

3）当你鼠标hover在红色波浪线〰上时，编辑器还会提示你具体的错误信息以及可能的修改方案

除了上述3种方式以外，Android Studio中还可以唤起Dart Analysis, 专门分析Dart语法错误。

在Dart Analysis中，会显示出具体的错误信息，以及错误的行数，方便错误的定位。

• 应用视图调试

Flutter应用借鉴了React的开发思想，Flutter应用的UIi界面都是由Widgets组建而成的。

Flutter提供了一款开发工具可以帮助我们查看应用的Widgets视图。

这个工具非常强大，可以提供很多的调试。第一种就是Widgets检测工具Flutter Inspector,它可以追踪选中的Widget，并呈现其设置的属性。（类似于Chrome为web页面提供的Inspect工具，和Firefox提供的Inspector）

对于Flex布局的Widgets，还支持图形化的布局尺寸展示。

但是对于非Flex布局的Widgets，目前暂不支持展示。（让我们期待下DevTools后续的升级）

• 日志打印

日志输出在我们开发的时候，能够帮助我们追踪程序的执行，快速定位问题。Flutter中日志查看仍然在DevTools中，此时选中Logging Tab。 官方介绍了两种打印日志的方式。

第一种是Flutter SDK中自带的stdxx & print方法。（stdout 和 print方法没看出来有什么区别😓）

stdout: 普通的日志输出
print：普通的日志输出
stderr：错误日志输出（工具中呈红色展示）

这种方式，官方介绍说在日志过多时可能会存在遗漏的情况（我快速点击+号，没有复现），可以采用debugPrint方法替代。debugPrint是对print方法包裹了一层throttle。

第二种是采用第三方的日志库，官方提供了一个dart:developer库，功能上比基础的强大些，可以支持打印更多的信息。

具体使用可以看下官方文档.

• 断点调试

Flutter的代码的断点调试在Android Studio上能够进行，在DevTools中也能够进行。鉴于在DevTools中执行的效果会更直观，这里只介绍在DevTools中的调试过程。

设置断点方式比较简单，在需要调试的那一行的左侧，点击。

这里演示设置的断点是在“响应点击事件的函数”中，在点击“+”号触发Tap事件以后，触发调试。如果你之前在web页面进行断点调试的话，这里的操作应该不会陌生，这里有Step in（单步进入）、Step Over（单步执行）、Step Out(单步跳出)方法可以调试运行的代码。

并且在工具面板上，还有调用栈（Call Stack）显示目前执行到那个库的哪行代码。

性能监测

DevTools还有其它的一些强大的功能，比如监测内存使用，性能，网络情况等，等Flutter实战深入以后再来介绍。

• 最后

官方还提供了很多其他的调试方式，比如如何调试动画、利用语法设置调试等。由于本文是Flutter实战的第一篇，因此这里不过多的介绍这些高阶语法相关的知识，后续随着实战的深入，我们再来探讨和学习更多的调试方法。

参考

• DevTools
• debugging