Melakukan debug menggunakan Chrome DevTools

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

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 pen-debug-an WebView dalam kode aplikasi Anda dengan memanggil setWebContentsDebuggingEnabled. Hal ini biasanya dilakukan di class Activity atau Application tempat WebView diinisialisasi.

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

Pen-debug-an WebView tidak terpengaruh oleh status tanda debuggable dalam manifes aplikasi. Jika Anda ingin mengaktifkan proses debug WebView hanya saat flag debuggable disetel 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 Temukan perangkat USB 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 inspeksi Chrome DevTools yang menampilkan target jarak jauh yang tersedia untuk proses debug.

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

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

Jika Anda menyajikan konten dari server web lokal di mesin pengembangan, lihat Mengakses server pengembangan lokal dari WebView untuk mempelajari cara menghubungkannya dari perangkat atau emulator Anda. Untuk pemecahan masalah, lihat Men-debug jarak jauh perangkat Android dan Men-debug jarak jauh WebView.