JavaScript 콘솔 로그를 사용한 디버깅

이 문서에서는 JavaScript 콘솔 로그를 확인하여 WebView 내에서 콘텐츠를 디버그하는 다양한 방법을 설명합니다.

JavaScript 콘솔에 액세스하면 JavaScript console.log() 문에서 오류, 경고, 맞춤 메시지를 확인하여 WebView 내부에서 발생하는 상황을 진단할 수 있습니다. WebView에서 생성된 JavaScript 콘솔 메시지를 보는 방법은 세 가지입니다.

  • Chrome DevTools: WebView를 Chrome DevTools에 연결합니다. 콘솔 탭을 열어 WebView JavaScript 콘솔 메시지를 확인합니다.

  • WebView DevTools 앱: WebView DevTools 앱을 사용하여 기기에서 webview-log-js-console-messages 플래그를 사용 설정하여 Logcat에서 콘솔 로그를 확인합니다.

  • 메시지 가로채기: WebChromeClient에서 onConsoleMessage()를 구현하여 JavaScript 콘솔 메시지를 가로챕니다. 이 접근 방식은 다음 섹션에서 자세히 설명합니다.

개발 머신의 로컬 웹 서버에서 콘텐츠를 제공하는 경우 WebView에서 로컬 개발 서버에 액세스를 참고하여 기기나 에뮬레이터에서 연결하는 방법을 알아보세요.

onConsoleMessage()로 메시지 가로채기

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

WebChromeClient은 WebView의 도우미 클래스입니다. JavaScript 알림 표시, 웹페이지 제목 변경, 브라우저 콘솔로 전송된 메시지 처리 등 웹 콘텐츠에서 발생하는 UI 관련 이벤트를 처리합니다.

다음 코드는 JavaScript 콘솔 출력을 가로채서 더 쉽게 디버깅할 수 있도록 Logcat으로 리디렉션하도록 WebChromeClient를 구성합니다.

Kotlin

val myWebView: WebView = findViewById(R.id.my_webview)
myWebView.webChromeClient = object : WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    override fun onConsoleMessage(message: ConsoleMessage): Boolean {
        // Log JavaScript console messages to Logcat
        Log.d("WebViewConsole", "${message.message()} -- From line ${message.lineNumber()} of ${message.sourceId()}")
        // Return true to indicate that the message has been handled
        return true
    }
}

자바

WebView myWebView = findViewById(R.id.webview);
myWebView.setWebChromeClient(new WebChromeClient() {
    // Override onConsoleMessage to intercept JavaScript console messages
    @Override
    public boolean onConsoleMessage(ConsoleMessage consoleMessage) {
        // Log JavaScript console messages to Logcat
        Log.d("MyApplication", consoleMessage.message() + " -- From line " +
        consoleMessage.lineNumber() + " of " + consoleMessage.sourceId());
        // Return true to indicate that the message has been handled
        return true;
    }
});

onConsoleMessage()를 사용하면 맞춤 로깅 로직이 JavaScript 오류의 기본 핸들러가 되어 webview-log-js-console-messages 플래그의 기본 동작을 대체하고 원하는 방식으로 로그를 포맷할 수 있습니다.

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

웹페이지에서 콘솔 메서드를 실행할 경우 Android에서는 onConsoleMessage(ConsoleMessage) 메서드를 호출하기 때문에 개발자는 오류를 보고할 수 있습니다. 예를 들어 예제 코드에서는 다음과 같은 Logcat 메시지가 출력됩니다.

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