Proses Debug Aplikasi Web

Jika Anda menguji aplikasi web dengan perangkat yang menjalankan Android 4.4 atau yang lebih tinggi, Anda dapat melakukan debug pada halaman web dari jarak jauh dalam WebView dengan Developer Tools Chrome, selagi melanjutkan dukungan ke versi Android sebelumnya. Untuk informasi selengkapnya, lihat Proses Debug Jarak Jauh di Android.

Jika Anda tidak memiliki perangkat yang menjalankan Android 4.4 atau yang lebih tinggi, Anda dapat men-debug JavaScript menggunakan API console JavaScript dan melihat keluaran pesan ke logcat. Jika Anda memahami proses debug halaman web, baik dengan Firebug atau Web Inspector, maka Anda mungkin terbiasa menggunakan console (seperti console.log()). Framework Webkit Android mendukung sebagian besar API, sehingga Anda dapat menerima log dari halaman web saat proses debug di Browser Android atau di WebView Anda sendiri. Dokumen ini menjelaskan cara menggunakan konsol API untuk proses debug.

Lihat resource terkait berikut:

Menggunakan API Konsol di Browser Android

Saat Anda memanggil fungsi console (di objek window.console DOM), hasilnya akan muncul di logcat. Misalnya, jika halaman web Anda menjalankan JavaScript berikut:

    console.log("Hello World");
    

Maka pesan logcat akan terlihat seperti ini:

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

Format pesan mungkin terlihat berbeda bergantung pada versi Android mana yang Anda gunakan. Pada Android 2.1 dan yang lebih tinggi, pesan konsol dari Browser Android akan diberi tag dengan nama "browser". Pada Android 1.6 dan yang lebih rendah, pesan Browser Android diberi tag dengan nama "WebCore".

WebKit Android tidak menerapkan semua API konsol yang tersedia di browser desktop lain. Namun, Anda dapat menggunakan fungsi logging teks dasar:

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

Fungsi konsol lainnya tidak menimbulkan error, tetapi mungkin tidak berperilaku sama seperti yang Anda inginkan dari browser web lain.

Menggunakan API Konsol di WebView

Semua API konsol yang ditampilkan di atas juga didukung saat menjalankan proses debug di WebView. Jika Anda menargetkan Android 2.1 (API level 7) dan yang lebih tinggi, Anda harus memberikan WebChromeClient yang menerapkan metode onConsoleMessage() agar pesan konsol dapat muncul di logcat. Lalu, terapkan WebChromeClient ke WebView dengan setWebChromeClient().

Misalnya, untuk mendukung API level 7, kode Anda untuk onConsoleMessage(String, int, String) mungkin terlihat seperti:

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

Java

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

Namun, jika versi terendah yang didukung adalah API level 8 atau yang lebih tinggi, sebaiknya Anda menerapkan onConsoleMessage(ConsoleMessage) sebagai gantinya. Contoh:

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

Java

    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 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 gunakan metode Log yang sesuai atau mengambil 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 dicetak seperti yang terlihat berikut:

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

Logcat

Logcat adalah alat yang mengeluarkan log pesan sistem. Pesan tersebut menyertakan pelacakan tumpukan saat perangkat menampilkan error, serta pesan yang tertulis dari aplikasi Anda dan yang tertulis dengan menggunakan API console JavaScript.

Untuk menjalankan logcat dan melihat pesan dari Android Studio, pilih View > Tool Windows > Logcat.

Untuk informasi selengkapnya, lihat Menulis dan Menampilkan Logs dengan Logcat.