Melakukan debug menggunakan Chrome DevTools

Anda dapat menggunakan DevTools yang terintegrasi ke dalam browser Chrome yang berjalan di mesin pengembangan Anda untuk memeriksa dan men-debug WebView yang berjalan di aplikasi Anda dari jarak jauh. Untuk panduan mendetail tentang proses debug jarak jauh untuk WebView, lihat Proses debug jarak jauh WebView.

Untuk mempelajari DevTools lebih lanjut, lihat Ringkasan Chrome DevTools.

Mengaktifkan koneksi dari Chrome DevTools

WebView aplikasi Anda tidak akan mengaktifkan koneksi dari Chrome DevTools secara default. Anda harus mengaktifkan proses debug WebView dalam kode aplikasi Anda.

  1. Pastikan Anda telah menyiapkan aplikasi untuk dijalankan di perangkat hardware atau virtual device.
  2. Aktifkan proses debug WebView dalam kode aplikasi Anda dengan memanggil setWebContentsDebuggingEnabled. Tindakan ini biasanya dilakukan di class Activity atau Application tempat WebView diinisialisasi.

Sebaiknya gabungkan setWebContentsDebuggingEnabled dalam pemeriksaan bersyarat sehingga proses debug hanya diaktifkan dalam build pengembangan, bukan dalam produksi. Setelan ini berlaku untuk semua WebView di aplikasi Anda.

Proses debug WebView tidak terpengaruh oleh status flag debuggable dalam manifes aplikasi. Jika Anda hanya ingin mengaktifkan proses debug WebView saat flag debuggable ditetapkan ke true, uji flag ini saat runtime seperti yang ditunjukkan dalam contoh berikut:

Kotlin

if (applicationInfo.flags and ApplicationInfo.FLAG_DEBUGGABLE != 0) {
     WebView.setWebContentsDebuggingEnabled(true)
}

Java

if (0 != (getApplicationInfo().flags & ApplicationInfo.FLAG_DEBUGGABLE)) {
     WebView.setWebContentsDebuggingEnabled(true);
}

Mulai men-debug WebView

Setelah Anda mengaktifkan proses debug WebView dalam kode aplikasi dan aplikasi Anda berjalan di perangkat fisik atau Android Emulator, hubungkan Chrome DevTools ke WebView Anda:

  1. Buka Chrome di mesin pengembangan Anda.
  2. Buka chrome://inspect.

  3. Di halaman chrome://inspect, pastikan Discover USB devices dicentang. Temukan perangkat Anda di bagian Remote Target.

    Halaman pemeriksaan Chrome DevTools yang menampilkan target jarak jauh yang tersedia untuk proses debug
    Gambar 1. Halaman pemeriksaan Chrome DevTools yang menampilkan target jarak jauh yang tersedia untuk proses debug.

  4. Di bagian nama perangkat Anda, Chrome akan mencantumkan semua WebView yang diaktifkan untuk proses debug dan berjalan di perangkat tersebut, yang biasanya diidentifikasi oleh WebView in diikuti dengan nama paket aplikasi. Temukan WebView yang ingin Anda debug, lalu klik link inspect.

Anda akan melihat instance DevTools baru yang terbuka dan dapat digunakan untuk memeriksa WebView Anda.

Jika Anda menayangkan konten dari server web lokal di mesin pengembangan, lihat Mengakses server pengembangan lokal dari WebView untuk mempelajari cara menghubungkan ke sana dari perangkat atau emulator Anda. Untuk pemecahan masalah, lihat Proses debug jarak jauh perangkat Android dan Proses debug jarak jauh WebView.