Flutter開發之Dart DevTools

Dart DevTools 簡介

Flutter是Google開源的一個跨平臺 UI 工具包，能夠幫助開發者經過一套代碼庫高效構建多平臺精美應用，支持移動、Web、桌面和嵌入式平臺。同時，它也是Google將來的 Google Fuchsia 應用構建的主要方式。目前，Flutter徹底開源、免費，擁有寬鬆的開源協議，適合商業項目。

使用Flutter開發跨平臺應用時，常常須要用到一個開發者工具，即Dart DevTools，Dart DevTools是一套用於Dart和Flutter應用開發的性能和調試工具，能夠用它來檢測和分析應用的性能，以及用它來調試應用日誌和進行內存分析等。

目前，Dart DevTools支持的功能有以下一些：

• 檢查和分析應用程序的UI佈局和狀態。
• 診斷應用的UI 性能問題。
• 檢測和分析應用程序的CPU使用狀況。
• 分析應用程序的網絡使用狀況。
• Flutter或Dart應用程序的源代碼級調試。
• 調試Flutter或Dart應用程序的內存使用狀況和分析內存問題。
• 查看運行的Flutter或Dart應用程序的通常日誌和診斷信息。

安裝DevTools

使用DevTools以前須要先安裝DevTools插件，若是尚未安裝，能夠先安裝它。

Android Studio

默認狀況下，只要安裝了Flutter開發環境，基本就已經安裝了DevTools工具，安裝以後運行項目會在DevTools工具欄看到以下圖所示的工具集。

使用DevTools進行應用程序調試時，能夠先在Run視圖中選擇Open DevTools工具欄，而後在Debug視圖中選擇Open DevTools工具欄進行操做，以下圖所示。

具體的調試和分析技巧會在後面講到。

VS Code

若是使用的是VS Code集成開發環境，那麼須要先在VS Code中安裝Dart DevTools插件，依次選擇【View】→【Command Palette…】打開搜索菜單。在菜單中輸入install，並選擇Extensions：Install Extension，而後在輸入框中輸入Dart DevTools點擊安裝便可，以下圖所示。
第一次啓動DevTools插件時，會看到下圖所示的升級提示。

當點擊【Open】按鈕時就會在瀏覽器中啓動並自動鏈接調試窗口，以下圖所示。

DevTools使用技巧

最近，Google對 Dart DevTools 進行了升級，併發布了最新的版本，對 Dart 和 Flutter 代碼調試和性能分析進行了優化。Flutter官方選擇以 Web 應用的形式交付 DevTools，這是由於能夠輕鬆地將其集成到咱們全部目標平臺和 IDE 的現有工具體驗中，以 Web 形態構建 DevTools 也可以帶來更好的用戶體驗。

目前，DevTools是一套在瀏覽器中運行的獨立工具，這些工具提供了額外的監測等功能，而這些功能是沒法在 IDE 中顯示的，之因此這樣設計，是由於考慮到跨平臺調試的須要。

最新版本的 DevTools 是使用 Flutter 編寫的 ，而以前用的是 Dart 編寫的，所以在最新的版本中，改進界面並添加全新的功能。使用最新版的DevTools開啓應用調試，界面以下圖所示。

Flutter Inspector

在上面的調試視圖中，第一個標籤是 【Flutter Inspector】，這是一款用於可視化和瀏覽 Flutter Widget 樹的工具。您能夠選擇正在運行的應用中的 Widget，而後放慢全部動畫，查看文本基線等等，以下圖所示。

Layout Explorer 是一項新增功能，在 Flutter Inspector 中位於 Details Tree 視圖旁邊。使用 Layout Explorer，您能夠查看 Flutter 的柔性佈局 (flex layout) 模型。例如，當您不肯定爲何一排 widget 沒有按您預期的方式顯示時，或者爲何會出現 "RenderFlex 溢出了 42 個像素" 這樣的錯誤時，這個功能也許能幫上大忙。

在 Flutter Inspector的右邊，會發現三個專門用於性能分析的標籤頁: Timeline (時間線視圖)、Memory (內存視圖) 和 Performance (性能視圖)。固然，Flutter Inspector的功能還有不少，能夠自行查看Flutter Inspector官方資料的介紹。

時間線視圖 (Timeline view)

時間線視圖 (Timeline view) 顯示每幀的構建時間以及火焰圖。這樣，您就可以很容易識別出現問題的幀，同時瞭解其所在的上下文。

新版本的DevTools新增了 Track Widget Builds (跟蹤 widget 構建) 的按鈕，它會將您應用中全部 Widget 的構建時間添加到時間線。關於時間線視圖 (Timeline view) 的更多介紹能夠參考使用時間線視圖 (Timeline view)。

內存視圖 (Memory view)

內存視圖 (Memory view)可讓開發者快速的查看應用在特定時刻的內存使用狀況，而且此視圖如今能夠顯示所分配內存的熱力圖，同時也支持跟蹤平臺內存，還支持內存使用狀況的更多篩選。

性能視圖 (Performance view)

性能視圖 (Performance view) 是傳統的 CPU 分析器，能夠經過此視圖記錄應用的運行會話，並查看 CPU 在哪些方法中耗費了大量時間，而後就能夠決定應該在哪裏進行優化。

使用性能視圖 (Performance view)以前，須要先單擊 【Record】 開始進行記錄 CPU的運行 信息，完成後點擊【 Stop】 中止記錄，CPU分析器會把收集的信息推送到VM並分別在不一樣的信息窗口進行展現調用樹 (Call Tree, Bottom Up, and Flame Chart)，即火焰圖。

火焰圖表展現的是自上而下的調用堆棧信息，即上面的堆棧幀調用下面的堆棧幀。每個堆棧幀的寬度表明 CPU 執行的時長。棧幀消耗 CPU 的時間越長，就越有多是咱們進行性能改進的好地方。

同時，咱們還能夠查看調用樹視圖，它是一種自上而下展現 CPU 中的調用堆棧信息方法的視圖。在下圖中的表格中能夠看出，展開其中的一個方法能夠查看它全部的調用者的信息。

網絡視圖 (Network view)

網絡視圖 (Network view)則是用來查看網絡流量的，您能夠看到您的應用自啓動以來所有請求的歷史記錄，以及每一個請求的詳細信息。這樣，當您試圖調試網絡問題時，就沒必要再自行記錄這些事件。網絡視圖目前顯示的是 HTTP 流量，將來還會顯示通用套接字 (socket) I/O 流量。當應用有網絡請求時，就能夠在網絡視圖 (Network view)中查看到請求的信息，和抓包工具顯示的信息差很少，以下圖所示。

日誌視圖 (Logging view)

日誌視圖 (Logging view) 是用來顯示應用和框架的事件日誌的。默認狀況下，日誌視圖 (Logging view) 會展現如下內容：

• Dart 運行時的垃圾回收事件。
• Flutter 框架事件，好比建立幀的事件。
• 應用的 stdout 和 stderr 輸出。
• 應用的自定義日誌事件。

固然，您能夠用它輕鬆過濾消息 (例如，您可使用 -gc 來過濾掉 Garbage Collector 事件，或者使用 flutter.frame 以僅顯示框架事件)。在 Dart 中，日誌消息能夠結構化，而日誌記錄視圖正是利用了這一點。

目前，DevTools 適用於移動應用、桌面應用以及 Web 應用的調試工做，若是想要了解關於它的更多信息，能夠查看官方DevTools開發工具的介紹。