Angular Auguryを使用してコードをデバッグします

Augury：強力な角度アプリケーションのデバッグツール

Auguryは、Angular 2アプリケーションのデバッグと分析のために設計されたオープンソースツールです。アプリケーションアーキテクチャをツリー構造で直感的に提示し、開発者がオブジェクトのプロパティを簡単に確認し、リアルタイムで変更し、ソースコードを表示し、ブレークポイントを設定し、イベントを処理するなどします。

Auguryの中核的な利点：

• オープンソースと使いやすい：Chromeブラウザー拡張機能として、Auguryは簡単にインストールでき、時間のかかる学習は必要ありません。
• 直感的な視覚化：アプリケーションアーキテクチャの理解を促進するために、ツリー構造にコンポーネントとその依存関係を表示します。
• リアルタイムのデバッグ：オブジェクトプロパティをリアルタイムで確認および変更し、すぐに変更を観察します。
• 強力なデバッグ関数：ソースコードの表示、ブレークポイントの設定、イベントの処理などの高度なデバッグ機能をサポートします。
• 依存関係注入図：依存関係の注入の問題のトラブルシューティングを容易にするために、コンポーネント間の依存関係を明確に表示します。
• ルーティングシステムの視覚化：アプリケーションのルーティング構造を直感的に表示します。これは、ルーティング関連の問題をデバッグするのに便利です。

Auguryユーザーガイド：

1. Auguryのインストール： Chrome WebストアからAugury拡張機能をインストールします。
2. 開発者ツールを起動します：プレス CtrlShift（Windows/linux）またはICmdOptionI（macos）を開きます。
3. Auguryパネルへの切り替え：開発者ツールの「Augury」タブに切り替えます。
4. コンポーネントツリーを閲覧します。コンポーネントツリーのターゲットコンポーネントを選択すると、右パネルにコンポーネントのプロパティ、依存関係、その他の情報が表示されます。
5. ブレークポイントの設定：ソースコードパネルのブレークポイントを設定して、プログラムがより深いデバッグのために特定の場所に実行されたときに一時停止します。
6. 依存関係の噴射を確認します：「インジェクターグラフ」関数を使用して、コンポーネントの依存関係噴射関係を確認します。
7. ルートの表示：「ルート」関数を使用して、アプリケーションのルーティング構成を表示します。

サンプルアプリケーション：

Auguryの機能をよりよく理解するために、Aguuryのさまざまな機能を実証するために、記事に簡単な角度アプリケーションが構築されています。アプリは一部のユーザーをリストし、ユーザーがユーザー情報を編集できるようにします。

Auguryの主な機能モジュール：

• コンポーネントビュー（コンポーネントビュー）：コンポーネントツリーを表示し、コンポーネントプロパティを確認および変更し、ソースコードを表示し、ブレークポイントを設定できます。
• フォーム：フォームコントロールの詳細な検査とリアルタイムの変更を提供します。
• 依存関係インジェクション：「インジェクターグラフ」を介して依存関係の噴射関係を直感的に表示します。
• ngmodules：アプリケーションで使用されるすべてのモジュールとその情報を表示します。
• ルート：デバッグのルーティング関連の問題を容易にするために、アプリケーションのルーティング構成を表示します。

概要：

Auguryは、角度開発者のデバッグ効率を大幅に改善できるシンプルで強力なAngularアプリケーションデバッグツールです。その直感的なインターフェイスとリッチ機能により、すべてのAngular開発者にとって必須のツールの1つになります。

faqs：

この記事には、インストール、使用、機能、および他のデバッグツールとの比較をカバーするAuguryに関するよくある質問も含まれています。

上記の改善により、記事の内容はより簡潔で明確になり、主要な情報が強調され、元のテキストのコアコンテンツと写真を保持します。

以上がAngular Auguryを使用してコードをデバッグしますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。