개발한 웹 페이지가 아이폰 모바일웹에서만 다르게 보이는 경우가 더러 있습니다. 웹표준 작업 시 유용한 아이폰 개발자 모드를 활용한 디버깅 환경을 설정해보겠습니다.
•
준비물: 맥 컴퓨터, 아이폰
1. 맥 컴퓨터 사파리에서 개발자 도구를 활성화합니다.
•
[맥 컴퓨터]-[Safari]-[설정]-[고급]-[웹 개발자를 위한 기능 보기] 체크
2. 아이폰 사파리에서 웹 인스펙터를 활성화합니다.
•
[아이폰]-[설정]-[Safari]-[고급]-[웹 인스펙터] 스위치 ON
3. 맥 컴퓨터와 아이폰을 케이블로 연결합니다.
4. 개발자용 메뉴에서 연결된 아이폰 기기를 확인합니다.
•
[맥 컴퓨터]-[Safari]-[개발자용]-[아이폰] 기기의 웹페이지 선택
•
[아이폰]-[신뢰] 버튼 클릭
◦
아이폰 기기를 선택하면 아이폰에서 신뢰할 수 있는 기기인지 확인하는 팝업이 나타납니다. 수락하면 개발자 도구를 활용한 모바일 웹 디버깅 환경이 설정됩니다.
5. 아이폰에서 활성화된 모바일웹(Safari) 페이지의 개발자도구를 맥 컴퓨터에서 확인할 수 있습니다.
[참고자료]