웹 앱 디버그

console JavaScript API를 사용하여 JavaScript를 디버깅하고 Logcat에서 출력 메시지를 볼 수 있습니다. Firebug 또는 Web Inspector로 웹페이지를 디버그하는 데 익숙하다면 console(예: console.log()) 사용법도 익숙할 것입니다. Android의 WebKit 프레임워크는 대부분의 동일한 API를 지원하므로 WebView에서 디버그할 때 웹페이지에서 로그를 수신할 수 있습니다. 이 섹션에서는 디버깅에 콘솔 API를 사용하는 방법을 설명합니다.

WebView에서 콘솔 API 사용

콘솔 API는 WebView에서 디버깅할 때도 지원됩니다. 콘솔 메시지가 Logcat에 표시되려면 onConsoleMessage() 메서드를 구현하는 WebChromeClient를 제공해야 합니다. 그런 다음 setWebChromeClient()를 사용하여 WebChromeClient를 WebView에 적용합니다. 자세한 내용은 Webview 문서를 참고하세요.

다음 예는 WebView에서 콘솔 API를 사용하는 방법을 보여줍니다.

Kotlin

val myWebView: WebView = findViewById(R.id.webview)
myWebView.webChromeClient = object : WebChromeClient() {

    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        Log.d("MyApplication", "${message.message()} -- From line " +
              "${message.lineNumber()} of ${message.sourceId()}")
        return true
    }
}

자바

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        return true;
    }
});

ConsoleMessage에는 전달되는 콘솔 메시지의 유형을 나타내는 MessageLevel 객체도 포함되어 있습니다. messageLevel()로 메시지 수준을 쿼리하여 메시지 심각도를 확인한 다음 적절한 Log 메서드를 사용하거나 다른 적절한 조치를 취할 수 있습니다.

웹페이지에서 콘솔 메서드를 실행할 경우 onConsoleMessage(String, int, String) 또는 onConsoleMessage(ConsoleMessage) 사용 여부에 관계없이 Android에서는 onConsoleMessage() 메서드를 호출하기 때문에 개발자는 오류를 보고할 수 있습니다. 예를 들어 위의 예시 코드에서는 다음과 같은 Logcat 메시지가 출력됩니다.

Hello World -- From line 82 of http://www.example.com/hello.html

다음은 디버깅과 관련된 추가 리소스입니다.

실험용 웹 기능 테스트

Google Chrome의 chrome://flags 페이지와 마찬가지로 WebView에서도 실험용 웹 기능을 테스트할 수 있습니다.

이렇게 하려면 다음 단계를 따르세요.

  1. WebView 출시 전 채널(베타, 개발자 또는 카나리아) 중 하나를 설치합니다{: .external}.

  2. 테스트 기기에서 WebView 채널을 설치된 출시 전 채널로 전환합니다.

  3. WebView DevTools 런처를 클릭합니다.


    그림 1. 기기에 설치된 앱의 WebView DevTools 아이콘

  4. DevTools에서 Flags를 클릭하고 사용 설정하거나 중지할 실험 기능을 검색합니다. 변경사항은 기기의 모든 WebView 인스턴스에 적용됩니다.

  5. 앱을 중지했다가 다시 시작하여 새 기능으로 테스트를 시작합니다.

플래그 전환에 관한 자세한 내용은 WebView DevTools 문서를 참고하세요.