설명서

AEM Touch UI 또는 Classic UI에서 클라이언트측 문제를 디버깅하는 방법

Last update: Mon May 05 2025 00:00:00 GMT+0000 (Coordinated Universal Time)

이 문서에서는 다음 조치를 통해 AEM Touch UI 및/또는 클래식 UI에서 클라이언트측 문제를 디버깅하는 방법을 설명합니다.

  • UI 버튼에 연결된 이벤트 핸들러 디버깅
  • 클라이언트 라이브러리 디버그 모드 활성화
  • 축소된 Javascript 비활성화

설명 description

환경

Experience Manager

문제/증상

이 안내서는 브라우저에서 JavaScript 문제를 진단하는 방법을 보여 줍니다.

JavaScript 오류 예

Uncaught TypeError: $(...).not(...).draggable is not a functionat HTMLDocument. (lightbox.js:45)at HTMLDocument.dispatch (jquery.js:4665)at HTMLDocument.elemData.handle (jquery.js:4333)at Object.trigger (jquery.js:4574)at HTMLElement. (jquery.js:5284)at Function.each (jquery.js:384)at jQuery.fn.init.each (jquery.js:136)at jQuery.fn.init.trigger (jquery.js:5283)

해상도 resolution

A. JavaScript 디버깅 팁

  • UI 버튼에 연결된 이벤트 핸들러 찾기 및 디버깅하기 - 클릭 가능한 버튼과 관련된 Touch UI에 오류 또는 문제가 발생할 경우 페이지의 해당 요소에 연결된 모든 이벤트 핸들러를 확인하는 데 도움이 될 수 있습니다.  Google Chrome 브라우저에서 버튼, 이미지, 링크 등을 마우스 오른쪽 버튼으로 클릭하고 "Inspect"를 선택합니다. 왼쪽 하단 패널에서 HTML 요소를 선택합니다.  오른쪽 하단 패널에서 “이벤트 리스너” 탭을 선택하여 요소에 연결된 이벤트 리스너를 확인합니다.
  • 축소되거나 JavaScript 코드를 읽기 어려운 형식 - JavaScript를 더 쉽게 읽고 디버깅할 수 있도록 Chrome 디버거의 예쁜 프린트 기능을 사용하도록 설정합니다.
  • 로컬에서 JavaScript를 수정하여 잠재적 수정 사항을 테스트하십시오 - Chrome의 로컬 재정의 기능을 사용하여 AEM 서버에서 변경하기 전에 수정 사항을 테스트하기 위해 브라우저에서 JavaScript 파일을 편집합니다.

B. 클라이언트 라이브러리 디버그 모드

클라이언트 라이브러리 디버그 모드가 활성화되면 클라이언트 라이브러리를 구성하는 개별 파일을 검색하는 데 유용할 수 있습니다.

  1. Chrome 브라우저의 페이지를 열고 오류가 있는 페이지로 이동합니다.

  2. URL 끝의 주소 표시줄에서 이 쿼리 문자열 매개 변수 "debugClientLibs=true"를 URL 앵커 앞에 추가합니다.

    예: http://localhost:4502/siteadmin?debugClientLibs=true#/content/we-retail

    이 옵션을 사용하여 클라이언트 라이브러리는 모든 파일을 통합하는 대신 별도로 로드합니다.

    Touch UI에서 클라이언트 라이브러리의 디버그 모드가 활성화되면 페이지가 손상될 수 있습니다.  단, 이 기능은 디버깅 중인 특정 코드 줄이 포함된 클라이언트 라이브러리의 파일을 확인하는 데 사용할 수 있으므로 매우 유용합니다.

  3. Chrome 브라우저(오른쪽 상단)에서 도구 => 추가 도구 => 개발자 도구(으)로 이동합니다.

  4. "개발자 도구" 패널의 "콘솔"을 클릭합니다.

  5. JavaScript 오류는 나열되어 있어야 합니다. 오류 오른쪽에는 JavaScript 코드에 오류가 발생하는 파일 및 줄 번호가 있는 링크가 있습니다. 파일 링크를 클릭합니다.

  6. 이제 코드가 실패한 줄의 소스 ​탭에 있어야 합니다. 줄 번호를 마우스 오른쪽 단추로 클릭하고 중단점 추가를 선택하여 코드의 중단점을 설정합니다.   중단점에 대한 자세한 내용은 Google Chrome 설명서를 참조하세요.

  7. 페이지를 새로 고치면 JavaScript 디버깅을 시작할 수 있습니다.

C. 축소 비활성화

디버깅하는 동안 JavaScript가 축소되면 브라우저에서 포맷하거나 축소를 비활성화하는 데 도움이 됩니다.

  • http://aemhost/system/console/configMgr/com.adobe.granite.ui.clientlibs.impl.HtmlLibraryManagerImpl으로 이동

  • 축소 선택 취소

  • 저장 클릭

  • 디버깅 중인 페이지를 새로 고치면 JavaScript를 보다 쉽게 읽고 중단점을 설정할 수 있습니다.

디버깅 팁

클라이언트 라이브러리에서 축소를 비활성화할 수 없는 경우 JavaScript를 적어도 예쁘게 인쇄하여 효율적으로 디버깅할 수 있습니다. Google Chrome 브라우저에서 작업을 수행하는 방법은 이 문서을(를) 참조하십시오.

recommendation-more-help
3d58f420-19b5-47a0-a122-5c9dab55ec7f