[Flutter翻譯]使用Flutter編寫Flutter開發者的新工具

副標題：爲何咱們在Flutter中從頭開始重建Dart DevTools？

原文地址：medium.com/flutter/new…

原文做者：medium.com/@filiph

做者：Filip Hracek & Chris Sells

今天，咱們發佈了新版本的Dart DevTools，這是咱們的一套工具，用於Dart和Flutter代碼的調試和性能分析。它已經使用Flutter從頭開始重建。這個版本增長了幾項改進，好比性能和內存頁面的更新，以及一個全新的網絡頁面。

不少人都知道Flutter的熱重載功能，它可讓你在移動應用運行時對其進行修改。但熱重載只是咱們提供的一套工具中的一個，咱們提供的工具能夠幫助您編寫、測試、調試和分析您的應用程序。

首先讓咱們花點時間來討論一下咱們爲何要重建DevTools的初衷。簡短的答案是生產力和質量。Flutter團隊瞭解Flutter在構建漂亮、高性能的用戶界面時的生產力優點--咱們但願本身也能享受到這些優點。這種生產力使咱們不只可以重建DevTools，並且可以沿途添加大的新功能。

咱們選擇將 DevTools 做爲 Web 應用程序發佈，由於它很容易讓咱們在全部目標平臺和 IDE 上集成到現有的工具體驗中。以網絡爲中心進行構建也使咱們可以站在客戶的立場上思考問題；在這樣作的過程當中，咱們瞭解（並修復）了一些性能問題，例如滾動性能。

咱們也一直在評估將DevTools做爲編譯後的桌面應用程序發佈的好處，到目前爲止，結果是有但願的。選擇Flutter的一個主要好處是，選擇分發模式是咱們在寫完代碼後就能夠作的事情，而不是咱們必須作出的第一個決定。不少客戶也告訴咱們，這是Flutter的一個吸引人的能力。

如今咱們已經討論了一點關於DevTools的不久的過去和新的將來，讓咱們深刻了解一下每一個Flutter開發者可使用的全部主要工具的快速概述。由於DevTools並非惟一值得你關注的工具。

基礎知識

固然，還有flutter工具，它能夠在調試模式下運行你的應用程序，執行熱重載，構建APK和IPA等等。flutter工具是用Dart編寫的，在命令行上運行，因此不管你喜歡哪一種操做系統或編輯器，均可以使用Flutter。

Dart分析服務器在各類IDE中提供靜態分析和智能。這意味着你能夠獲得代碼補全...

這剛好是VS Code，但這裏全部的例子在Android Studio中也能使用，固然。

...... 錯誤高亮顯示並連接到如何修復它們的文檔.......

對於最多見的靜態錯誤，IDE會連接到一個較長版本的錯誤信息，包括示例代碼和常見的修復方法。

......和智能代碼檢查。

在這裏，分析器檢測到一個Sink被建立但從未關閉--這多是內存泄漏。

分析服務器還可使用語言服務器協議，這意味着全部使用它的開發工具（有不少）均可以輕鬆支持它。

UI代碼助手

使用Flutter，你能夠經過建立widget樹在代碼中構建UI。這意味着，不少Dart代碼都是以嵌套構造函數的形式存在，好比下面的。

return MaterialApp(
  title: 'My app',
  home: Scaffold(
    appBar: AppBar(
      title: Text('Welcome'),
    ),
    body: Column(
      ...
    ),
  ),
);
複製代碼

Flutter工具讓你更容易處理這樣的代碼。UI指南突出了你正在構建的widget樹。

左邊的線條，被稱爲UI指南，明確地將widget樹可視化。

後面的註釋能夠顯示哪一個收尾括號屬於哪一個widget。

這裏的註釋由IDE顯示，但實際上不是文件的一部分。

智能重構能夠幫助你在幾筆中修改樹，好比用一個新的父節點包裝一部分......。

用一個SizedBox包裝一個IconButton。

...並移動widget。

開發工具

還有DevTools，這是一套獨立的工具，在瀏覽器中運行。它們提供了額外的遙測和功能，這些功能在IDE中顯示並不實用。

DevTools在瀏覽器窗口中打開。

咱們本週推出的DevTools是用Flutter編寫的。(它們以前是用 Dart 編寫的，但沒有使用 Flutter 框架。)這是一次從頭開始的徹底重寫，這爲改進 UI 和添加全新的功能帶來了機會。

第一個標籤是Flutter Inspector，這是一個可視化和探索Flutter widget樹的工具。從這裏，你能夠選擇正在運行的應用中的widget，放慢全部動畫，查看文本基線等。

新功能之一是佈局資源管理器，您能夠在細節樹旁邊的Flutter檢查器標籤中找到它。佈局資源管理器讓你檢查Flutter的柔性佈局模型。例如，當你不肯定爲何一排widget看起來不是你預期的方式，或者爲何你獲得 "RenderFlex溢出了42個像素 "的錯誤時，這能夠成爲救命稻草。

在Flutter Inspector選項卡旁邊，你會發現三個專門用於性能分析的選項卡：時間軸視圖、內存視圖和性能視圖。

時間線視圖如今顯示了每一個幀的構建時間以及火焰圖。這使得它很容易識別有問題的幀，同時在上下文中看到它們。

時間線窗格還有新的跟蹤widget構建按鈕，它將您的應用程序中全部widget的構建時間添加到時間線（以犧牲您的配置文件構建的性能爲代價 - 這就是爲何它默認狀況下沒有打開）。當你試圖找出究竟是哪些widget形成了慢幀時，這很方便。

內存視圖可讓你窺視你的應用程序在特定時刻的內存使用狀況。該視圖如今顯示了分配內存的熱圖，並容許跟蹤平臺內存。

性能視圖是一個傳統的CPU剖析器。它可讓你記錄應用程序的一個會話，並查看CPU在哪些功能上花費了大部分時間，整體而言。這一般用於決定在哪裏進行優化工做。

DevTools甚至包括本身的Debugger。若是您不使用IDE進行開發，但仍然但願選擇添加斷點、逐步查看代碼、偷看變量值等，這可能會頗有用。

下一個選項卡是全新的。網絡視圖讓你檢查，你猜對了，網絡流量。你能夠看到你的應用程序自啓動以來的所有請求歷史，以及每一個請求的詳細信息。這讓你在試圖調試網絡問題時，沒必要再自行記錄這些事件。網絡選項卡目前顯示的是HTTP流量；將來的改進包括顯示通常的套接字I/O流量。

如今，您還能夠在 "時間軸 "視圖中找到網絡請求，以便您能夠在上下文中查看它們。

日誌視圖顯示來自你的應用程序和框架的事件。有了它，你能夠輕鬆地過濾消息（例如，你能夠指定-gc來過濾掉Garbage Collector事件，或者flutter.frame來只顯示frame事件）。在Dart中，日誌消息能夠被結構化，而日誌視圖就利用了這一點。

DevTools適用於移動應用、桌面應用 和 Web應用。

DevTools改寫爲Flutter有不少好處：提升了生產力，站在客戶的立場上行走，以及目標平臺的自由選擇。有一個好處咱們尚未提到：在Flutter中重寫DevTools邀請社區更容易作出貢獻。DevTools一直是在開放中開發的，但今天，大多數用戶會熟悉它的結構（從lib/main.dart中的runApp(DevToolsApp(...))開始）。

概要

工具對 Flutter 開發者的體驗相當重要。咱們天天都會投入大量資金使其更好。但咱們只能經過您的反饋來實現這一點。

所以，今天就升級到最新的 DevTools，並在您的應用程序上進行測試。閱讀文檔，瞭解全部隱藏的精華。若是您發現錯誤，請反饋問題，或在GitHub上爲新功能投票。

咱們但願新的DevTools能讓您的Flutter開發體驗更加愉快。

經過www.DeepL.com/Translator（免費版）翻譯