Safari 개발자 도구

<aside> 💡 아이폰 화면이 잠겨있을 땐 콘솔을 사용할 수 없다

</aside>

1. 맥북 ⇄ 아이폰 USB 연결

2. 아이폰 설정 → Safari → 고급 → <웹 속성> 체크

3. macOS 사파리 설정 → 고급 → <메뉴 막대에서 개발자용 메뉴 보기> 체크

4. macOS 사파리 상단 메뉴 → 개발자용 → 아이폰 기기 이름 → 아이폰 사파리에 열려있는 웹사이트 선택

   

   웹사이트를 선택하면 대응하는 콘솔창이 뜬다

5. macOS 사파리 콘솔 창에서 현재 연동중인 웹사이트의 속성 확인

   

   우측 아이폰 이미지는 참고를 위해 스크린샷해서 띄어둠

iOS Simulator

<aside> 💡 Status bar(노치 영역), Nav bar, Tab bar(주소창 영역), Home indicator 같은 아이폰 UI를 그대로 표현하므로 실물 기기를 이용할 때 어떻게 보일지 확인할 수 있다. 설정을 완료한 후 Xcode 실행 없이 스포트라이트에서 Simulator를 검색한 후 바로 실행할 수 있다.

</aside>

1. 앱스토어에서 Xcode 설치

2. ⌘ , 단축키로 설정창 진입 → Platforms → 원하는 버전의 iOS Simulator 설치

   

   최신 버전은 기본 내장돼있다

3. Xcode 상단 메뉴 → Window → Devices and Simulators → 원하는 iOS 버전/기기 Simulator 추가

   

   좌측 하단 + 버튼을 눌러서 새로운 Simulator를 추가할 수 있다

4. Xcode 상단 메뉴 → Xcode → Open Developer Tool → Simulator 클릭

   

5. Simulator 상단 메뉴 → File → Open Simulator → 기기 선택

   

   기기를 선택하면 또 다른 Simulator가 실행된다

6. macOS 사파리 설정 → 고급 → <메뉴 막대에서 개발자용 메뉴 보기> 체크

7. macOS 사파리 상단 메뉴 → 개발자용 → 시뮬레이터 → 웹사이트 선택 (선택하면 콘솔창이 뜬다)

   

   시뮬레이터 사파리(좌측)에 연동중인 웹사이트의 콘솔 창(우측)

모바일 콘솔 — Eruda