Men-debug aplikasi web

Anda dapat men-debug JavaScript menggunakan console JavaScript API dan melihat pesan output di Logcat. Jika sudah terbiasa men-debug halaman web dengan Firebug atau Web Inspector, Anda mungkin sudah terbiasa menggunakan console (seperti console.log()). Framework WebKit Android mendukung sebagian besar API yang sama, sehingga Anda dapat menerima log dari halaman web saat menjalankan proses debug di WebView. Topik ini menjelaskan cara menggunakan API konsol untuk proses debug.

Menggunakan API konsol di WebView

API konsol juga didukung saat proses debug di WebView. Anda harus menyediakan WebChromeClient yang mengimplementasikan metode onConsoleMessage() agar pesan konsol muncul di Logcat. Kemudian, terapkan WebChromeClient ke WebView dengan setWebChromeClient(). Untuk informasi selengkapnya, lihat dokumentasi Webview.

Contoh berikut menunjukkan cara menggunakan API konsol di WebView:

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 juga menyertakan objek MessageLevel untuk menunjukkan jenis pesan konsol yang dikirim. Anda dapat mengkueri tingkat pesan dengan messageLevel() untuk menentukan tingkat keparahan pesan, lalu menggunakan metode Log yang sesuai atau melakukan tindakan lain yang sesuai.

Baik Anda menggunakan onConsoleMessage(String, int, String) atau onConsoleMessage(ConsoleMessage), saat Anda menjalankan metode konsol di halaman web, Android memanggil metode onConsoleMessage() yang sesuai sehingga Anda dapat melaporkan error. Misalnya, dengan kode contoh di atas, pesan Logcat akan dicetak seperti ini:

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

Berikut adalah referensi tambahan yang terkait dengan proses debug:

Menguji fitur web eksperimental

Serupa dengan halaman chrome://flags Google Chrome, Anda juga dapat menguji fitur web eksperimental di WebView.

Untuk melakukannya, lakukan langkah-langkah berikut:

  1. Instal salah satu saluran pra-rilis WebView (beta, dev, atau canary){: .external}.

  2. Alihkan saluran WebView di perangkat pengujian ke saluran pra-rilis yang diinstal.

  3. Klik peluncur WebView DevTools:


    Gambar 1. Ikon WebView DevTools untuk aplikasi yang diinstal di perangkat.

  4. Dari DevTools, klik Flags dan telusuri fitur eksperimental yang ingin Anda aktifkan atau nonaktifkan. Perubahan ini berlaku untuk semua instance WebView di perangkat.

  5. Hentikan dan mulai ulang aplikasi Anda untuk memulai pengujian dengan fitur baru.

Untuk mengetahui informasi selengkapnya tentang cara mengalihkan flag, lihat dokumentasi WebView DevTools.