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	日志等級篩選、支持搜索