開発者モード developer-mode
AEMでページを編集する場合、複数の モード は、開発者モードを含めて使用できます。 これにより、いくつかのタブを持つサイドパネルが開き、現在のページに関する情報を開発者が提供します。 次の 3 つのタブがあります。
これらのタブで、開発者は以下を実行できます。
- 検出：ページの構成要素
- デバッグ：発生したエラーとその場所およびタイミングを特定して、問題の修正に役立てます。
- テスト：アプリケーションが期待どおりに動作するかを示します。
- （ページの編集時に）タッチ操作対応 UI でのみ使用できます。
- モバイルデバイスまたはデスクトップ上の小さいウィンドウでは、スペースの制約があるので使用できません。
- ウィンドウの幅が 1024 px 未満の場合は使用できません。
administratorsグループに所属しているユーザーのみ使用できます。
- nosamplecontent 実行モードを使用しているオーサーインスタンス
- パブリッシュインスタンス
- ナレッジベース記事、 AEM TouchUI の問題のトラブルシューティング（その他のヒントとツールについて）
- AEM Gems セッションの概要 AEM 6.0 開発者モード.
開発者モードを開く opening-developer-mode
開発者モードは、ページエディターのサイドパネルとして実装されます。 パネルを開くには、ページエディターのツールバーにあるモードセレクターから「開発者」を選択します。
パネルは、次の 2 つのタブで構成されています。
コンポーネント components
コンポーネントツリーが表示されます。次の機能があります。
-
ページ上にレンダリングされるコンポーネントとテンプレートのチェーンの概要を示します（SLY、JSP など）。このツリーを展開して、階層内のコンテキストを表示できます。
-
コンポーネントのレンダリングに必要なサーバー側の計算時間を示します。
-
ツリーを展開し、ツリー内の特定のコンポーネントを選択できます。 「選択」を選択すると、コンポーネントの詳細にアクセスできます。例：
- リポジトリーパス
- スクリプトへのリンク (CRXDE Lite)
-
コンテンツフロー内で選択されたコンポーネント（青い境界線で示される）がコンテンツツリー内でハイライト表示されます（その逆も同様です）。
これは次の目的に役立ちます。
- コンポーネントごとのレンダリング時間を判断し、比較します。
- 階層を確認し、理解します。
- 時間がかかっているコンポーネントを把握することで、ページの読み込み時間について理解し、向上させます。
各コンポーネントエントリには、次の項目が表示されます（例： ）。
-
詳細を表示:以下を表示するリストへのリンク：
- コンポーネントのレンダリングに使用するすべてのコンポーネントスクリプト。
- この特定のコンポーネントのリポジトリコンテンツのパス。
-
スクリプトを編集:次のリンク：
- コンポーネントスクリプトをCRXDE Liteで開きます。
-
コンポーネントエントリ（矢印）を展開すると、次の項目も表示されます。
- 選択したコンポーネント内の階層。
- 選択したコンポーネントの単独でのレンダリング時間、その中にネストされた個々のコンポーネント、および結合された合計。
/libs の下にあるスクリプトを指すリンクもあります。ただし、これらのリンクは参照専用とし、/libs の下層にあるものは何も編集 しないでください。変更しても無駄になる可能性があるからです。このブランチは、アップグレードしたり、ホットフィックス／機能パックを適用するたびに変更される傾向にあります。必要な変更はすべて /apps の下層でおこなう必要があります。詳しくはオーバーレイとオーバーライドを参照してください。エラー errors
エラー タブは常に（上図のように）何も表示されないのが理想ですが、問題が発生すると、コンポーネントごとに以下の詳細が表示されます。
- 警告とエラーの詳細および CRXDE Lite 内の適切なコードへの直接リンク（コンポーネントによってエラーログにエントリが作成された場合）
- 警告（コンポーネントによって管理セッションが開かれた場合）
例えば、未定義のメソッドが呼び出された場合、結果のエラーは エラー タブ：
「コンポーネント」タブのツリー内のコンポーネントエントリにも、エラーが発生したときにインジケーターが表示されます。