모임의 썸네일을 변경하는 기능을 모두 구현하고 테스트도 완료하여 배포하였다. 모든 기능이 정상적으로 동작하는 것을 확인했는데 팀원에게 다음과 같은 피드백을 받았다.

모바일 환경에서 모임의 썸네일을 수정이 안돼요”

분명 웹 사이트에서 동작하는 것을 확인했고, 해당 피드백을 받은 후 다시 재확인을 해도 제대로 동작하였다. 따라서 OS 에 따른 문제가 발생했구나, 라고 추측하여 모바일 환경에서 디버깅할 수 있는 방법을 찾아보았다.

아이폰 설정

일단 디버깅하려는 아이폰의 보안부터 설정한다. 설정 - Safari - 고급 - 웹 속성 의 값을 활성화해준다.

Untitled

Mac 설정

Safari 에 접속하여 환경설정 - 고급 - 메뉴 막대에서 개발자용 메뉴 보기 를 선택한다.

Untitled

Untitled

그러면 메뉴쪽에 ‘개발자용’ 메뉴가 생성된 것을 확인할 수 있다.

Untitled

아이폰 Mac 연결

양 측에서 각각의 설정을 마쳤으면 두 기기를 연동한다. 아이폰으로 디버깅을 원하는 사이트에 접속하면 내가 접속한 사이트의 목록이 Mac 에 띄워진다.

Untitled

아이폰에서 실제 동작을 제어하고 Mac 의 개발자도구에서 디버깅을 하면 된다. 개발자도구 덕분에 CORS 문제가 발생했다는 것을 확인할 수 있었다.

Untitled