개발자 모드

Adobe Experience Manager(AEM)에서 페이지를 편집할 때 몇 가지 모드 개발자 모드를 포함하여 을 사용할 수 있습니다. 이렇게 하면 개발자에게 현재 페이지에 대한 정보를 제공하는 몇 가지 탭이 있는 사이드 패널이 열립니다. 세 개의 탭은 다음과 같습니다.

• 구성 요소 구조 및 성능 정보를 볼 수 있습니다.
• 테스트 테스트 실행 및 결과 분석.
• 오류 발생하는 모든 문제를 확인합니다.

이렇게 하면 개발자가 다음과 같은 작업을 수행할 수 있습니다.

• 검색: 어떤 페이지로 구성되어 있는지 알아보십시오.
• 디버그: 언제 어디서 발생하는지 파악하여 문제 해결에 도움이 됩니다.
• 테스트: 애플리케이션이 예상대로 작동합니까?

개발자 모드 열기

개발자 모드는 페이지 편집기의 사이드 패널로 구현됩니다. 패널을 열려면 다음을 선택합니다. 개발자 페이지 편집기의 도구 모음에 있는 모드 선택기에서

패널은 두 개의 탭으로 나뉘어 있습니다.

• 구성 요소 - 다음과 유사한 구성 요소 트리를 보여 줍니다 콘텐츠 트리 작성자용

• 오류 - 문제가 발생하면 각 구성 요소에 대한 세부 정보가 표시됩니다.

구성 요소

이 구성 요소 트리는 다음과 같습니다.

• 페이지에 렌더링된 구성 요소 체인 및 템플릿(SLY, JSP 등)에 대해 설명합니다. 트리를 확장하여 계층 내에 컨텍스트를 표시할 수 있습니다.

• 구성 요소를 렌더링할 서버측 계산 시간을 표시합니다.

• 트리를 확장하고 트리 내에서 특정 구성 요소를 선택할 수 있습니다. 선택 항목을 통해 다음과 같은 구성 요소 세부 사항에 액세스할 수 있습니다.

  • 저장소 경로
  • 스크립트 링크(CRXDE Lite에서 액세스)

• 선택한 구성 요소(컨텐츠 플로우에서 파란색 테두리로 표시됨)가 컨텐츠 트리에서 강조 표시됩니다(반대로 표시).

이렇게 하면 다음과 같은 이점이 있습니다.

• 구성 요소당 렌더링 시간을 결정하고 비교합니다.
• 계층 구조를 확인하고 이해합니다.
• 느린 구성 요소를 찾아 페이지 로드 시간을 이해한 다음 개선합니다.

각 구성 요소 항목은 다음을 표시할 수 있습니다(예:).

• 세부 사항 보기: 다음을 보여주는 목록에 대한 링크:

  • 구성 요소를 렌더링하는 데 사용되는 모든 구성 요소 스크립트.
  • 특정 구성 요소에 대한 저장소 콘텐츠 경로입니다.

  

• 스크립트 편집: 다음 링크를 클릭합니다.

  • CRXDE Lite에서 구성 요소 스크립트를 엽니다.

• 구성 요소 항목(화살표 헤드)을 확장하면 다음도 표시됩니다.

  • 선택한 구성 요소 내의 계층입니다.
  • 선택한 구성 요소, 그 안에 중첩된 개별 구성 요소 및 결합된 합계의 렌더링 시간.

  

오류

바라건대 오류 탭은 위와 같이 항상 비어 있지만, 문제가 발생하면 각 구성 요소에 대해 다음 세부 정보가 표시됩니다.

• 구성 요소가 오류 로그에 오류의 세부 정보와 함께 항목을 쓰고 CRXDE Lite 내의 적절한 코드로 직접 연결하는 경우의 경고.
• 구성 요소가 관리 세션을 여는 경우 경고 메시지가 표시됩니다.

예를 들어 정의되지 않은 메서드가 호출되는 상황에서는 결과 오류가 오류 탭:

오류가 발생하면 구성 요소 탭의 트리에 있는 구성 요소 항목에도 표시기가 표시됩니다.

테스트