웹 앱 디버그

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

WebView에서 콘솔 API 사용

WebView에서 디버깅할 때도 콘솔 API가 지원됩니다. 콘솔 메시지가 Logcat에 표시되도록 하려면 onConsoleMessage() 메서드를 구현하는 WebChromeClient를 제공해야 합니다. 그런 다음 setWebChromeClient()를 사용하여 WebViewWebChromeClient를 적용합니다. 자세한 내용은 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
    }
}

Java

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

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

실험용 웹 기능 테스트

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

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

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

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

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


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

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

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

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