WebView 원격 디버깅

Chrome 개발자 도구를 사용하여 네이티브 Android 앱에서 WebView를 디버그합니다.

Android 4.4 (KitKat) 이상에서 DevTools를 사용하여 네이티브 Android 애플리케이션에서 WebView 콘텐츠를 디버그합니다.

요약

  • 네이티브 Android 앱에서 WebView 디버깅을 사용 설정하고 Chrome DevTools에서 WebView를 디버그합니다.
  • chrome://inspect를 통해 디버그 지원 WebView 목록에 액세스합니다.
  • WebView 디버깅은 원격 디버깅을 통한 웹페이지를 디버깅하는 것과 동일합니다.

디버깅을 위한 WebView 구성

애플리케이션 내에서 WebView 디버깅을 사용 설정해야 합니다. WebView 디버깅을 사용 설정하려면 WebView 클래스에서 정적 메서드 setWebContentsDebuggingEnabled를 호출합니다.

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

이 설정은 애플리케이션의 모든 WebView에 적용됩니다.

도움말: WebView 디버깅은 애플리케이션 매니페스트에 있는 debuggable 플래그 상태의 영향을 받지 않습니다. debuggabletrue일 때만 WebView 디버깅을 사용 설정하려면 런타임에 플래그를 테스트합니다.

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

DevTools에서 WebView 열기

chrome://inspect 페이지에 기기에 디버그 지원 WebView 목록이 표시됩니다.

디버깅을 시작하려면 디버그하려는 WebView 아래에서 inspect를 클릭합니다. 원격 브라우저 탭에서와 마찬가지로 DevTools를 사용합니다.

WebView에서 요소 검사

WebView와 함께 나열된 회색 그래픽은 기기 화면을 기준으로 한 크기와 위치를 나타냅니다. WebView에 제목이 설정되어 있으면 제목도 나열됩니다.

문제 해결

chrome://inspect 페이지에 WebView가 표시되지 않나요?

  • 앱에 WebView 디버깅이 사용 설정되어 있는지 확인합니다.
  • 기기에서 디버그하려는 WebView가 있는 앱을 엽니다. 그런 다음 chrome://inspect 페이지를 새로고침합니다.