티스토리 뷰
Chrome, Safari 브라우저로 디버깅 방법은 웹뷰 디버깅에 비해 쉽습니다.
Android 기반의 Chrome은 Chrome 브라우저를 사용해서 쉽게 디버깅 가능하고
iOS 기반의 Safari는 Safari technology preview 도구를 사용하면 됩니다.
하지만 App에 Webview경우 접근할 방법이 없어서 디버깅하기 어렵습니다.
제가 생각하는 최선의 방법은 Proxy 툴을 이용해서 로컬 서버 페이지와 스크립트를 바꿔서 이슈를 차근이 해결하는 방법뿐이다.
Mac 사용자라면 무료도구인 Proxyman을 추천합니다. 같은 기능을 하는 도구로 charles proxy 도 있으나 이 도구는 30일 동안만 무료 사용 가능합니다. Windows 사용자라면 Fiddler를 추천합니다.
사용방법
Proxyman 홈페이지에서 다운로드하여 설치합니다.
Proxyman 메뉴에 Certificate menu -> Install Certificate on this Mac... 선택하여 인증서를 설치합니다.
디버깅할 모바일 디바이스와 PC를 같은 Wi-Fi에 접속시킵니다.
모바일 디바이스의 프록시 구성을 수동으로 설정해야 합니다.
기기별로 아래와 같이 설정합니다.
iOS 경우
설정 > Wi-Fi > 접속한 Wi-Fi 오른쪽에 i 터치 > HTTP 프록시 - 프로시 구성
수동으로 변경한 후
- 서버 : PC IP 주소 (자신의 PC IP 확인)
- 포트 : 9090 (proxy man 기본값)
Android 경우
설정 > 연결 > Wi-Fi > 접속한 Wi-Fi 오른쪽 톱니바퀴 모양 터치 > 고급 > 프록시
수동으로 변경한 후
- 프록시 호스트 이름 : PC IP 주소 (자신의 PC IP 확인)
- 프록시 포트 : 9090 (proxy man 기본값)
설정한 후 Proxyman에서 장비에서 오고 가는 API 목록들을 확인할 수 있습니다.
https 프로토콜은 바로 보이지 않는데 https도 디버깅하려면 모바일 디바이스 장비에 추가적으로 설치를 해줘야 합니다.
공식 사이트에 가이드되어 있습니다.
실제 프로젝트에서 사용하면서 유용했던 몇 가지는 다음과 같습니다.
1. 응답 값을 확인할 수 있다.
API 선택하면 body 데이터를 확인할 수 있습니다. 브라우저 네트워크에 보이는 값들을 확인할 수 있습니다.
응답 값이 정상적으로 오고 있는지 확인할 때 꽤 유용합니다.
아래는 이미지는 Naver App에서 호출하는 API 목록 중에 http로 되어 있는 반환 값을 확인한 결과입니다.
2. Webview 페이지를 조작할 수 있다.
Tool > Map Local 선택하면 아래와 같은 화면을 만날 수 있습니다.
왼쪽 패널에 URL 등록하면 해당 URL이 호출될 경우 특정 파일로 치환할 수도 있습니다.
또는 임의의 html과 스크립트를 넣어 테스트해볼 수 있습니다. Map Content로 작성한 내용은 바탕화면에 저장됩니다.
웹뷰의 넓이와 높이가 궁금해서 넣은 스크립트 예제는 다음과 같습니다.
3. 로컬 서버 경로로 치환 가능하다.
Tool > Map Remote 메뉴를 클릭하면 아래와 같은 화면을 만날 수 있습니다.
특정 URL로 호출하는 목록을 로컬 서버로 우회한 후 코드를 수정하면 배포 없이 로컬에서 미리 확인 할 수 있습니다.
프록시 도구 중에 하나인 Proxyman을 활용해서 웹뷰를 디버깅하는 방법을 배워봤습니다.