開発者ツール
DevTools

アプリケーションのプロファイリング {#profile-your-application}

Profilerタブでは、Angularの変更検知の実行を視覚化できます。 これは、変更検知がいつどのようにアプリケーションのパフォーマンスに影響を与えるかを判断するのに役立ちます。

「Profiler」タブのスクリーンショットで、「再生ボタンをクリックして新しい記録を開始するか、プロファイラデータを含むjsonファイルをアップロードします。」と表示されています。その横に、新しいプロファイルを記録を開始する記録ボタンと、既存のプロファイルを選択するファイルピッカーがあります。

プロファイラタブでは、現在のアプリケーションのプロファイリングを開始したり、以前の実行からの既存のプロファイルをインポートしたりできます。 アプリケーションのプロファイリングを開始するには、Profilerタブの左上隅にある丸の上にマウスを置いて、Start recordingをクリックします。

プロファイリング中は、Angular DevToolsは、変更検知やライフサイクルフックの実行などの実行イベントをキャプチャします。 変更検知をトリガーしてAngular DevToolsが使用できるデータを作成するために、アプリケーションと対話してください。 記録を終了するには、丸を再びクリックしてStop recordingします。

既存の記録のインポートもできます。 この機能の詳細については、記録のインポートセクションをご覧ください。

アプリケーションの実行の理解

プロファイルを記録またはインポートした後、Angular DevToolsは変更検知サイクルの視覚化を表示します。

記録またはアップロードされたプロファイル後の「Profiler」タブのスクリーンショット。いくつかのテキストが表示され、「特定の変更検出サイクルをプレビューするには、バーを選択します」と表示されています。

シーケンスの各バーは、アプリケーションの変更検知サイクルを表しています。 バーが高いほど、アプリケーションは変更検知をこのサイクルで実行するのに時間がかかっています。 バーを選択すると、DevToolsは次のような役立つ情報を表示します。

  • このサイクルでキャプチャされたすべてのコンポーネントとディレクティブを含むバーチャート
  • Angularが変更検知をこのサイクルで実行するのにかかった時間。
  • ユーザーが経験した推定フレームレート（60fps未満の場合）
「Profiler」タブのスクリーンショット。ユーザーによって単一のバーが選択されており、近くのドロップダウンメニューに「バーチャート」が表示され、その下に2番目のバーチャートが表示されています。新しいチャートには、大部分のスペースを占める2つのバーがあり、1つは「TodosComponent」とラベル付けされ、もう1つは「NgForOf」とラベル付けされています。他のバーは、これらに比べて小さいため、無視できます。

コンポーネント実行の理解

変更検知サイクルをクリックすると表示されるバーチャートは、アプリケーションがその特定のコンポーネントまたはディレクティブで変更検知を実行するのにどれだけ時間がかかったかを示す詳細ビューを表示します。

この例では、NgForOfディレクティブでかかった合計時間と、そのディレクティブで呼び出されたメソッドが表示されています。

「Profiler」タブのスクリーンショットで、`NgForOf`バーが選択されています。右側に`NgForOf`の詳細ビューが表示され、「かかった合計時間: 1.76 ms」と表示されています。`NgForOf`を1.76 msかかった`ngDoCheck`メソッドを持つディレクティブとしてリストした行が1つだけ含まれています。また、「親階層」というラベルの付いたリストも含まれており、このディレクティブの親コンポーネントが含まれています。

階層ビュー

「Profiler」タブのスクリーンショット。ユーザーによって単一のバーが選択されており、近くのドロップダウンメニューに「フレームグラフ」が表示され、その下にフレームグラフが表示されています。フレームグラフは、「Entire application」という行と「AppComponent」という行から始まります。その下は、3行目で「[RouterOutlet]」と「DemoAppComponent」から始まり、複数のアイテムに分割され始めます。数層深く、1つのセルが赤で強調表示されています。

変更検知の実行をフレームグラフのようなビューで視覚化できます。

グラフの各タイルは、レンダリングツリーの特定の位置にある画面上の要素を表します。 たとえば、LoggedOutUserComponentが削除され、その代わりにAngularがLoggedInUserComponentをレンダリングした変更検知サイクルを考えます。このシナリオでは、両方のコンポーネントは同じタイルに表示されます。

X軸は、この変更検知サイクルのレンダリングにかかった合計時間を表します。 Y軸は要素階層を表します。要素の変更検知を実行するには、そのディレクティブと子コンポーネントをレンダリングする必要があります。 これらを組み合わせると、どのコンポーネントのレンダリングに時間がかかっているのか、その時間がどこに使われているのかが視覚化されます。

各タイルは、Angularがそこでかかった時間に依存して色が付けられます。 Angular DevToolsは、レンダリングに最も時間がかかったタイルに対するかかった時間によって、色の濃淡を決定します。

特定のタイルをクリックすると、右側のパネルにそのタイルに関する詳細が表示されます。 タイルをダブルクリックすると、タイルが拡大され、ネストされた子要素をより簡単に表示できます。

変更検知とOnPushコンポーネントのデバッグ

通常、グラフは、特定の変更検知フレームの、アプリケーションのレンダリングにかかる時間を視覚化します。しかし、OnPushコンポーネントなど、入力プロパティが変更された場合にのみ再レンダリングされるコンポーネントもあります。特定のフレームのこれらのコンポーネントなしでフレームグラフを視覚化すると役立つ場合があります。

変更検知フレーム内で変更検知プロセスを経たコンポーネントのみを視覚化するには、フレームグラフの上部にある変更検知チェックボックスをオンにします。

このビューでは、変更検知を経たすべてのコンポーネントが強調表示され、再レンダリングされなかったOnPushコンポーネントなど、変更検知を経なかったコンポーネントが灰色で表示されます。

変更検出サイクルのフレームチャート視覚化を表示する「Profiler」タブのスクリーンショット。「Show only change detection」というラベルの付いたチェックボックスがオンになっています。フレームグラフは以前と非常によく似ていますが、コンポーネントの色がオレンジから青に変わっています。`[RouterOutlet]`というラベルの付いたいくつかのタイルは、もうどの色でも強調表示されていません。

記録のインポートとエクスポート

記録されたプロファイリングセッションの右上にあるSave Profileボタンをクリックして、JSONファイルとしてエクスポートし、ディスクに保存します。 後で、プロファイラの初期ビューで、Choose file入力をクリックしてファイルをインポートします。

変更検出サイクルを表示する「Profiler」タブのスクリーンショット。右側に「プロファイルの保存」ボタンが表示されています。