Melakukan debug perangkat Android dari jarak jauh

Kayce Basques

Sofia Emelianova

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

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

Langkah 1: Temukan perangkat Android Anda

Alur kerja di bawah 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 komputer pengembangan, 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 muncul 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, 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.
• 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 Anda disiapkan dengan benar:

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

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

• Memutuskan sambungan, 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 tampilan untuk perangkat Android dan mesin pengembangan Anda sehingga tidak pernah tertidur.
• Menetapkan 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 status baru.

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

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 berjalan di perangkat, dengan nomor versi dalam tanda kurung.

   

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

   

   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.

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 pada instance DevTools, lalu arahkan kursor ke elemen untuk menandainya di tampilan perangkat Android Anda.

Anda juga dapat mengetuk elemen di layar perangkat Android untuk memilihnya di panel Elemen. Klik Select Element 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 komputer pengembangan

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

Anda dapat berinteraksi dengan rekaman layar dengan beberapa cara:

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

Beberapa catatan tentang rekaman layar:

• Screencast hanya menampilkan konten halaman. Bagian transparan dari screencast mewakili 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 akan hilang. Buka kunci layar perangkat Android Anda untuk melanjutkan transmisi layar 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:

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

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

• Dokumentasi adb

• Secara opsional, Anda dapat membaca panduan lama:

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