Angular DevToolsは、Angularアプリケーションのデバッグとプロファイリング機能を提供するブラウザ拡張機能です。
Angular DevToolsは、Chrome Web StoreまたはFirefox Addonsからインストールできます。
F12またはCtrl+Shift+I（WindowsまたはLinux）およびFn+F12またはCmd+Option+I（Mac）を押して、任意のWebページでChromeまたはFirefoxのDevToolsを開くことができます。 ブラウザのDevToolsが開いていてAngular DevToolsがインストールされている場合は、「Angular」タブで見つけることができます。
HELPFUL: Chromeの新しいタブページではインストールされている拡張機能は実行されないため、DevToolsに「Angular」タブは表示されません。表示するには、他のページにアクセスしてください。
アプリケーションを開く
拡張機能を開くと、次の3つの追加タブが表示されます。
| タブ | 詳細 |
|---|---|
| Components | アプリケーション内のコンポーネントとディレクティブを探索し、それらの状態をプレビューまたは編集できます。 |
| Profiler | アプリケーションをプロファイルし、変更検知の実行中のパフォーマンスのボトルネックがどこにあるかを理解できます。 |
| Injector Tree | 環境インジェクターと要素インジェクターの階層を視覚化できます。 |
Router TreeやTransfer Stateなどの他のタブは実験的であり、DevToolsの設定から有効にできますが、まだドキュメント化されていません。
HELPFUL: Chromiumベースのブラウザのユーザーには、パフォーマンスパネル統合が興味深いかもしれません。
Angular DevToolsの右上隅には、ポップオーバーを開く情報ボタンがあります。 情報ポップオーバーには、ページで実行されているAngularのバージョンとDevToolsのバージョンなどが含まれています。
Angularアプリケーションが検出されません
Angular DevToolsを開くと、「Angularアプリケーションが検出されませんでした」というエラーメッセージが表示される場合、これはページ上のAngularアプリケーションと通信できないことを意味します。 これは、検査しているWebページにAngularアプリケーションが含まれていないためです。 適切なWebページを検査していること、およびAngularアプリケーションが実行されていることを確認してください。
プロダクション構成でビルドされたアプリケーションが検出されました
「プロダクション構成でビルドされたアプリケーションが検出されました。Angular DevToolsは開発ビルドのみサポートしています。」というエラーメッセージが表示される場合、ページにAngularアプリケーションが見つかりましたが、プロダクション最適化でコンパイルされたことを意味します。 プロダクション用にコンパイルすると、Angular CLIはパフォーマンスを向上させるために、ページ上のJavaScriptの量を最小限に抑えるために、さまざまなデバッグ機能を削除します。これには、DevToolsと通信するために必要な機能も含まれます。
DevToolsを実行するには、最適化を無効にしてアプリケーションをコンパイルする必要があります。ng serveは、デフォルトでこれを実行します。
デプロイされたアプリケーションをデバッグする必要がある場合は、optimization構成オプション ({"optimization": false})を使用して、ビルドの最適化を無効にします。