開発者モード

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

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

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

  • 検出:ページが何から作成されているかを確認します。
  • デバッグ:何がいつ、どこで起きているかを確認し、問題の解決に役立てます。
  • テスト:アプリケーションが期待どおりに動作しているかをテストします。
注意

開発者モード:

  • (ページの編集時に)タッチ操作対応 UI でのみ使用できます。
  • モバイルデバイスまたはデスクトップ上の小さいウィンドウでは、スペースの制約があるので使用できません。
  • ウィンドウの幅が 1024 px 未満の場合は使用できません。
  • administratorsグループのメンバーであるユーザーのみ利用できます。
注意

開発者モードは、nosamplecontent 実行モードを使用していない標準のオーサーインスタンスでのみ使用できます。

必要に応じて、次の環境で使用するように設定できます。

  • nosamplecontent実行モードを使用した作成者インスタンスに対する
  • パブリッシュインスタンス

使用後は再度無効にする必要があります。

メモ

詳しくは以下を参照してください。

開発者モードを開く

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

chlimage_1-229

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

コンポーネント

chlimage_1-230

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

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

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

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

    • リポジトリパス
    • スクリプトへのリンク(CRXDE Lite でアクセス)
  • 選択されたコンポーネント(コンテンツフローでは青い境界線で示されます)は、コンテンツツリーで強調表示されます(逆に、コンテンツツリーで選択されたコンポーネントはコンポーネントツリーで強調表示されます)。

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

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

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

chlimage_1-231

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

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

    chlimage_1-232

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

    • CRXDE Lite でコンポーネントスクリプトを開きます。
  • コンポーネントエントリを展開(矢印の先端をクリック)すると、次の項目も表示されます。

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

    chlimage_1-233

注意

一部のリンクは/libsの下のスクリプトを指しています。 ただし、これらは参照用です。変更を加えると失われる可能性があるので、/libs下では​編集しないでください。 このブランチは、アップグレードしたり、ホットフィックス/機能パックを適用するたびに変更される傾向にあります。必要な変更は/appsの下で行う必要があります。オーバーレイと上書きを参照してください。

エラー

chlimage_1-234

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

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

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

chlimage_1-235

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

テスト

注意

AEM 6.2では、開発者モードのテスト機能がスタンドアロンのツールアプリケーションとして再実装されました。

詳しくは、UIのテストを参照してください。

このページ

Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Summit Banner

A virtual event April 27-28.

Expand your skills and get inspired.

Register for free
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now
Adobe Maker Awards Banner

Time to shine!

Apply now for the 2021 Adobe Experience Maker Awards.

Apply now