안드로이드 웹뷰 디버깅하기 (Android WebView Debugging)

안드로이드 앱에서 웹뷰를 구현하였으나 웹뷰 내에서 발생하는 버그를 분석하거나 디버깅하는 것이 되지 않아 불편함을 겪었다면 Chrome Developer Tools(크롬 디벨로퍼 툴, 크롬 개발자 도구 = DevTools)를 이용하여 해결할 수 있다.

 

전제 조건

---

- 안드로이드 킷캣 (Android 4.4, KitKat) 이상만 가능

 

 

해야 할 일

---

• 웹 → chrome://inspect를 통해 디버그를 지원하는 웹뷰 목록에 접근한다.

디버깅 모드 전의 크롬 개발자 도구 상태

• 안드로이드 디바이스   →  디버깅 모드를 활성화한다. (참고: https://developer.android.com/studio/debug/dev-options?hl=ko)

온디바이스 개발자 옵션 구성  |  Android 개발자  |  Android Developers

• 안드로이드 코드 → 아래의 디버깅을 위한 WebView 구성 참고

 

디버깅을 위한 WebView 구성

---

 디버깅 모드를 설정하기 위해서 웹뷰 관련 코드에서 setWebContentsDebuggingEnabled 를 호출하여 true로 설정해주면 된다.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { // 안드로이드 버전 확인, 킷캣 이상 가능
    WebView.setWebContentsDebuggingEnabled(true); // 디버그 모드 설정
}

 

디버깅을 위한 WebView 구성 (응용, 디버그 모드에서만 설정)

---

웹뷰 디버깅은 안드로이드 매니페스트(Manifest)의 플래그(flag) 상태에 영향을 받지 않는다.

그냥 setWebContentsDebuggingEnabled 메소드만 호출하여 설정하면 개발, 릴리즈 모드에 모두 디버깅이 가능해질 수 도 있다.

따라서, 아래의 조건을 추가하면 debuggable인 경우에만 웹뷰 디버깅을 활성화가 가능하다.

if (Build.VERSION.SDK_INT >= Build.VERSION_CODES.KITKAT) { // 안드로이드 버전 확인, 킷캣 이상 가능
    if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) { // 디버그 모드 확인
	WebView.setWebContentsDebuggingEnabled(true); // 디버그 모드 설정
    } 
}

 

테스트 

---

위의 코드를 추가하였으면 앱을 실행하고 앱에서 해당 웹뷰에 접근한다.

그다음, 웹에서는 크롬 개발자 도구의 Devices 메뉴에서 해당 웹뷰의 디버깅을 할 수 있다.

 

크롬 개발자 도구에서 WebView를 볼 수 없는 경우

---

• 앱에 WebView 디버깅이 활성화되어 있는지 확인한다.
• 기기에서 디버그 하려는 WebView로 앱을 연다. 그런 다음 chrome://inspect 페이지를 새로 고친다. (F5)

 

 

참고)

Remote debugging WebViews (https://developer.chrome.com/docs/devtools/remote-debugging/webviews/)

Remote debugging WebViews - Chrome Developers