✅ 웹개발자가 모바일 웹뷰 디버깅하기
회사 서비스는 웹뷰 환경이다.
기존에 웹뷰 디버깅 환경이 구축되어있지 않아 처음엔 alert찍어가며 값을 확인해보곤 했다.
그러나 웹뷰 브라우저를 디테일하게 디버깅 해봐야 하는 상황이 왔고, 디버깅 방법을 알아보았다.
시도1.
chrome 디버깅을 하기 위해선, 앱개발 쪽에서 setWebContentsDebuggingEnabled(true) 함수를 실행해야 한다.
그러나 회사 유니티팀에선 디버그모드를 켜는 기능이 없어서 저 함수를 실행할 수 없다고 한다.
덧붙여서 안드로이드에 디버깅 툴을 쓸 수 있는 방법이 없을거라 한다..!
시도2.
charles라는 Proxy툴을 사용해서 디버깅하는 법을 선택하기로 했다.
모바일 -> 프록시 서버(charles) -> 서버
모바일 <- 프록시 서버(charles) <- 서버
모바일에서 일어나는 모든 네트워크 요청,응답이 charles에 기록된다.
또한 프록시 서버에서 api요청을 다른 주소로 우회시킬 수도 있다!
✅ charles 세팅
환경 : maxOS , 갤럭시s21
1. charles 설치 https://www.charlesproxy.com/latest-release/download.do
2. 맥 인증서 설치
help > SSL Proxying > Install Charles Root Certificate
3. MacOS Proxy 체크
4. Proxy > Proxy settings. 포트 설정 (8888)
5. hepl > Local IP Address
현재 내 pc의 IP주소 확인
✅ 안드로이드 세팅
pc와 모바일이 동일한 wi-fi에 연결되있어야 함.
1. 와이파이 설정 클릭
2. charles에서 확인한 내 Local IP주소와 포트 번호 입력
- MAC 주소 유형을 "휴대전화 MAC" 으로 설정해 줘야 한다.
(랜덤MAC으로 하면 프록시 기능을 사용할 수 없음)
3. 모바일에 인증서 설치
- 모바일에서 https://chls.pro/ssl 입력 > 다운
- 나의 경우는 인증서 저장만 되고, 자동으로 설치까진 안되었다.
- 환경 > 인증서로 검색 > 기기에 저장된 인증서 설치 > 직접 해당 인증서 클릭해서 설치
✅ api요청 우회하기
1. Tools > Map Remote Settings > Enable Map Remote 체크
2. 경로 설정
- 네이버로 접속시 다음으로 우회하게끔 입력
3. 이제 웹이든 모바일이든 네이버를 접속하면 다음으로 이동된다!
✅ 로컬 개발환경을 그대로 배포되있는 앱에 반영해보기
배포되있는 모바일 앱에서 api요청을 로컬 개발 주소인 localhost:8080으로 바꾸어
로컬 환경의 코드를 그대로 앱에 적용시켜보며 디버깅하면된다.
모바일에서 개발서버 주소로 보내는 api요청은 모두(*) charles를 통해 현재 내 로컬 개발 주소로 보내진다.
그리고 로컬 개발 환경에선 실제 개발서버로 요청되게끔 config.js에 proxy 설정을 해놓았다.
요청 : 모바일 -> 찰스 -> localhost:8080서버 -> (proxy) 실제 서버
응답 : 모바일 <- 찰스 <- localhost:8080서버 <- (proxy) 실제 서버
※ 여러 프록시 툴 비교
charles proxy : 30일 동안만 무료
Proxyman : 완전 무료 , 맥 사용자에게 좋음, UI도 더 단순함
Fiddler : 윈도우 사용자에게 좋다 함
'프론트엔드' 카테고리의 다른 글
| cors와 options메서드 (0) | 2024.04.28 |
|---|---|
| 파일 다운, 업로드 (0) | 2024.01.30 |
| pwa 웹앱 설치하기 - manifest.json (0) | 2023.11.26 |
| 네이티브 앱, 웹앱, 웹뷰(하이브리드앱) (0) | 2023.11.19 |
| 강제로 리렌더링 시키기 (0) | 2023.10.29 |
