近日，谷歌發佈了全新版本的 Dart DevTools，這是我們用於 Dart 和 Flutter 代碼的調試 / 性能分析工具套件。新版 DevTools 是在 Flutter 中從頭重建的。這個版本的改進包括性能增強、Memory 頁面更新以及全新的 Network 頁面等。
本文最初發佈於 Medium 網站，經原作者授權由 InfoQ 中文站翻譯並分享。
大家可能都知道 Flutter 的熱重載功能很出名，它讓用戶可以在移動應用運行時更改代碼。但我們爲大家送上的工具遠不止熱重載，這些工具可幫助你編寫、測試、調試和分析應用程序。
首先我們來談談爲什麼要重建 DevTools，簡單來說就是爲了提升生產力和質量。Flutter 團隊很清楚，Flutter 可以幫助開發人員快速構建美觀而高性能的 UI，現在我們自己也想從中獲益。這種生產力優勢不僅能讓我們重建 DevTools，而且還能在重建過程中加入很多重要的新特性。
我們決定將 DevTools 作爲 Web 應用程序來交付，這樣就可以輕鬆將其集成到所有的目標平臺和 IDE 中，與現有工具鏈完美融合。因爲我們在構建時處處考慮到了 Web 環境的特性，所以就能親身體驗到用戶的感受；在這一過程中，我們發現了（並已解決）一些性能問題，例如頁面滾動性能表現等。
我們還一直在評估 DevTools 的桌面編譯版本，目前得到的反饋是很不錯的。選擇 Flutter 的一大好處是我們可以在寫完代碼後再選擇分發模型，用不着提前做決策。許多客戶還告訴我們，這是 Flutter 頗具吸引力的一項能力。
展望過 DevTools 的未來後，我們來快速介紹一下爲 Flutter 開發人員準備的所有重要工具，DevTools 只是其中之一。
基礎
當然，我們還有 flutter 工具，它可以在調試模式下運行你的應用，執行熱重載，構建 APK 和 IPA 等。這款 Flutter 工具是用 Dart 編寫的，並在命令行上運行，因此能夠兼容所有操作系統或編輯器。
錯誤高亮顯示提供了修復錯誤的文檔鏈接。
https://dart.dev/tools/diagnostic-messages
對於常見的靜態錯誤，IDE 會鏈接到一個加長版的錯誤消息，其中包括示例代碼和常見的修復和智能 lint。
分析服務器還可以使用語言服務協議，支持該協議的開發工具（有很多）都可以輕鬆支持它。
https://microsoft.github.io/language-server-protocol/
UI 代碼助手
在 Flutter 中，你在構建 UI 時可以創建 widget 樹。這意味着許多 Dart 代碼都採用了嵌套構造器的形式，如下所示：
return MaterialApp(
title: 'My app',
home: Scaffold(
appBar: AppBar(
title: Text('Welcome'),
),
body: Column(
...
),
),
);
Flutter 工具鏈簡化了這類代碼的使用過程。UI 嚮導會高亮顯示你正在構建的 widget 樹。
尾隨註釋可以顯示哪個結束括號屬於哪個 widget。
智能重構可幫助你輕鬆修改樹，例如用新的父級包裝一部分樹……
此外，還有移動 widget。
DevTools
然後我們來看 DevTools，這是在瀏覽器中運行的獨立工具套件。它們提供了一些沒法放在 IDE 中的遙測和功能。
我們剛推出的新版 DevTools 是用 Flutter 編寫的。（它們以前就是用 Dart 編寫的，但沒有使用 Flutter 框架。）這是完全從頭重寫的版本，使我們可以改進 UI 並添加很多全新的特性。
第一個選項卡是 Flutter Inspector：
https://flutter.dev/docs/development/tools/devtools/inspector
這是用於可視化和瀏覽 Flutter widget 樹的工具。在這裏，你可以選擇正在運行的應用程序中的 widget，放慢所有動畫的速度，查看文本基線等等。
一項新功能是 Layout Explorer，你可以在 Details Tree 旁邊的 Flutter Inspector 選項卡中找到它。Layout Explorer 可讓你檢查 Flutter 的彈性佈局模型。例如，當你不知道爲什麼一排 widget 的外觀不符合你的預期，或者爲什麼會出現“RenderFlex overflowed by 42 pixels”錯誤時，這款工具可能就是你的救命稻草。
在 Flutter Inspector 選項卡旁邊，有三個專門用於性能分析的選項卡：Timeline 視圖、Memory 視圖和 Performance 視圖。
現在，Timeline 視圖顯示了每個幀的構建時間以及火焰圖。這樣在上下文中就可以很容易找出問題幀。
https://flutter.dev/docs/development/tools/devtools/timeline
Timeline 窗格還有新的 Track Widget Builds 按鈕，它可將你應用中所有 widget 的構建時間添加到時間線中（但會拖累 profile 構建的性能，所以沒有默認開啓）。你可以很方便地找出具體是哪些 widget 位於慢速幀的後面。
Memory 視圖使你可以查看應用程序在給定時刻的內存使用情況。現在，這個視圖會顯示已分配內存的熱圖，並且還可以跟蹤平臺內存。
https://flutter.dev/docs/development/tools/devtools/memory
性能視圖是一個傳統的 CPU 分析器。你可以用它錄製應用程序的會話，並查看 CPU 的主要時間都花在了哪些函數上。一般用它來確定優化的對象。
https://flutter.dev/docs/development/tools/devtools/performance
DevTools 甚至有自己的調試器。如果你不用 IDE，但仍希望添加斷點，逐步執行代碼和查看變量值等，那麼這個功能會非常好用。
https://flutter.dev/docs/development/tools/devtools/debugger
下一個選項卡是全新的。如你所想，Network 視圖可用來檢查網絡流量。你可以查看自應用啓動以來所發出全部請求的歷史記錄，以及每個請求的詳細信息。這樣你就不必在調試網絡問題時自行記錄這些事件。Network 選項卡當前顯示的是 HTTP 通信。未來的改進包括顯示常規的 socket I/O 流量。
https://github.com/flutter/devtools/issues/2044
現在，Timeline 視圖中還能看到網絡請求，這樣就能檢查它們的上下文了。
Logging 視圖顯示來自你的應用程序和框架的事件。你可以用它輕鬆過濾消息（例如，你可以指定 -gc 以濾出垃圾收集器事件，或者指定 flutter.frame 以僅顯示幀事件）。
https://flutter.dev/docs/development/tools/devtools/logging
在 Dart 中，日誌消息可以被結構化，並且 Logging 視圖可以使用這種結構。
https://api.dart.dev/stable/dart-developer/log.html
DevTools 適用於移動應用、桌面應用和 Web 應用。
將 DevTools 用 Flutter 重寫有很多好處：提高生產率，體驗客戶的感受，以及自由選擇目標平臺。還有一項好處是：在 Flutter 中重建 DevTools 可以讓社區更容易做出貢獻。DevTools 一直是公開開發的，今後多數用戶都會熟悉它的結構（從 lib/main.dart 中的 runApp(DevToolsApp(…)) 開始）。
https://github.com/flutter/devtools/tree/master/packages/devtools_app
小結
工具鏈對於 Flutter 的開發體驗是至關重要的。我們一直在投入大量資源來改進工具鏈，也非常重視大家的反饋意見
因此，請立即升級到最新版的 DevTools，並在你的應用中測試它。閱讀文檔以瞭解更多詳細信息。
如果發現錯誤請提交報告，也可以爲新特性投票。
我們希望新版 DevTools 能爲你帶來更舒心的 Flutter 開發體驗。
作者介紹：
本文作者爲谷歌負責 Dart 編程語言和 Flutter SDK 的開發經理。
原文鏈接：
https://medium.com/flutter/new-tools-for-flutter-developers-built-in-flutter-a122cb4eec86