Flutter DevTools

/ Flutter

前言

Flutter DevTools 是一組強大的工具，可以幫助你調試和分析 Flutter 應用的性能和行為。

VS Code啟動

  • 方法1：在你的 Flutter 應用運行後，你會在控制台看到 DevTools 的啟動連結（通常是 localhost），點擊連結會在默認瀏覽器中打開 DevTools。
  • 方法2：如果沒有看到連結，可以在 Debug Console 輸入 flutter pub global run devtools 或直接從 IDE 的工具欄中啟動。
  • 方法3：
    1. 在 VS Code 中，按 Cmd+Shift+P（Mac）或 Ctrl+Shift+P（Windows）打開命令面板。
    2. 輸入並選擇 Flutter: Open DevTools，然後選擇你想要的工具（例如 Inspector、Memory、Performance 等）。這會在瀏覽器中打開 DevTools。

設定自動啟動DevTools

進入 VS Code 設置，搜索「Flutter」並確保 dart.flutterDevTools 設置為 true，這樣可以確保每次啟動應用時自動加載 DevTools。

如果使用的是代理或防火牆，可能會阻止 DevTools 的啟動。嘗試在開放的網絡環境下運行 Flutter 應用。

如果以上步驟無效，請重啟 VS Code 並再次嘗試。

DevTools主要功能

功能描述細分功能
Widget Inspector用於檢查和調試 widget 樹– 查看 widget 層次結構和屬性 – 高亮顯示應用界面上對應的 widget – 查看 widget 的布局約束和調整屬性
Performance分析應用的性能問題– 查看幀率（FPS）和渲染時間 – 檢測性能瓶頸 – 記錄並分析 timeline
Memory分析內存使用情況– 查看內存分配、使用和釋放情況 – 檢測內存泄漏 – 拍攝內存快照進行詳細分析
Network查看網絡請求和響應– 查看 HTTP 請求的 URL、方法、狀態碼 – 檢查請求頭和響應數據
Logging查看應用的日誌輸出– 過濾日誌消息 – 檢查錯誤和警告
CPU Profiler分析 CPU 使用情況– 查看方法的執行時間 – 確定計算密集型操作的性能瓶頸
App Size分析應用的 APK/IPA 文件大小– 找出佔用最多空間的資源 – 減少無效資源

使用Widget Inspector 調教畫面

功能詳細描述
查看 Widget 樹層次結構Widget Tree：顯示應用的 widget 層次結構，以樹狀結構呈現，幫助理解 widget 的父子關係，尤其適合複雜布局。選中 Widget：點擊某個 widget，右側會顯示其詳細屬性（位置、大小等）。
Select Widget Mode選擇模式：啟用後，可以直接在應用界面上點擊區域，DevTools 將自動定位到相應的 widget。快速調試：方便找到 widget 的位置並檢查其屬性。
Layout Explorer布局調試：提供視覺化工具來檢查和調整 widget 的布局屬性，如寬度、高度、間距（padding、margin）、對齊方式等。調整屬性：可以直接調整屬性，立即查看界面變化。
Show Debug Paint顯示調試畫線：啟用後，DevTools 會在界面上顯示每個 widget 的邊框和布局線條，有助於檢查對齊、間距和大小。定位布局問題：適合調試對齊或間距問題，直觀顯示 widget 的佈局。
Widget 屬性檢查屬性查看：選中某個 widget 後，右側屬性面板顯示詳細屬性（如文本、顏色、大小）。實時更新：部分屬性支持即時更新，可立即在界面上查看變化，方便試驗設計效果。
Alignment and Constraints查看約束信息：檢查 widget 的約束條件，如最小和最大寬高值，這些約束會影響布局。分析對齊：查看 widget 的對齊方式，調整定位和分佈，避免對齊問題。
檢查 Overflow 問題溢出檢查：當 widget 超出容器時，會在界面上顯示紅色邊框（overflow）。快速解決方法：使用 Widget Inspector 檢查 overflow widget，並調整屬性（如 flex、Expanded）來解決。

實際上幫助我校正畫面的範例

開啟Select Widget Mode，點擊想要查看的組件

發現ChipWidget竟然，本身有Margin

可以在模擬器直接切換另一個widget