flutter 项目调试、flutter run --debug调试模式 devtools界面说明

Flutter DevTools 网页界面说明

1. 顶部导航栏

1. Inspector：查看和调试 Widget 树，实时定位 UI 问题。
2. Performance-- 性能分析面板，查看帧率、CPU 和 GPU 使用情况，识别卡顿和性能瓶颈。
3. Memory-- 内存使用和对象分配分析，方便查找内存泄漏。
4. Network–网络请求调试，查看请求详情和响应，方便调试接口问题。
5. Logging–实时日志输出，查看 print 和框架日志。
6. CPU Profiler–详细的 CPU 性能采样，帮助排查性能热点。
7. Debugger–设置断点、单步调试、变量查看（结合 IDE 使用效果更好）。
8. Flutter Inspector --可视化查看和调试 Widget 树，布局信息，选中控件查看属性和尺寸。

2. 主视图区

• 不同功能模块显示不同内容：
  • Inspector：显示 Widget 树和屏幕预览高亮。
  • Performance：图表展示帧率和帧时间。
  • Memory：内存快照和分配详情。
  • Network：网络请求列表。
  • Logging：日志滚动窗口。

3 . Widget 树结构（Inspector 下）

• 展示当前页面的 Widget 组成树，层级清晰。
• 点击树节点，会在屏幕上高亮对应 Widget。
• 右侧面板展示选中 Widget 的属性、尺寸、约束等详细信息。
• 可以切换到“选择模式”，直接点击界面上的 Widget 来定位。

4. 日志窗口（Logging 下）

• 实时打印你的 print()、debugPrint() 和系统日志。
• 支持过滤和搜索日志信息。

5. 性能图表（Performance 下）

• FPS 图：帧率变化曲线，卡顿时会明显下降。
• 帧时间分解：渲染耗时分解，CPU vs GPU 。
• 可以录制帧数据，分析具体哪一帧出问题。

6. 内存快照（Memory 下）

• 显示当前内存使用总量。
• 可拍摄快照，对比内存变化，找内存泄漏。

7. 网络请求（Network 下）

• 展示应用所有网络请求详情（URL、状态码、耗时、响应内容）。
• 方便排查接口错误和性能。

8. Debugger（调试器）

• 设置断点，查看变量，控制执行流程。
• 在浏览器中操作时建议配合 IDE 使用更高效。

总结

面板名称	作用	备注
Flutter Inspector	查看 Widget 树，布局调试	最常用调试布局工具
Performance	性能分析，检测卡顿	帧率、CPU/GPU 使用监控
Memory	内存分析，检测泄漏	快照、分配情况
Network	网络请求查看和调试	方便接口调试
Logging	日志输出	实时调试信息
Debugger	断点调试，单步执行	结合 IDE 最佳
Timeline	事件时间线分析	帧渲染及事件监控

✅ 示例更新 UI 功能（从 Flutter 3.16+ 开始）

页面	更新内容（相较旧版）
Inspector	增强布局可视化、高亮支持、布局分析
Layout Explorer	全新模块，用于分析 Column、Row、Stack 等布局
Performance	增加 timeline、卡顿识别、Jank 捕捉
Network	支持 JSON 数据折叠显示、耗时分析
Logging	日志等级筛选、支持搜索