Melakukan debug perangkat Android dari jarak jauh

Kayce Basques
Kayce Basques
Twitter GitHub Glitch
Sofia Emelianova
Sofia Emelianova
GitHub

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

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

Diagram proses debug jarak jauh

Langkah 1: Temukan perangkat Android Anda

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 langsung ke mesin pengembangan menggunakan kabel USB.

  7. Jika Anda menyambungkan perangkat untuk pertama kalinya, perangkat akan terlihat "Offline" dan menunggu autentikasi.

    Perangkat offline menunggu autentikasi.

    Dalam kasus ini, terima permintaan sesi proses debug di layar perangkat.

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

    Perangkat yang berhasil terhubung dan ditentukan dengan nama model.

  9. Lanjutkan ke Langkah 2.

Pemecahan masalah: DevTools tidak mendeteksi perangkat Android

Pastikan hardware Anda disiapkan dengan benar:

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

Pastikan software disiapkan dengan benar:

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

  • Cabut lalu hubungkan kembali kabel USB saat DevTools difokuskan di mesin pengembangan dan layar utama Android Anda ditampilkan. Dengan kata lain, terkadang perintah tidak muncul saat layar Android atau mesin pengembangan Anda terkunci.
  • Perbarui setelan tampilan untuk perangkat Android dan mesin pengembangan agar tidak pernah memasuki mode tidur.
  • Menyetel 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 status baru.

Jika Anda menemukan solusi yang tidak disebutkan di bagian ini atau di Perangkat Chrome DevTools tidak mendeteksi perangkat saat dicolokkan, tambahkan jawaban untuk 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 Anda.

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

    Versi Chrome yang berjalan di perangkat.

  3. Di kotak teks Open tab with url, masukkan URL, lalu klik Open. Halaman ini akan terbuka di tab baru di perangkat Android Anda.

    Tab jarak jauh yang tercantum dalam bagian.

    Setiap tab Chrome jarak jauh 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 dijalankan di perangkat Android 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: jeda, fokuskan, muat ulang, atau tutup 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, dan arahkan kursor ke elemen untuk menandainya di area pandang 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, sehingga Anda perlu mengaktifkannya kembali setiap kali ingin menggunakan fitur ini.

Melakukan screencast layar Android ke mesin pengembangan

Klik Toggle Screencast Aktifkan/Nonaktifkan Screencast untuk melihat konten perangkat Android Anda di instance DevTools.

Anda dapat berinteraksi dengan screencast dalam beberapa cara:

  • Klik diterjemahkan menjadi ketukan, yang akan mengaktifkan peristiwa sentuh yang sesuai di perangkat.
  • Tombol di komputer akan dikirim ke perangkat.
  • Untuk menyimulasikan gestur cubit, tahan tombol Shift sambil menarik.
  • Untuk men-scroll, gunakan trackpad atau roda mouse, atau gerakan menggeser dengan kursor mouse.

Beberapa catatan tentang screencast:

  • Screencast hanya menampilkan konten halaman. Bagian transparan screencast mewakili antarmuka perangkat, seperti kolom URL Chrome, status bar Android, atau keyboard Android.
  • Screencast secara negatif memengaruhi kecepatan frame. Nonaktifkan screencast saat mengukur scroll atau animasi untuk mendapatkan gambaran yang lebih akurat tentang performa halaman Anda.
  • Jika layar perangkat Android terkunci, konten screencast akan hilang. Buka kunci layar perangkat Android Anda 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 Anda mengaktifkan Opsi developer dan Proses debug USB di perangkat Android.
  2. Buka Chrome di Perangkat Android Anda.

  3. Hubungkan perangkat Android ke mesin pengembangan 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, misalnya, 9222. Untuk melakukannya, jalankan:

    adb forward tcp:9222 localabstract:chrome_devtools_remote

  6. Setelah berhasil terhubung, lihat bahwa:

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

Untuk pemecahan masalah, lihat: