Men-debug menggunakan Log konsol JavaScript

Dokumen ini menjelaskan berbagai metode untuk melihat log konsol JavaScript guna men-debug konten dalam WebView.

Mengakses konsol JavaScript memungkinkan Anda melihat error, peringatan, dan pesan kustom dari pernyataan console.log() JavaScript untuk mendiagnosis apa yang terjadi di dalam WebView. Ada tiga cara berbeda untuk melihat pesan konsol JavaScript yang dihasilkan oleh WebView Anda:

  • Chrome DevTools: Hubungkan WebView Anda ke Chrome DevTools. Buka tab Console untuk melihat pesan konsol JavaScript WebView Anda.

  • Aplikasi WebView DevTools: Gunakan aplikasi WebView DevTools untuk mengaktifkan tanda webview-log-js-console-messages di perangkat Anda untuk melihat log konsol di Logcat.

  • Penyadapan pesan: Sadap pesan konsol JavaScript dengan menerapkan onConsoleMessage() di WebChromeClient Anda. Pendekatan ini dijelaskan secara mendetail di bagian berikut.

Jika Anda menayangkan konten dari server web lokal di mesin pengembangan, lihat Mengakses server pengembangan lokal dari WebView untuk mempelajari cara terhubung ke server tersebut dari perangkat atau emulator.

Menyadap pesan dengan onConsoleMessage()

API konsol didukung saat men-debug WebView. Anda harus memberikan WebChromeClient yang menerapkan metode onConsoleMessage() agar pesan konsol muncul di Logcat. Kemudian, terapkan WebChromeClient ke WebView dengan setWebChromeClient().

WebChromeClient adalah class helper untuk WebView. Objek ini menangani peristiwa terkait UI yang terjadi dalam konten web seperti, menampilkan pemberitahuan JavaScript, mengubah judul halaman web, dan menangani pesan yang dikirim ke konsol browser.

Kode berikut mengonfigurasi WebChromeClient untuk mencegat output konsol JavaScript dan mengalihkannya ke Logcat agar proses debug lebih mudah.

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

Dengan menggunakan onConsoleMessage(), logika logging kustom Anda akan menjadi pengendali utama untuk error JavaScript, menggantikan perilaku default flag webview-log-js-console-messages, dan memungkinkan Anda memformat log sesuai keinginan.

ConsoleMessage juga menyertakan objek MessageLevel untuk menunjukkan jenis pesan konsol yang sedang dikirim. Anda dapat membuat kueri level pesan dengan messageLevel() untuk menentukan tingkat keparahan pesan, lalu menggunakan metode Log yang sesuai atau mengambil tindakan lain yang sesuai.

Saat Anda menjalankan metode konsol di halaman web, Android memanggil metode onConsoleMessage(ConsoleMessage) sehingga Anda dapat melaporkan error. Misalnya, dengan kode contoh, pesan Logcat dicetak seperti berikut:

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