JavaScript konsol günlüklerini kullanarak hata ayıklama

Bu belgede, WebView'daki içerikte hata ayıklamak için JavaScript konsol günlüklerini görüntülemeye yönelik farklı yöntemler açıklanmaktadır.

JavaScript konsoluna erişerek, WebView'da neler olduğunu teşhis etmek için JavaScript console.log() ifadelerinizdeki hataları, uyarıları ve özel mesajları görüntüleyebilirsiniz. WebView'niz tarafından oluşturulan JavaScript konsolu mesajlarını görüntülemenin üç farklı yolu vardır:

  • Chrome Geliştirici Araçları: WebView'nizi Chrome Geliştirici Araçları'na bağlayın. WebView JavaScript konsolu mesajlarınızı görmek için Konsol sekmesini açın.

  • WebView Geliştirici Araçları uygulaması: Cihazınızda webview-log-js-console-messages işaretini etkinleştirmek için WebView Geliştirici Araçları uygulamasını kullanarak Logcat'te konsol günlüklerini görüntüleyin.

  • Mesaj yakalama: onConsoleMessage() öğesini WebChromeClient içinde uygulayarak JavaScript konsolu mesajlarını yakalayın. Bu yaklaşım, aşağıdaki bölümde ayrıntılı olarak açıklanmıştır.

Geliştirme makinenizdeki yerel bir web sunucusundan içerik sunuyorsanız bir cihazdan veya emülatörden nasıl bağlanacağınızı öğrenmek için WebView'dan yerel bir geliştirme sunucusuna erişme başlıklı makaleyi inceleyin.

onConsoleMessage() iletilerini yakalama

Konsol API'leri, WebView hata ayıklanırken desteklenir. Konsol mesajlarının Logcat'te görünmesi için onConsoleMessage() yöntemini uygulayan bir WebChromeClient sağlamanız gerekir. Ardından, setWebChromeClient() ile WebChromeClient aracını WebView cihazınıza uygulayın.

WebChromeClient, WebView için yardımcı sınıftır. Web içeriğinde gerçekleşen kullanıcı arayüzüyle ilgili etkinlikleri (ör. JavaScript uyarılarını gösterme, web sayfasının başlığını değiştirme ve tarayıcının konsoluna gönderilen mesajları işleme) yönetir.

Aşağıdaki kod, JavaScript konsolu çıkışlarını yakalamak ve daha kolay hata ayıklama için bunları Logcat'e yönlendirmek üzere bir WebChromeClient yapılandırır.

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
    }
}

Java

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() kullanarak özel günlük kaydı mantığınız, JavaScript hataları için birincil işleyici haline gelir. Bu işleyici, webview-log-js-console-messages işaretinin varsayılan davranışının yerini alır ve günlükleri istediğiniz şekilde biçimlendirmenizi sağlar.

ConsoleMessage, gönderilen konsol mesajının türünü belirtmek için MessageLevel nesnesini de içerir. İletinin önem derecesini belirlemek için ileti düzeyini messageLevel() ile sorgulayabilir, ardından uygun Log yöntemini kullanabilir veya diğer uygun işlemleri yapabilirsiniz.

Web sayfanızda bir konsol yöntemi yürüttüğünüzde Android, hatayı bildirebilmeniz için onConsoleMessage(ConsoleMessage) yöntemini çağırır. Örneğin, örnek kodla aşağıdaki gibi bir Logcat mesajı yazdırılır:

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