SAP 사용자들의 오픈 커뮤니티

• 목록

Week 0 - Unit 3: Debugging and Trouble Shooting

목차

1. SAPUI5 지원 툴
2. 디버깅을 위한 SAPUI5 method
3. 개발 시 도움이 되는 팁

1. SAPUI5 지원 툴

SAP UI5를 지원하는 툴은 크게 3가지로 구성되어있습니다. 이를 통하여 UI5 개발 중에 필요한 정보나, 디버깅을 툴들을 이용할 수 있습니다.

가장 먼저, 단축키 CTRL + ALT + SHIFT + P를 통해 확인할 수 있는 Technical Information Dialog에서 SAPUI5 버전과 디버그를 위해 사용할 모듈 정보를 확인할 수 있습니다. 이는 UI5 개발 시 버전 정보에 대한 명시가 필요하거나, 디버그를 위한 모듈을 바꿀 때 유용하게 사용 됩니다.

두 번째로, 단축키 CTRL + ALT + SHIFT + S를 통해 UI5 Diagnostics을 확인할 수 있습니다. 해당 화면에서는 SAPUI5 control tree와 view에 대하여 확인할 수 있고, control properties와 binding에 대하여 관리할 수 있습니다. UI5 Diagnostics는 Control과 View에 대한 자세한 정보를 확인하고 이에 대해 조작할 때 유용하게 사용됩니다. 

마지막으로 Chrome의 익스텐션 중에 하나인 UI5 inspector가 있습니다. 이는 Chrome의 개발자 도구에 대한 확장 tool로 Google Chorme에서 F12 키를 통해 실행 할 수 있습니다. 해당 화면에서는 위 UI5 Diagnostics와 같이 SAPUI5 control tree와 view를 확인할 수 있고, control properties와 binding에 대하여 관리할 수 있습니다. UI5 Dignostics와 큰 차이는 없지만, 개발자 도구와 함께 확인할 수 있어 디버깅 시에 보다 더 유용하게 사용할 수 있습니다. 

2. 디버깅을 위한 SAPUI5 method

다음으로, 디버깅을 위해 SAPUI5에서 자체적으로 제공하는 method들에 대해 소개드리겠습니다.

콘솔에서 다루고자 하는 control을 찾기 위해서는 sap.ui.getCore().byID("yourID") method를 사용하면 됩니다. yourControl = sap.ui.getCore().byID("yourID")로 찾고자 하는 control을 찾아 이에 대해 조작하십시오. 만일 control이 아래의 이미지처럼 개발자 도구의 element tab에서 선택되어 있을 경우, $($0).control(0) method를 통하여도 접근할 수 있습니다.

위에서 접근한 control에 대한 세부 정보를 구하기 위해서는 아래의 세 method를 사용하십시오.

yourControl.getMetadata() → control의 metadata 체크 가능

yourControl.getParent() → control tree 상의 parent control 반환

yourControl. → 사용 가능한 method 모두 출력

3. Troubleshooting 시 팁(Tip)

마지막으로 UI5를 통해 개발을 하면서 문제를 해결할 때 도움이 될 팁 몇 가지를 안내 드리겠습니다.

• Google Chrome을 사용하는 것이 디버깅 시 더 편리합니다.
• 개발자 툴(F12)을 이용하여, 에러에 대한 console log를 확인하십시오.
• Breakpoint를 설정하여 코드의 어느 부분이 문제인지 체크하십시오.
• 더 쉬운 디버깅을 위해 각종 디버깅 도구를 사용하십시오.
• 개발자 도구의 Network 탭을 통해 404 error가 일어나는지 확인하고 소스 파일이 제대로 로드되었는지 체크하십시오.
• 개발자 도구의 Source 탭을 통해 소스 파일의 변경사항이 제대로 반영되었는지 체크하십시오.
• Demo kit에서의 Troubleshooting section을 참고하여 Troubleshooting에 도움을 얻으 실 수 있습니다.