각 OS의 웹뷰 디버그 방식은 상당히 다른데, 아무래도 IOS의 경우 디폴트 브라우저가 딱 정해져있어서 그런가? 확실히 IOS가 편하다.
편의상 카테고리는 안드로이드로 두겠으나, 양쪽 OS 둘 다 소개하도록 한다.
(시뮬레이터가 아닌 실제 기기로 테스트 한 케이스이며, 둘 다 기기의 개발자 모드가 활성화 된 상태라고 가정한다.)
1. IOS
XCODE로 앱을 켜면 앱을 디버그 할 수 있다. Xcode로 앱을 연 후, WebView가 존재하는 ViewController을 연다.
그리고 사파리 브라우저를 연다. 위에 상태표시줄을 보면,
다음처럼 개발자용이라고 탭이 있는 것이 보인다. 이것을 클릭해보면,
다음처럼 인식된 기기가 보인다.
이 탭에 마우스를 올려보면 앱의 이름(노란색 상자 위치)과 열린 웹뷰(주황색, 파일 이름)가 보인다. 파일을 클릭하면 웹 콘솔이 열리며, 자바스크립트의 호출 등을 디버그 할 수 있게 된다.
2. Android
안드로이드의 경우 조금 방식이 IOS보다 귀찮(?)은데,
크롬 주소창에 chrome://inspect/#devices 를 검색하면 다음과 같은 창이 뜬다.
아래 노란 창에 연결된 기기가 뜨고, 활성화된 앱의 웹뷰 액티비티로 접근하면 해당 웹뷰의 파일명이 출력되고, 해당 파일명을 클릭하면 사파리와 마찬가지로 디버그용 웹 콘솔이 활성화된다.
반응형
