Melakukan debug perangkat Android dari jarak jauh

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

Melakukan debug konten langsung dari jauh di perangkat Android dari komputer Windows, Mac, atau Linux. Tutorial ini mengajarkan cara:

  • Siapkan perangkat Android untuk proses debug dari jarak jauh, dan temukan dari mesin pengembangan Anda.
  • Periksa dan debug konten langsung di perangkat Android dari mesin pengembangan Anda.
  • Melakukan screencast konten dari perangkat Android ke instance DevTools di mesin pengembangan.

Diagram proses debug jarak jauh

Langkah 1: Temukan perangkat Android

Alur kerja di bawah ini berfungsi untuk sebagian besar pengguna. Lihat Pemecahan masalah: DevTools tidak mendeteksi perangkat Android untuk mendapatkan bantuan lebih lanjut.

  1. Buka layar Opsi Developer di Android. Lihat Mengonfigurasi Opsi developer di perangkat.
  2. Pilih Aktifkan Proses Debug USB.
  3. Di mesin pengembangan, buka Chrome.
  4. Buka chrome://inspect#devices.

  5. Pastikan Kotak centang. Temukan perangkat USB diaktifkan.

    Kotak centang Temukan Perangkat USB diaktifkan.

  6. Hubungkan perangkat Android secara langsung ke mesin pengembangan menggunakan kabel USB.

  7. Jika Anda menghubungkan perangkat untuk pertama kalinya, perangkat akan muncul sebagai "Offline" dan menunggu autentikasi.

    Autentikasi perangkat offline tertunda.

    Dalam hal ini, terima perintah sesi proses debug di layar perangkat Anda.

  8. Jika Anda melihat nama model perangkat Android, DevTools telah berhasil membuat koneksi ke perangkat Anda.

    Perangkat yang berhasil terhubung dan diberi nama model.

  9. Lanjutkan ke Langkah 2.

Pemecahan masalah: DevTools tidak mendeteksi perangkat Android

Pastikan hardware disiapkan dengan benar:

  • Jika Anda menggunakan hub USB, coba hubungkan perangkat Android secara langsung ke mesin pengembangan.
  • Coba cabut kabel USB antara perangkat Android dan mesin pengembangan, lalu colokkan kembali. Lakukan saat layar Android dan mesin pengembangan terbuka kuncinya.
  • Pastikan kabel USB berfungsi. Anda seharusnya dapat memeriksa file di perangkat Android dari mesin pengembangan.

Pastikan software disiapkan dengan benar:

Jika Anda tidak melihat perintah Izinkan Proses Debug USB di perangkat Android, coba:

  • Memutuskan sambungan, lalu menghubungkan kembali kabel USB saat DevTools difokuskan di mesin pengembangan dan layar utama Android muncul. Dengan kata lain, terkadang perintah tidak muncul saat layar Android atau mesin pengembangan terkunci.
  • Memperbarui setelan layar untuk perangkat Android dan mesin pengembangan agar tidak pernah nonaktif.
  • Setel mode USB Android ke PTP. Lihat Galaxy S4 tidak menampilkan kotak dialog Izinkan proses debug USB.
  • Pilih Cabut Otorisasi Proses Debug USB dari layar Opsi Developer di perangkat Android untuk meresetnya ke keadaan baru.

Jika Anda menemukan solusi yang tidak disebutkan di bagian ini atau di Perangkat Chrome DevTools tidak mendeteksi perangkat saat dicolok, tambahkan jawaban ke pertanyaan Stack Overflow tersebut, atau buka masalah di repositori developer.chrome.com.

Langkah 2: Debug konten di perangkat Android dari mesin pengembangan

  1. Buka Chrome di perangkat Android.

  2. Di chrome://inspect/#devices pada komputer pengembangan, Anda akan melihat nama model perangkat Android, diikuti dengan nomor serinya. Di bawahnya, Anda dapat melihat versi Chrome yang dijalankan di perangkat, dengan nomor versi dalam tanda kurung.

    Versi Chrome yang berjalan di perangkat.

  3. Di kotak teks Buka tab dengan URL, masukkan URL, lalu klik Buka. Halaman akan terbuka di tab baru di perangkat Android Anda.

    Tab jarak jauh yang tercantum di bagian.

    Setiap tab Chrome jarak jauh akan mendapatkan bagiannya sendiri di chrome://inspect/#devices. Anda dapat berinteraksi dengan tab tersebut dari bagian ini. Jika ada aplikasi yang menggunakan WebView, Anda juga akan melihat bagian untuk setiap aplikasi tersebut. Dalam contoh ini, hanya ada satu tab yang terbuka.

  4. Klik Periksa di samping URL yang baru saja Anda buka. Instance DevTools baru akan terbuka.

Instance DevTools baru untuk tab jarak jauh.

Versi Chrome yang berjalan di perangkat Android Anda menentukan versi DevTools yang dibuka di mesin pengembangan Anda. Jadi, jika perangkat Android Anda menjalankan versi Chrome yang sudah sangat lama, instance DevTools mungkin terlihat sangat berbeda dari yang biasa Anda gunakan.

Tindakan lainnya: menjeda, memfokuskan, memuat ulang, atau menutup tab

Di bawah URL, Anda dapat menemukan menu untuk menjeda, memfokuskan, memuat ulang, atau menutup tab.

Menu untuk menjeda, memuat ulang, memfokuskan, atau menutup tab.

Memeriksa elemen

Buka panel Elemen di instance DevTools, lalu arahkan kursor ke elemen untuk menandainya di tampilan yang terlihat pada perangkat Android.

Anda juga dapat mengetuk elemen di layar perangkat Android untuk memilihnya di panel Elemen. Klik Select Element Pilih Elemen di instance DevTools, lalu ketuk elemen di layar perangkat Android Anda. Perhatikan bahwa Pilih Elemen dinonaktifkan setelah sentuhan pertama, jadi Anda perlu mengaktifkannya kembali setiap kali ingin menggunakan fitur ini.

Melakukan screencast layar Android ke mesin pengembangan

Klik Toggle Screencast Tombol Screencast untuk melihat konten perangkat Android di instance DevTools.

Anda dapat berinteraksi dengan screencast dalam beberapa cara:

  • Klik diterjemahkan menjadi ketukan, yang akan memicu peristiwa sentuh yang sesuai di perangkat.
  • Penekanan tombol di komputer Anda akan dikirim ke perangkat.
  • Untuk menyimulasikan gestur mencubit, tahan Shift saat menarik.
  • Untuk men-scroll, gunakan trackpad atau roda mouse, atau gerakan membuang dengan pointer mouse.

Beberapa catatan tentang screencast:

  • Screencast hanya menampilkan konten halaman. Bagian transparan siaran layar menampilkan antarmuka perangkat, seperti kolom URL Chrome, status bar Android, atau keyboard Android.
  • Screencast secara negatif memengaruhi kecepatan bingkai. Nonaktifkan screencast saat mengukur scroll atau animasi untuk mendapatkan gambaran performa halaman yang lebih akurat.
  • Jika layar perangkat Android terkunci, konten screencast Anda akan menghilang. Buka kunci layar perangkat Android untuk melanjutkan screencast secara otomatis.

Men-debug secara manual melalui Android Debug Bridge (adb)

Dalam beberapa kasus yang jarang terjadi, metode alternatif proses debug jarak jauh mungkin berguna. Misalnya, Anda mungkin ingin terhubung langsung ke Chrome DevTools Protocol (CDP) Chrome di Android.

Untuk melakukannya, Anda dapat menggunakan Android Debug Bridge (adb):

  1. Pastikan untuk mengaktifkan Opsi developer dan Proses debug USB di perangkat Android Anda.
  2. Buka Chrome di Perangkat Android Anda.

  3. Hubungkan perangkat Android ke mesin pengembangan Anda melalui:

  4. Di command line mesin pengembangan, jalankan adb devices -l dan periksa apakah perangkat Anda ada dalam daftar.

  5. Teruskan soket CDP di perangkat ke port lokal komputer Anda, misalnya, 9222. Untuk melakukannya, jalankan:

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. Setelah berhasil terhubung, pastikan:

    • http://localhost:9222/json mencantumkan target page Anda.
    • http://localhost:9222/json/version mengekspos endpoint target browser, seperti yang ditunjukkan oleh dokumentasi CDP.
    • chrome://inspect/#devices diisi, meskipun setelan Temukan perangkat USB tidak dicentang.

Untuk pemecahan masalah, lihat: