Flutter DevTools 网页界面说明
1. 顶部导航栏
- Inspector：查看和调试 Widget 树，实时定位 UI 问题。
- Performance-- 性能分析面板，查看帧率、CPU 和 GPU 使用情况，识别卡顿和性能瓶颈。
- Memory-- 内存使用和对象分配分析，方便查找内存泄漏。
- Network--网络请求调试，查看请求详情和响应，方便调试接口问题。
- Logging--实时日志输出，查看 print 和框架日志。
- CPU Profiler--详细的 CPU 性能采样，帮助排查性能热点。
- Debugger--设置断点、单步调试、变量查看（结合 IDE 使用效果更好）。
- 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 | 日志等级筛选、支持搜索 |