Android webview 디버깅 하기

Android 앱을 개발하다보면 Native 단과 webview를 사용한 HTML(Javascript)이 있을 수 있다.

Android 의 경우는 기본적으로 디버깅을 할 수 있고

HTML 소스의 경우에는 Chrome 을 이용하여 디버깅하며 개발을 한다.

그러나 이전까지는 Android Webview에서 동작하는 HTML 에 대해서는 디버깅을 할 수 없었다.

실제 Chrome App 에서 동작하는 것과 Webview상에서 동작이 상이하게 동작하는 경우가 있다.

이 경우 정확한 원인 파악을 하기 위해서는 Webivew 로 띄워져 있는 HTML Page에 대해 디버깅을 하여 원인을 파악해야 한다.

이를 하기 위한 방법을 공유하고자 한다.

조건은 아래와 같다.

- Desktop에 Chrome 32 version 이상이 설치

- Android 기기와 USB 케이블로 연결

- Android 4.4+(kitkat) 이상

- Android Source에 디버깅 허용으로 컴파일(또는 이스터 에그 형식으로 상용 버전에서도 풀수 있으면 좋을 것 같습니다.)

순서는 아래와 같다.

1. 디버깅하고자 하는 단말이 USB 디버깅이 활성화 있어야 한다.

2. Andorid Webview의 setWebContentsDebuggingEnabled 옵션이 true 여야 한다.

> 아래와 같이 kitkat 이상의 경우 디버깅을 항상 허용해 놓을수 있다.

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

> 보안이 걱정된다면 아래와 같이 플래그를 두어 내부 apk 빌드시에만 허용을 해놓으면 된다.

  if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT)
{
    if (0 != (getApplicationInfo().flags &= ApplicationInfo.FLAG_DEBUGGABLE))
    { WebView.setWebContentsDebuggingEnabled(true); }
  }

3. Desktop Chrome 에서 chrome://inspect 접속 후  나와있는 항목 중 디버깅할 내용을 선택(inspect를 눌러요)

4. Chrome 으로 디버깅!
Ye~~~~~!!

개발자는 역시 디버그!