如果你只使用 Dart 语言开发 Flutter 应用，并且不使用特定于平台的的库或者功能，你可以使用 IDE 的调试器调试你的代码。只有这篇指南的第一部分「调试 Dart 代码」对你有用。

如果你正在开发特定于平台的的插件或者使用由 Swift，ObjectiveC，Java 或 Kotlin 语言编写的特定于平台的库，你可以使用 Xcode（用于 iOS）或者 Android Gradle（用于 Android）调试这部分代码。本文介绍如何将用于 Dart 和用于原生代码的两个调试器连接到你的 Dart 应用。

Flutter实战经验(四):使用原生的调试器

1. 调试 Dart 代码

你可以使用 IDE 进行一般的 Dart 调试。以下内容针对 Android Studio 进行说明，但你也可以使用你喜欢的安装并配置好 Flutter 和 Dart 插件的编辑器来进行调试。

小提示：

推荐连接到真机进行调试，而不是使用不支持 profie 构建模式的仿真器或模拟器。更多信息参考：Flutter实战经验（三）：构建模式的选择

1.1 Dart 调试器

使用 Android Studio 打开你的项目。
通过单击调试图标，同时打开调试面板并在控制台中运行应用。首次运行应用是最慢的，你会发现窗口底部的调试面板看起来会像这样：

你可以设置调试面板的显示位置，甚至可以用调试面板右侧的齿轮将其拆分到独立的窗口。对于 Android Studio 中的任何检查器都是如此。

在 counter++ 这一行上添加断点。
在应用里，点击 + 按钮（FloatingActionButton，或者简称 FAB）来增加数字。应用会暂停。
以下截图显示：

编辑面板中的断点。

当在断点处暂停时，在调试面板中显示应用的状态。

this 变量展开并显示其值。

你可以 step in/out/over Dart 语句、热重载和恢复执行应用、以及像使用其他调试器一样来使用 Dart 调试器。 5: Debug 按钮切换调试面板的显示。

1.2 Flutter inspector

Flutter 插件提供了另外两个可能给你提供帮助的功能。Flutter inspector 是一个用来可视化以及查看 Flutter widget 树的工具，并帮助你：

了解现有布局
诊断布局问题

你可以使用 Android Studio 窗口右侧的垂直按钮切换检查器的显示。

1.3 Flutter outline

Flutter Outline 以可视形式显示构建方法。注意在构建方法上可能与 widget 树不同。你可以使用 Android Studio 窗口右侧的垂直按钮切换 outline 的显示。

这篇指南剩下的部分介绍了如何搭建原生代码的调试环境。你应该可以想象到，对于 iOS 和

Android 这个过程是不同的。

小提示

通过安装 Presentation Assistant 插件来成为 Android Studio 的专业用户。你可以打开 Preferences > Plugins > Browsing repositories… 并在搜索框中输入 Presen 来找到并安装这个插件。

当你安装并重启 Android Studio 之后，通过使用以下功能这个插件可以帮助你成为一个专业用户：

显示你执行的任何操作的名字和 Windows/Linux/Mac 的快捷键。
允许你搜索并找到可用的操作、设置、文档等等。
允许你切换首选项，打开视图或者执行操作。
允许你设置键盘快捷键。（无法在 Mac 上运行此功能？）

例如，尝试下这个：

当焦点在编辑面板中时，输入 command-Shift-A（Mac）或者 shift-control-A（Windows 和 Linux）。该插件会同时显示「查找」面板并显示在所有三个平台上执行此操作的提示。

Presentation assistant's Find panel

Presentation assistant 的「查找」面板

Presentation assistant's action hint for opening its Find panel on Mac, Windows and LinuxPresentation assistant 的在 Mac、Windows 和 Linux 上打开「查找」面板的操作提示。

输入 attach 显示以下内容：

更新之后，你可以输入 Flutter 或者 Dart 来查看是否有新的可用的操作。

使用 Escape 隐藏 Presentation Assistant 的「查找」面板。