本文首发于公众号：移动开发那些事Flutter DevTools 之 Debugger 使用指南：常见调试技巧
Flutter DevTools 的 Debugger 是解决开发中逻辑错误、性能异常的核心工具，它能让开发者暂停代码执行、观察程序状态、追踪执行流程，相比 print 打印调试，效率提升数倍。
1 如何启动
首先，确保项目已连接设备（模拟器 / 真机），启动应用（flutter run）。
这里需要注意的是的，需要以debug的模式打开，其他模式打开是看不到Debugger选项
然后会在底下的页面看到一个Debugger的图标，直接点击，就能在浏览器打开了
2 断点调试：精准控制代码执行
断点是 Debugger 的基础，通过在关键代码行设置断点，可让程序在指定位置暂停，方便观察状态,断点最基础的设置方式（在IDE中点击，本文以Android Studio为例）：
-
设置断点：点击代码行号左侧的空白区域，出现红色圆点即表示断点设置成功（支持 Dart 代码和 Flutter 框架源码）。
-
删除断点：再次点击红色圆点，或在断点管理面板（右侧「
Breakpoints」）中右键删除。 -
禁用断点：右键断点选择
Disable，圆点变为灰色，暂不生效但不删除。
2.2 高级断点操作
2.2.1 条件断点
条件断点： 仅当满足特定条件时才触发暂停，适合排查偶发问题，特别是在某个方法会在很多地方调用时特别有效
例如在某个断点的文件里有一个 _getMap的方法，我们就可以在console里输入方法的调用：_getMap("global_xx") 来获取到某个执行的值，用于判断逻辑是否正常
-
操作：右键断点 → 选择「Condition」→ 输入 Dart 表达式（如
index == 5、key == config_v3）。 -
场景：列表渲染异常时，仅在特定索引处暂停。
2.2.2 日志断点
日志断点：不暂停程序，仅输出日志，避免打断正常流程。
-
操作：右键断点 → 选择
More→ 输入日志内容（支持{变量名}引用变量，如用户ID：{``user.id``}）。 -
场景：统计接口调用次数，无需暂停程序。
2.2.3 异常断点
异常断点：：捕获未处理的异常时自动暂停，快速定位崩溃原因。
-
操作：右键断点 → 选择「More」 在左侧「Breakpoints」面板中，勾选需要的「Exceptions」（默认未开启）;
-
场景：解决应用崩溃但无明确报错信息的问题。
2.3. 断点控制快捷键
-
继续执行：
F9（Resume），跳过当前断点，直到下一个断点。 -
单步执行：
F10（Step Over），执行当前行，不进入函数内部。 -
步入函数：
F11（Step Into），进入当前行调用的函数内部。 -
步出函数：
Shift+F11（Step Out），从当前函数退出到调用处。 -
运行到光标处：
Ctrl+R（Run to Cursor），快速执行到光标所在行（无需设置断点）。
3 实用调试技巧
3.1 变量操作技巧
-
修改变量值：在「Locals」或「Watches」面板中，双击变量值可直接修改（如将
isLoading从true改为false），无需修改代码即可测试不同场景。 -
过滤变量：在「Locals」面板顶部输入关键词，快速筛选目标变量（如输入
user只显示与用户相关的变量）。 -
查看 Flutter 组件状态：对于
Widget实例，可展开_widget查看构造参数，展开_state查看对应的State实例及状态变量，快速定位组件渲染异常原因（如state未更新、props传递错误）。
3.2 调用栈分析：追踪代码执行流程
当程序暂停时，Call Stack（调用栈）面板会显示从程序启动到当前断点的完整执行路径，帮助定位代码调用来源，调用栈相关的操作用法：
-
查看调用路径：面板中自上而下显示调用顺序（顶部为当前函数，底部为程序入口），点击任意栈帧可跳转到对应的代码行。
- 示例：若在
onTap回调中暂停，调用栈可能显示MyButton.build → GestureDetector.onTap → _MyButtonState.handleTap，清晰看到事件触发流程。
- 示例：若在
-
切换栈帧：选中不同栈帧时，
Locals面板会同步显示该栈帧作用域的变量，方便查看上一级调用的参数状态。- 场景：排查参数传递错误时，可切换到调用方栈帧，查看传递给当前函数的参数是否正确。
3.3 动态测试代码逻辑
在断点暂停状态下，可通过底部的Console功能动态执行 Dart 代码，无需修改源码即可测试逻辑、修改状态。
-
计算表达式：
10 + 20 * 3→ 结果70。 -
调用函数：
getUserInfo(1)→ 直接执行函数并返回结果。 -
修改状态：
state.isLoading = false→ 实时修改State变量，观察 UI 变化。
4 参考
公众号的文章里有更详细的一些示意截图，有需要的小伙伴可去公众号查看详细的：移动开发那些事Flutter DevTools 之 Debugger 使用指南：常见调试技
