안드로이드 모바일 웹뷰를 디버깅하는 방법 - Chrome inspect

지금까지 나는...

개발을 하며 사용한 디버깅 툴은 크롬 개발자도구 뿐이었다. webview에 띄울 웹서비스 개발을 해본적은 있지만 모바일과 PC 로컬 개발 환경에 큰 차이가 없었고 크롬 개발자 도구에서의 디버깅으로 충분했었다.

그런데 이번 프로젝트에서는 기존 하이브리드앱 내부 웹뷰로 배포되어지는 서비스이다 보니 로컬PC에서 개발을 마친 후 디바이스에서도 테스트가 필요했는데... 그 과정에서 한 가지 버그를 발견했다. 분명 로컬에서는 잘 되는데 모바일에선 왜 안될까?

 

(좌) PC 로컬 환경 (우) 모바일 환경 테스트 캡쳐

 

테스트 중 발견한 버그. PC 로컬에서는 "관악구" 이웃과 라고 지역이름이 잘 나오는데 모바일 환경에서는 이웃과 라고 렌더링 되어졌다.... 뭐 때문인지 로그를 확인하고 싶은데 모바일에서 콘솔 로그를 확인 할 수는 없을까?? 하며 답답해 하며 시도한 방법에 대해 기록을 남겨두려 한다.

 

 

 log용 div를 만들어 string으로 출력해보자 👀

에러 로그를 콘솔에서만 봐야하나~

단순하게 로그만 한번 확인해보고 싶어서 API 요청 후 넘어오는 error를 div 안에 출력해 보았다.

이 방법으로 Network 로그를 확인할 수 있었다. 500 상태코드를 보고 서버쪽에서 관련 로그를 다시 확인해 문제를 해결 할 수 있었다.

문제는 해결했지만 로그를 확인하고 싶을 때 마다 div와 state를 추가하고 삭제하는 것은 정말 아닌 방법이니까 간단하고 빠른 방법을 찾아보니 PC 크롬에서 개발자 도구를 사용하는 것 처럼 안드로이드의 웹뷰를 PC와 연결을 통해 개발자도구를 사용할 수 있다는 것을 알게 되었다.

 

 

 

크롬 inspect로 안드로이드 디버깅 하자 🤩

우선 간단한 설정법에 대해 적어보면 아래와 같다.

 

안드로이드 웹뷰 크롬 개발자 도구 설정 방법

1. 설정 > 휴대전화 정보 > 소프트웨어 정보 > 빌드번호 빠르게 여러번 연속 클릭

2. 설정 > 개발자 옵션 에서 USB 디버깅 사용 설정

3. USB를 사용해 PC ↔ Android 디바이스 연결

4. 크롬브라우저에서 chrome://inspect 접속

 

5. 디바이스에서 웹뷰 서비스 접속 후 PC Chrome://inspect 에서 변경확인

6. 서비스 이름 아래  inspect  버튼 클릭 후 새창에서 크롬 개발자 도구 사용이 가능하다.

 

개발자 도구 엘리먼트, 네트워크, 콘솔 탭 모두 PC에서 사용하는 것 처럼 사용할 수 있었다.

엘리먼트, 콘솔은 로컬에서 테스트 하면서 다 확인할 수 있으니 디바이스에서 최종 테스트 하며 네트워크 탭을 잘 확인하면 될 것 같다.

 

 

이렇게 안드로이드 웹뷰를 디버깅 했고, 다행히 문제가 되는 부분을 찾아 수정할 수 있었다.

 

지금 보면 너무 당연한 디버깅 방법이 아닐까 싶은 생각이 들지만, 잘 몰랐던 그 당시의 나와 같은 사람에게는 도움되지 않을까 싶어 게시해본다. 다음에는 IOS에서 디버깅 하는 방법에 대해서 포스팅 해 볼게요.