안드로이드 웹뷰 원격 디버깅하기.

안드로이드에서 웹뷰를 활용하여 개발하는경우가 많다.

 

pc에서는 문제없이 잘 돌아가던 소스가 안드로이드 웹뷰에서는 먹통일 때가 있다..

 

이때 개발자 입장에서 필요한(추천할) 기능을 소개한다.

 

pc의 크롬에서 pc와 연결된 모바일 기기로부터 개발중인 웹뷰의 웹페이지를 원격으로 연결하여 DevTools로 디버깅을 할 수가 있다.

 

쉽게 설명하자면 pc에서 띄운 크롬에서 안드로이드 웹뷰를 원격 연결하고 pc에서 모바일의 웹뷰를 디버깅 하여 자바스크립트 등을 break point로 한줄 한줄 확인 할 수가 있다.

 

 

 

1. 모바일(핸드폰 또는 태블릿 등)에서 개발자도구로 진입 하여 usb 디버깅 활성화 시킨다.

 

2. 웹뷰를 띄울 activity에서 아래 소스를 복붙 한다.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) {
    binding.webview.setWebContentsDebuggingEnabled(true);
}

 

3. Chrome 개발자 도구에서 원격할 대상의 단말기를 연결

 3.1 pc에서 chrome을 실행하여 주소창에 chrome://inspect를 복붙 하고 실행.

 3.2 아래 그림과 같이 Remote Target(원격 대상) 장비 목록이 뜰때 inspect를 눌러주면 원격 실행이 가능하다. 단 그림과 같이 여러개가 뜰 경우 detached라고 뜬 것의 inspect(검사) 는 아무런 반응을 하지 않으며 at(xxx, xxx) 라고 입력된 것의 inpset(검사) 는 원격이 진행된다.

 

 

4. 모바일 페이지의 원하는 곳에 break point 걸기.

 4.1 chrome 개발자 도구에서 Sources 탭 클릭
 4.2 break point 걸고자 하는 자바스크립트 가 있는 경로까지 찾아간다.

 4.3 원하는 곳에 break point를 걸기 위한 소스 라인을 클릭한다.

 

5. 디버깅을 잘 활용하여 오류 나는 부분을 잘 찾아 처리한다.

 

 

 

이 글을 읽고 도움이 되셨으면 !!!