[iOS] ipad, iphone safari 개발자 모드로 디버깅 하기

three.js 를 이용해서 만든 3d 화면 내용이 갤럭시 탭과 폰에서는 잘 나오는데 아이패드와 아이폰에서는 보이지 않는 증상이 나타났습니다.

맥북에서 화면 사이즈별로 테스트해볼 수 있긴 하지만 실제 기기를 갖고있기 때문에 해당 기기에서 직접 테스트 해보고 싶었습니다.

 

아이폰과 아이패드에서 사파리를 디버깅 하기 위해서는 맥북의 사파리에서 설정을 거쳐야 합니다.

 

1. 맥북의 사파리를 실행 시킵니다.

2. 사파리를 선택한 상태로 상단의 safari > 환경설정 클릭

 

3. 고급 탭 > 메뉴 막대에서 개발자용 메뉴 보기 클릭

4. 아이패드 또는 아이폰을 케이블로 연결합니다. 그리고 사파리를 실행해서 디버깅 할 사이트를 선택합니다.

아이패드에서 사파리를 실행 시킨 상태에서 맥북 사파리 상단의 탭에 개발자용 > ㅇㅇ의 iPad > 디버깅할 사이트 를 클릭

 

※ 만약 4번 내용처럼 사파리 항목이 보이지 않고 기기에서 웹 속성 활성화 가 나타난다면 아이폰 또는 아이패드에서 사파리 설정을 변경해줘야 합니다.

해당 글 맨 밑에 아이폰 또는 아이패드에서 설정하는 방법을 명시해놨습니다. 위에처럼 안나오는 분들은 맨 밑으로 내려가서 설정 완료 후 다시 돌아와주세요.

 

5. 원하는 항목의 내용을 확인

 

여기까지가 맥북으로 아이패드나 아이폰 사파리에서 디버깅 해볼 수 있는 방법이었습니다.

태그 위에 커서 올리면 엘리먼트 위치까지 표시되기 때문에 pc 에서 디버깅 하는것과 동일하게 할 수 있을것같습니다.

 

 

 

 

 

※ 사파리에서 아이패드의 내용이 보이지 않는 화면

 

(1) 아이폰 또는 아이패드에서 설정으로 이동

(2) 좌측 항목들 중 Safari 선택 -> 오른쪽 항목들중에 가장 아래 있는 고급 선택

(3) 고급 안에서 웹속성 항목이 비활성화 되어있는데 이 항목을 활성화상태로 변경 시켜주면 아이폰 또는 아이패드에서 해줘야하는 설정은 끝입니다.

 

(4) 아이폰 또는 아이패드에서 설정이 완료 되면 맥북의 사파리 개발자용 탭에서 아래 스크린샷과 같이 변경 되는걸 확인할 수 있습니다.

아래 스크린샷은 아직 아이패드에서 디버깅할 사이트를 접속하지 않은 상태라서 검사할 수 있는 응용 프로그램 없음 이라고 나오고 있습니다.

 

아이패드에서 사파리 실행해서 사이트에 접속하면 아래 스크린샷처럼 나타나게 됩니다.