Google、Flutter で Dart DevTools をゼロから再構築

フラッターというのは、 クロスプラットフォーム プログラミング フレームワーク、非ネイティブ コードを混乱させることなく、クロスプラットフォーム アプリ開発の問題を解決することを目指しています。 Dart プログラミング言語の知識があれば、開発者は、Android、iOS、Web、デスクトップ向けのアプリをすべて統一された UI で構築できます。 フラッター 1.9 macOS と Catalina のサポートをアルファ版の状態にしましたが、 v1.12 リリースはプレアルファ状態を超えてサポートが成熟しました そしてその Flutter の v1.17 と Dart の v2.8 2020 年に最初の安定版リリースをマークしました。 本日、Google は、Dart および Flutter コード用の DevTools の新バージョンをリリースします。これは、Flutter で一から再構築され、いくつかの改良が加えられています。

前回の発表で、Google は Dart DevTools の現在のバージョンを新しい Flutter バージョンに置き換える意図について述べていました。 新しい DevTools が Flutter で最初から再構築されたため、この問題が発生しました。 この新しいバージョンの DevTools では、パフォーマンス ページとメモリ ページの変更や、まったく新しいネットワーク ページなどの改善が加えられています。

しかし、まだ機能するものをなぜ再構築するのでしょうか? Flutter の背後にあるチームは、高パフォーマンスのシステムを構築する際には生産性の利点が重要であると主張しています。 これらの主張に対する信頼を示す最善の方法は、UI とまったく同じツールを採用することです。 彼ら自身。 Flutter で再構築すると、開発者はコードを記述した後に配布モデルを選択することもできます。 これは、流通モデルによって決定される現在の意思決定フローチャートとは異なります。 コード。

DevTools は Web アプリケーションとして出荷されており、これにより、ツールをすべてのシステムにわたる既存のツール エクスペリエンスに簡単に統合できます。 ターゲット プラットフォームと IDE。 DevTools はブラウザ内で実行されるスタンドアロンのツール スイートであり、モバイル アプリ、デスクトップ アプリ、Web で動作します。 アプリ。

DevTools には次の機能が組み込まれています。

• フラッターインスペクター: ウィジェット ツリーを視覚化して探索するためのツール。 実行中のアプリでウィジェットを選択したり、すべてのアニメーションを遅くしたり、テキストのベースラインを表示したりすることができます。
  • 新機能の 1 つは、詳細ツリーの隣にある Flutter Inspector タブにある Layout Explorer です。 Layout Explorer を使用すると、Flutter のフレックス レイアウト モデルを検査できます。 チームは、たとえば、ウィジェットの行が開発者が期待していたとおりに見えない理由をデバッグするのにこのツールがどのように役立つかを例として挙げています。

• タイムラインビュー: 各フレームのビルド時間とフレーム チャートを示します。 これにより、コンテキスト内で問題のあるフレームを簡単に特定できます。
  • このペインには、すべてのウィジェットのビルド時間を追加する新しい [ウィジェット ビルドの追跡] ボタンが組み込まれました。 アプリをタイムラインに追加します (プロファイル ビルドのパフォーマンスが犠牲になります。そのため、アプリはオンになりません) デフォルト）。 これは、どのウィジェットが遅いフレームの背後にあるのかを正確に調べたいときに便利です。

• メモリビュー: 特定の瞬間にアプリがメモリをどのように使用しているかを示します。
  • このビューには、割り当てられたメモリのヒートマップが表示され、プラットフォーム メモリも追跡できるようになりました。

• パフォーマンスビュー: これは従来の CPU プロファイラです。 これにより、アプリのセッションを記録し、CPU がどの機能に最も多くの時間を費やしたかを確認できます。 これを使用して、どこに時間を最適化に費やすかを決定できます。
• DevTools には独自のものも含まれています デバッガ. これは、IDE を使用していないものの、ブレークポイントの追加、コードのステップ実行、変数値のピークなどのオプションが必要な場合に便利です。

• ネットワーク ビュー: これはまったく新しいものです。
  • その名前が示すように、ネットワーク トラフィックを検査できます。 アプリの開始以降に行われたリクエストの履歴全体を確認し、それぞれのリクエストに関する詳細情報を取得できます。 これにより、ネットワークの問題をデバッグするときに、これらのイベントを自分でログに記録する必要がなくなります。
  • 現在、「ネットワーク」タブには HTTP トラフィックが表示されています。 将来の改善には、表示が含まれます 一般的なソケット I/O トラフィック.
  • ネットワーク リクエストはタイムライン ビューにも表示されるため、コンテキスト内で確認できます。
• ロギングビュー: アプリとフレームワークからのイベントを表示します。 これを使用すると、メッセージを簡単にフィルタリングできます (たとえば、「-gc」を指定してガベージ コレクター イベントを除外したり、「flutter.frame」を指定してフレーム イベントのみを表示したりできます)。 Dart でメッセージをログに記録する 構造化できる、ログビューはそれを利用します。

DevTools を最大限に活用するには、 ドキュメンテーション. バグを見つけた場合、または新機能に投票したい場合は、 GitHub.