Simulator를 사용하여 iOS 버전 Safari 웹 페이지의 동작 디버깅

모바일용 웹 페이지에서 특정 OS 버전에서 JS가 잘 동작하지 않는 등의 버그가 발생하는 경우가 있다.

우연히 같은 버전의 단말기가 수중에 있으면 곧바로 디버그할 수 있지만, 자주 수중에는 없기 때문에, 그 때에 Xcode 부속의 시뮬레이터로 디버그를 하기 위한 순서 메모

환경(Mac측)

Xcode(버전 9.2)
Safari (버전 11.1.1)

방법

1. Mac에 Xcode 설치

AppStore에서 다운로드하는 방법은 할애.

2. Simulator를 시작합니다.

Xcode를 시작하여 Simulator를 시작하는 방법도 있습니다만, Bash 실행 쪽이 스마트하므로 여기를 소개.

$ open /Applications/Xcode.app/Contents/Developer/Applications/Simulator.app

3. 모든 버전의 iOS DL

검증하고 싶은 버전의 OS를 이하의 순서로 넣을 수 있다
Hardware → Device → Managed Device를 선택, Xcode가 부분적으로 시작한다


장치 설정 화면이 나오므로 Simulators

왼쪽 하단에 "+"의 추가 버튼이 있으므로 누르십시오.

OSVersion 풀다운을 선택하고 Download more simulator runtimes

다운로드하고 싶은 단말기에 체크를 넣어 다운로드하는, 시간이 걸리므로 기다린다

4. 모든 iOS 단말기를 시작

다운로드가 완료되면 시작하고 싶은 OS와 단말 종류를 선택

5. 디버깅하려는 페이지를 Simulator의 Safari에서 열기

간단히 Safari를 탭하여 URL을 엽니다.

Mac의 키보드와 연동하고 싶다면Hardware → Keyboard → Connect Hardware Keyboard

6. PC측 Safari를 시작하여 개발을 활성화

Safari의 '환경설정'을 선택, 상세한 メニューバーに'開発'メニューを表示 에 체크 박스를 넣는다

7. 개발 탭에서 Simulator 선택

Safari의 개발 탭에서 방금 시작한 Simulator를 선택


그러면 웹 관리자가 시작되고 디버깅 가능합니다.

참고 링크

터미널에서 iOS 시뮬레이터 열기 - Qiita

iOS의 Safari 웹 인스펙터를 사용해보기 | Tips Note by TAM