모바일 웹앱을 개발할 때 아이폰 사파리(Safari)를 디버깅 해야할 때가 있습니다. 모바일 사파리에서 Mac 사파리와 다른 결과를 보여주는 경우가 있기 때문입니다.
iPhone Simulator 실행하기
모바일 웹을 디버깅하기 위해서 iPhone 시뮬레이터를 실행합니다.
실제 디바이스도 USB 연결을 통해 디버깅이 가능합니다. 하지만 Mac과 iPhone이 동일한 Apple 계정으로 로그인 되어 있어야 디버깅이 가능합니다.
XCode를 실행하고 메뉴에서 Simulator를 선택합니다.
Xcode 실행 -> 상단 메뉴 Xcode -> Open Developer Tool -> Simulator
iPhone 시뮬레이터에서 모바일 사파리를 실행하고 디버깅할 웹페이지를 접속합니다.
사파리(Safari) 브라우저 개발자 메뉴 활성화하기
Safari 메뉴에서 환경설정을 클릭합니다.
설정 화면에서 [고급] 탭을 선택하고, [메뉴 막대에서 개발자용 메뉴 보기] 를 체크합니다.
그러고 나면 [개발자용] 이라는 메뉴가 나타납니다.
하지만 개발자 메뉴에 모바일 Safari 디버깅 메뉴가 비활성화 되어 있습니다. 디버깅을 할 수가 없습니다. 😥
사파리 13 버전부터는 더이상 Mobile Web Inspector이 작동하지 않는다고 합니다. 아래 포럼에서 관련글을 찾았습니다. 그리고 해결 방법도 찾았습니다.
Safari Technology Preview 설치하기
Mac Safari에서는 더이상 모바일 사파리 디버깅 기능을 사용할 수 없습니다. 하지만 Safari Technology Preview 브라우저를 설치하면 가능합니다.
Safari Technology Preview 설치는 다음과 같은 방법으로 합니다.
사파리 브라우저 메뉴에서 [개발자용 > Safari Technology Preview 받기]를 클릭하여 다운로드 페이지에 접속하여 다운받아서 설치합니다.
또는 homebrew 로 설치합니다. 사실 brew로 설치하는게 더 간단합니다.
$ brew cask install safari-technology-preview모바일 사파리(Safari) 브라우저 디버깅하기
Safari Technology Preview 브라우저를 실행하고, 다음과 같이 [Develop > Simulator — iPhone …] 를 선택합니다. 그러면 iPhone 시뮬레이터에 접속 중인 사이트 목록을 볼 수 있습니다. 디버깅할 사이트를 선택합니다.
그러고 나면 아래 화면과 같이 모바일 사파리를 개발자 메뉴에서 디버깅 할 수 있습니다.
