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~~~~~!!
개발자는 역시 디버그!
