開発者モード

AEM でのページの編集には、いくつかのモードを使用できます。開発者モードもその 1 つです。開発者モードで開かれるサイドパネルのタブには、現在のページに関する開発者向けの情報が表示されます。次の 3 つのタブがあります。

• コンポーネント：構造およびパフォーマンスに関する情報を表示します。
• テスト：テストを実行し、結果を分析します。
• エラー：発生している問題が表示されます。

これらのタブで、開発者は以下を実行できます。

• 検出：ページが何から作成されているかを確認します。
• デバッグ：発生したエラーとその場所およびタイミングを特定して、問題の修正に役立てます。
• テスト：アプリケーションが期待どおりに動作しているかをテストします。

開発者モードを開く

開発者モードは、ページエディターのサイドパネルとして実装されています。パネルを開くには、ページエディターのツールバーにあるモードセレクターから「開発者」を選択します。

パネルは、次の 2 つのタブで構成されています。

• コンポーネント - コンポーネントツリーが表示されます。これは、作成者向けのコンテンツツリーに似ています。

• エラー - 問題が発生すると、各コンポーネントの詳細が表示されます。

コンポーネント

コンポーネントツリーが表示されます。次の機能があります。

• ページ上にレンダリングされるコンポーネントとテンプレートのチェーンの概要を示します（SLY、JSP など）。このツリーを展開して、階層内のコンテキストを表示できます。

• コンポーネントのレンダリングに必要な、サーバー側の計算時間を示します。

• ツリーを展開して、ツリー内の特定のコンポーネントを選択できます。コンポーネントを選択すると、次のようなコンポーネント詳細にアクセスできます。

  • リポジトリーパス
  • スクリプトへのリンク（CRXDE Lite でアクセス）

• 選択されたコンポーネント（コンテンツフローでは青い境界線で示されます）は、コンテンツツリーで強調表示されます（逆に、コンテンツツリーで選択されたコンポーネントはコンポーネントツリーで強調表示されます）。

コンポーネントツリーは、次の目的に役立ちます。

• コンポーネントごとのレンダリング時間を判断し、比較します。
• 階層を確認し、理解します。
• 時間がかかっているコンポーネントを把握することで、ページの読み込み時間について理解し、向上させます。

各コンポーネントエントリの表示例を以下に示します。

• 詳細を表示：以下の項目を表示するリストへのリンクです。

  • コンポーネントのレンダリングに使用されるすべてのコンポーネントスクリプト。
  • この特定のコンポーネントのリポジトリコンテンツパス。

  

• スクリプトを編集：次のことをおこなうリンクです。

  • CRXDE Lite でコンポーネントスクリプトを開きます。

• コンポーネントエントリを展開（矢印の先端をクリック）すると、次の項目も表示されます。

  • 選択したコンポーネント内の階層。
  • 選択したコンポーネント単独でのレンダリング時間、そのコンポーネント内にネストされている個々のコンポーネントのレンダリング時間および両者の合計。

  

エラー

エラー​タブは常に（上図のように）何も表示されないのが理想ですが、問題が発生すると、コンポーネントごとに以下の詳細が表示されます。

• 警告とエラーの詳細および CRXDE Lite 内の適切なコードへの直接リンク（コンポーネントによってエラーログにエントリが作成された場合）
• 警告（コンポーネントによって管理セッションが開かれた場合）

例えば、未定義のメソッドが呼び出されたときは、その結果として発生したエラーが「エラー」タブに表示されます。

エラーが発生すると、「コンポーネント」タブのツリーにあるコンポーネントエントリもインジケーターでマークされます。

テスト

Business.Adobe.com リソース

Automated Onboarding Targeted Content Embedded Charts Dynamic Media Customer Experience Management Content Management System