[Android][WebView] 안드로이드 웹뷰 사용한 앱 디버깅 하는 방법! (Feat. 크롬 버전 - Chromium)

 

안녕하세요.

 

 

간단하게 설명드리고 마치겠습니다.

 

안드로이드 앱에서 웹뷰를 사용한 하이브리드 앱을

 

웹 단에서 디버깅해보고 싶을 경우가 있습니다.

 

 

 

뭐, 간단하게는 크롬에서 해당 웹페이지 들어가서 F12 - 위 그림을 누르면 모바일뷰로 보여지며 가능은 합니다만

 

불편한 점이 한 두 가지가 아닙니다.

 

직접 앱 <-> 안드로이드 스튜디오, 컴퓨터 <-> 크롬 웹 두 가지를 켜서 디버깅해야지 이슈나 에러를 더 잘 수정, 보완할 수 있습니다.

 

 

 

 

 

 

전제 조건

  ->  테스트하는 스마트폰이 시스템 창에서 개발자 옵션이 보여야 한다. 즉, 개발자 설정이 완료되어있어야 한다.

  ->  스마트폰과 컴퓨터(크롬) 이 연결되어 있어야 한다. USB든, WIFI(네트워크) 든 간에.

 

 

 

1단계.

  -  크롬 브라우저에서 chrome://inspect 에 접속한다.

 

 

2단계.

 

  -  위와 같은 결과 화면이 출력된다. 

 

  -  그럼 하단의 Remote Target 에 테스트하려는 앱이 표시된다.

 

  -  이를 클릭하면 바로 F12 와 같은 모드가 출력된다.

 

 

 

*** 참고 사항

  -  크롬 뿐 아니라 앱에서 WebView를 사용하면 디버깅을 할 수 있다. 하지만, 앱에서 WebView 디버깅을 활성화시켜야 한다.

  -  하단의 소스코드를 집어넣으면 끝!

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

 

 

이상입니다.

 

다들 몸 조심하시고 좋은 코딩 시간 보내십쇼!

 

 

감사합니다.