iOS 웹뷰/네트워크 디버깅하는 방법 - mitmproxy & safari inspect

앞에서 "안드로이드 모바일 웹뷰를 디버깅하는 방법" 글을 작성했는데,

이번에는 iOS​ 웹뷰를 디버깅 하는 방법에 대해 작성하려 한다.

이번에는 네트워크 디버깅과, 시뮬레이터/기기 웹뷰 디버깅 이 두 가지에 대해 공유하려 한다.

 

| iOS 네트워크 디버깅 

우선 아이폰은 안드로이드와 같은 방법으로 디버깅이 불가능한데, 다른 방법을 찾다가 mitmproxy를 통해 가능하다는 이야기를 듣게 되었다. 이름에서도 알 수 있듯 Man in the middle attack으로 네트워크 트래픽을 가로채 보여주는 것 같다. 학교에서 보안 강의를 정말 열심히 들은 건 아니지만(?) 기억이 나서 반가웠다.ㅎㅎ

 

아무튼 mitmproxy 관련한 정보를 찾아보니 아웃사이더님이 잘 정리해두신 글을 찾을 수 있어 직접 적는 것보다 첨부하는 것이 나을 것 같아 링크를 공유한다.

 

[참고] mitmproxy로 iOS 기기의 네트워크 트래픽 살펴보기 - https://blog.outsider.ne.kr/1514

mitmproxy로 iOS 기기의 네트워크 트래픽 살펴보기 :: Outsider's Dev Story

 

다른 네트워킹 디버깅 방법으로 wireshark도 쓰고 tcpdump도 쓰려고 해보고 했는데 mitmproxy로 해결할 수 있었다.

 

 

 

| iPhone Simulator/iPhone 웹뷰 디버깅 

 

모바일 웹 디버깅을 위해 우선 Xcode의 simulator를 실행합니다. 실제 디바이스도 USB 연결을 통해 디버깅이 가능한데, 사용하는 맥과 iPhone이 동일한 애플 계정으로 로그인 되어 있어야 디버깅이 가능하다고 합니다.

 

Xcode 실행 -> 상단 메뉴 Xcode -> Open Developer Tool -> Simulator

 

그 후, iPhone 시뮬레이터에서 모바일 사파리 혹은 디버깅할 웹뷰 페이지에 접속합니다.

다음으로는 Mac의 Safari 브라우저에서 개발자 메뉴를 활성화해주면 되는데, 방법은 아래와 같습니다.

사파리를 켜고 좌측 상단의 safari 메뉴에서 환경설정을 클릭합니다.

 

고급 탭의 "메뉴 막대에서 개발자용 메뉴 보기" 를 체크해 활성화 시켜줍니다.

 

 

그러면 상단 메뉴에 "개발자용" 메뉴가 나타나게 되는데, iPhone 시뮬레이터 혹은 iPhone과의 usb연결이 정상적으로 진행되었을 경우 해당 메뉴에 기기의 이름이 나타나게 됩니다. 해당 메뉴를 통해 안드로이드+크롬 인스펙터 처럼 웹 디버깅을 할 수 있습니다.

 

 

 

사파리 13 버전부터는 더이상 동작하지 않는다고 하는데, Safari Technology Preview 설치를 통해 해결이 가능하다고 합니다.