Flutter 提供了丰富的性能调试工具。善用这些工具，可以精准定位性能瓶颈。

---

一、Flutter DevTools

运行以下命令打开 DevTools：

flutter run --profile   # 以 Profile 模式运行（接近真实性能）
flutter pub global activate devtools
flutter pub global run devtools

或在 VS Code 中按下 Cmd+Shift+P → Flutter: Open DevTools

1.1 Performance 页面（Timeline）

查看每帧的耗时详情：

【使用步骤】
1. 以 Profile 模式运行 App（flutter run --profile）
2. 打开 DevTools → Performance
3. 点击 Record，滑动或操作 App
4. 停止记录，查看 Timeline

【关注指标】
- UI Thread（蓝色）：超过 16ms = 渲染卡顿
- Raster Thread（绿色）：超过 16ms = GPU 压力
- 帧列表底部：红色帧 = 丢帧

1.2 Widget Inspector

检查 Widget 树结构和重建情况：

• Select Widget Mode：点击屏幕元素，在树中定位
• Highlight Repaints：高亮重绘区域（频繁闪烁的区域需要优化）
• Show Guidelines：显示布局对齐线

1.3 Memory 页面

检测内存泄漏和内存增长趋势：

【检测内存泄漏步骤】
1. 打开 Memory 页面
2. 进入某个页面，执行操作后返回
3. 点击 GC 强制垃圾回收
4. 观察 Dart Heap 是否下降
5. 如不下降，存在内存泄漏

---

二、Performance Overlay

在应用内叠加显示实时性能监控层：

MaterialApp(
  showPerformanceOverlay: true,  // 开启性能叠加层
  checkerboardRasterCacheImages: true, // 检查图片缓存
  checkerboardOffscreenLayers: true,   // 检查离屏渲染
  home: const MyApp(),
)

// 或通过快捷键（flutter run 状态下）
// 按 P 键切换 Performance Overlay

解读 Performance Overlay：

┌─────────────────────────────────────────┐
│  ░░░░░░░░░░░░░░░░░░░░░░░░░░░░░░  GPU   │
│  ░░░░░░░░░░░░░░                  UI    │
│  ↑ 绿线 = 16ms 基准线                   │
│  超过绿线 = 丢帧                         │
└─────────────────────────────────────────┘
  上方图表：Raster Thread（GPU 渲染）
  下方图表：UI Thread（Dart 代码执行）

---

三、代码级调试工具

3.1 debugPrintRebuildDirtyWidgets

打印每次参与重建的 Widget：

// 在 main() 中开启
import 'package:flutter/rendering.dart';

void main() {
  debugPrintRebuildDirtyWidgets = true; // 打印重建的 Widget
  debugPrintLayouts = true;              // 打印布局信息
  debugPaintSizeEnabled = true;          // 显示 Widget 边界
  runApp(const MyApp());
}

3.2 Timeline 手动标记

在关键代码段添加性能标记：

import 'dart:developer' as developer;

Future<void> loadProductList() async {
  developer.Timeline.startSync('LoadProductList');
  try {
    final products = await repository.fetchAll();
    setState(() => _products = products);
  } finally {
    developer.Timeline.finishSync();
  }
}

3.3 profile 包

dev_dependencies:
  flutter_driver:
    sdk: flutter

---

四、常用调试命令

# Profile 模式运行（关闭 Debug 断言，接近真实性能）
flutter run --profile

# Release 模式运行（最接近发布版性能）
flutter run --release

# 分析 APK 包体积
flutter build apk --analyze-size

# 输出 Widget 树快照
flutter screenshot

---

小结

工具	功能	使用场景
DevTools - Performance	逐帧分析 Timeline	定位 UI/GPU 线程瓶颈
DevTools - Widget Inspector	查看重建/树结构	找出不必要的重建
DevTools - Memory	内存快照分析	内存泄漏排查
Performance Overlay	实时帧率叠加显示	快速判断是否流畅
debugPrintRebuildDirtyWidgets	打印重建 Widget	找出频繁重建的组件

👉 下一节：7.3 优化实践