Melakukan debug perangkat Android dari jarak jauh

Kayce Basques

Sofia Emelianova

Men-debug konten aktif dari jarak jauh di perangkat Android dari komputer Windows, Mac, atau Linux Anda. Tutorial ini mengajarkan cara:

• Siapkan perangkat Android Anda untuk proses debug jarak jauh, dan temukan perangkat dari mesin pengembangan Anda.
• Periksa dan debug konten live di perangkat Android dari komputer pengembangan Anda.
• Mentransmisikan konten dari perangkat Android ke instance DevTools di mesin pengembangan Anda.

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 Anda. Lihat Mengonfigurasi Opsi developer di perangkat.
2. Pilih Aktifkan Proses Debug USB.
3. Di mesin pengembangan Anda, buka Chrome.
4. Buka chrome://inspect#devices.

5. Pastikan Temukan perangkat USB diaktifkan.

   

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

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

   

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

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

   

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 Anda langsung ke mesin pengembangan, bukan ke hub USB.
• Coba cabut kabel USB antara perangkat Android dan mesin pengembangan, lalu colokkan kembali. Lakukan saat layar Android dan mesin pengembangan Anda tidak terkunci.
• Pastikan kabel USB Anda berfungsi. Anda dapat memeriksa file di perangkat Android dari mesin pengembangan Anda.

Pastikan software Anda disiapkan dengan benar:

• Jika mesin pengembangan Anda menjalankan Windows, coba instal driver USB untuk perangkat Android Anda secara manual. Lihat Menginstal Driver USB OEM.
• Beberapa kombinasi perangkat Windows dan Android (terutama Samsung) memerlukan penyiapan tambahan. Lihat Chrome DevTools Devices tidak mendeteksi perangkat saat dicolokkan.

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

• Mencabut lalu menghubungkan kembali kabel USB saat DevTools menjadi fokus di mesin pengembangan dan layar utama Android Anda ditampilkan. Dengan kata lain, terkadang perintah tidak muncul saat layar Android atau mesin pengembangan Anda terkunci.
• Memperbarui setelan layar untuk perangkat Android dan mesin pengembangan agar tidak pernah beralih ke 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 Anda untuk meresetnya ke kondisi awal.

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

Langkah 2: Lakukan proses debug konten di perangkat Android dari mesin pengembangan Anda

1. Buka Chrome di perangkat Android Anda.

2. Di chrome://inspect/#devices di 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.

   

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

   

   Setiap tab Chrome jarak jauh memiliki 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.

Versi Chrome yang berjalan di perangkat Android Anda menentukan versi DevTools yang terbuka di mesin pengembangan Anda. Jadi, jika perangkat Android Anda menjalankan Chrome versi yang 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.

Memeriksa elemen

Buka panel Elements di instance DevTools Anda, lalu arahkan kursor ke elemen untuk menandainya di area tampilan perangkat Android Anda.

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

Melakukan screencast layar Android ke mesin pengembangan

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

Anda dapat berinteraksi dengan screencast dalam beberapa cara:

• Klik diterjemahkan menjadi ketukan, yang memicu peristiwa sentuh yang tepat di perangkat.
• Penekanan tombol di komputer Anda akan dikirim ke perangkat.
• Untuk menyimulasikan gestur mencubit, tahan Shift sambil menarik.
• Untuk men-scroll, gunakan trackpad atau roda mouse, atau gerakkan kursor mouse.

Beberapa catatan tentang rekaman layar:

• Screencast hanya menampilkan konten halaman. Bagian transparan dari rekaman layar menampilkan antarmuka perangkat, seperti kolom URL Chrome, status bar Android, atau keyboard Android.
• Screencast berdampak negatif pada kecepatan frame. Nonaktifkan perekaman layar saat mengukur scroll atau animasi untuk mendapatkan gambaran yang lebih akurat tentang performa halaman Anda.
• Jika layar perangkat Android Anda terkunci, konten screencast Anda akan hilang. Buka kunci layar perangkat Android Anda untuk melanjutkan screencast secara otomatis.

Melakukan debug secara manual melalui Android Debug Bridge (adb)

Dalam beberapa kasus yang jarang terjadi, metode alternatif untuk proses debug jarak jauh mungkin berguna. Misalnya, Anda mungkin ingin terhubung langsung ke Chrome DevTools Protocol (CDP) Chrome Anda 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:

   • Kabel USB (sederhana).
   • Atau, koneksi Wi-Fi adb.

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 bahwa:

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

Untuk pemecahan masalah, lihat:

• Dokumentasi adb

• Secara opsional, Anda dapat membaca panduan lama:

  • remote-debugging-legacy
  • remote-debugging
  • girish.in/…how