웹 앱 디버깅

Android 4.4 이상을 실행하는 기기에서 웹 앱을 테스트하는 경우 이전 버전의 Android를 계속 지원하면서 Chrome 개발자 도구로 WebView에서 웹페이지를 원격으로 디버깅할 수 있습니다. 자세한 내용은 Android에서의 원격 디버깅을 참조하세요.

Android 4.4 이상을 실행하는 기기가 없는 경우 console 자바스크립트 API를 사용하여 자바스크립트를 디버깅하고 logcat의 출력 메시지를 볼 수 있습니다. Firebug 또는 Web Inspector를 사용하여 웹페이지를 디버깅하는 데 익숙하다면 console(예: console.log())을 사용하여 디버깅하는 데에도 익숙할 것입니다. Android의 WebKit 프레임워크는 대부분의 동일한 API를 지원하므로 Android 브라우저 또는 고유한 WebView에서 디버깅할 때 웹페이지에서 로그를 수신할 수 있습니다. 이 문서는 콘솔 API를 사용하여 디버깅하는 방법을 설명합니다.

다음 관련 리소스를 참조하세요.

Android 브라우저에서 콘솔 API 사용

DOM의 window.console 객체에서 console 함수를 호출하면 출력이 logcat에 표시됩니다. 예를 들어 웹페이지에서 다음 자바스크립트를 실행하는 경우

    console.log("Hello World");

logcat 메시지는 다음과 유사합니다.

    Console: Hello World http://www.example.com/hello.html :82

메시지 포맷은 사용 중인 Android 버전에 따라 다르게 표시될 수 있습니다. Android 2.1 이상에서는 Android 브라우저의 콘솔 메시지에 'browser'라는 이름이 붙습니다. Android 1.6 이하에서는 Android 브라우저 메시지에 'WebCore'라는 이름이 붙습니다.

Android의 WebKit은 다른 데스크톱 브라우저에서 사용할 수 있는 모든 콘솔 API를 구현하지는 않습니다. 그러나 다음과 같은 기본 텍스트 로깅 함수를 사용할 수 있습니다.

console.log(String)
console.info(String)
console.warn(String)
console.error(String)

다른 콘솔 함수는 오류를 발생시키지 않지만 다른 웹 브라우저에서 예상한 것과 동일하게 작동하지 않을 수 있습니다.

WebView에서 콘솔 API 사용

위에 표시된 모든 콘솔 API는 WebView에서 디버깅할 때도 지원됩니다. Android 2.1(API 레벨 7) 이상을 타겟팅하는 경우 콘솔 메시지를 logcat에 표시하려면 onConsoleMessage() 메서드를 구현하는 WebChromeClient를 제공해야 합니다. 그런 다음 setWebChromeClient()를 사용하여 WebChromeClient를 WebView에 적용합니다.

예를 들어 API 레벨 7을 지원하기 위해 onConsoleMessage(String, int, String) 코드는 다음과 같을 수 있습니다.

Kotlin

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

        override fun onConsoleMessage(message: String, lineNumber: Int, sourceID: String) {
            Log.d("MyApplication", "$message -- From line $lineNumber of $sourceID")
        }
    }

자바

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.setWebChromeClient(new WebChromeClient() {
      public void onConsoleMessage(String message, int lineNumber, String sourceID) {
        Log.d("MyApplication", message + " -- From line "
                             + lineNumber + " of "
                             + sourceID);
      }
    });

하지만 지원되는 최저 버전이 API 레벨 8 이상인 경우에는 onConsoleMessage(ConsoleMessage)를 대신 구현해야 합니다. 예:

Kotlin

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

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

자바

    WebView myWebView = (WebView) findViewById(R.id.webview);
    myWebView.setWebChromeClient(new WebChromeClient() {
      public boolean onConsoleMessage(ConsoleMessage cm) {
        Log.d("MyApplication", cm.message() + " -- From line "
                             + cm.lineNumber() + " of "
                             + cm.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

Logcat

Logcat은 시스템 메시지의 로그를 덤프하는 도구입니다. 시스템 메시지에는 기기에서 오류가 발생할 때 생겨나는 스택 추적을 비롯하여 애플리케이션에서 작성되는 로그 메시지와 자바스크립트 console API를 사용하여 작성되는 로그 메시지 등이 포함됩니다.

logcat을 실행하고 Android 스튜디오에서 메시지를 보려면 보기 > 도구 창 > Logcat을 선택합니다.

자세한 내용은 Logcat을 이용한 로그 작성 및 보기를 참조하세요.