웹 개발을 할 때 브라우저에서 제공하는 개발자 모드로 디버깅을 할 수 있다. 하지만 모바일 환경에서 개발되는 웹 또는 하이브리드 웹 앱의 경우 개발자 모드로 디버깅하기는 쉽지 않다. 안드로이드의 경우 Google Inspector (chrome://inspect)를 통해 모바일 환경에서 개발되는 내용을 PC에서 비교적 쉽게 디버깅할 수 있지만 iOS의 경우 WKWebView에서 원격 Web inspector 디버깅을 지원하지 않아 Google inspector를 사용할 수 없었다.
하지만 iOS 16.4+ 이후에 WKWebView 에서 지원을 하면서 Chrome 버전이 115 이상이면 Mac의 Safari 브라우저를 통해 디버깅이 가능해졌다.
- iOS 16.4+
- Chrome for iOS 115+
아이폰내 웹 인스펙터 설정
우선 아이폰의 설정에서 Safari의 웹 인스펙터 설정을 해야 한다.
아이폰 설정 > Safari > 고급 메뉴에서 웹 인스펙터 항목을 on 설정합니다.
이것만으로도 아이폰의 Safari 브라우저에 대한 디버깅은 가능해졌습니다. 하지만 Chrome으로 실행한 웹 화면에 대한 디버깅을 하고 싶다면 Chrome 앱의 설정을 한 가지 더 해주어야 합니다.
Chrome 앱을 실행 후 우측 하단의 더보기 메뉴를 눌러 Chrome 설정에 들어갑니다. 설정 메뉴에서 콘텐츠 설정 메뉴에서 Web Inspector 항목을 on 설정합니다.
Mac의 Safari 개발자 모드 활성화
Mac 에서 디버깅하기 위해서는 Mac Safari 앱에서 개발자 모드를 활성화해야 한다. Mac에서 Safari 앱을 오픈하고 설정에 들어가면 고급 탭이 있다. 거기서 메뉴 막대에서 개발자용 메뉴 보기를 체크해 주면 Safari 상단에 개발자용 메뉴가 표시된다.
이제 Mac 과 아이폰을 케이블 연결해 주면 Safari 개발자용 메뉴에 연결된 아이폰의 항목이 보일 것이다. 아이폰 Chrome에서 테스트를 원하는 웹 페이지를 오픈하면 Safari 개발자용 항목에서 해당 페이지에 대한 부분이 표시되고 해당 페이지를 클릭하면 디버깅을 할 수 있다.
'iOS.Swift' 카테고리의 다른 글
| [Swift] property wrapper 정의 및 사용법 예시 (0) | 2023.11.24 |
|---|---|
| [Swift] class 와 struct 의 차이 (0) | 2023.11.15 |