Melakukan debug perangkat Android dari jarak jauh

Kayce Basques
Sofia Emelianova
Sofia Emelianova
GitHub

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

  • Menyiapkan perangkat Android untuk proses debug jarak jauh, dan menemukannya 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 sesuai 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 telah 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 autentikasi tertunda.

    Perangkat offline menunggu autentikasi.

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

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

    Perangkat yang berhasil terhubung yang ditetapkan 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 berfungsi. Anda seharusnya dapat memeriksa file di perangkat Android dari mesin pengembangan.

Pastikan software Anda disiapkan dengan benar:

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

  • Cabut lalu hubungkan kembali kabel USB saat DevTools berfokus pada mesin pengembangan dan layar utama Android Anda akan muncul. Dengan kata lain, terkadang perintah tidak muncul saat layar Android atau mesin pengembangan terkunci.
  • Perbarui setelan tampilan untuk perangkat Android dan mesin pengembangan agar tidak pernah 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 atas pertanyaan Stack Overflow tersebut, atau buka masalah di repositori developer.chrome.com.

Langkah 2: Men-debug konten di perangkat Android dari mesin pengembangan

  1. Buka Chrome di perangkat Android Anda.

  2. Di chrome://inspect/#devices pada mesin pengembangan, Anda 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 dijalankan di perangkat.

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

    Tab jarak jauh tercantum di suatu 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 berjalan di perangkat Android menentukan versi DevTools yang dibuka di mesin pengembangan Anda. Jadi, jika perangkat Android Anda menjalankan Chrome versi 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 Anda, lalu arahkan kursor ke elemen untuk menandainya di area tampilan 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 tersebut 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 Beralih 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 memicu peristiwa sentuh yang tepat di perangkat.
  • Penekanan tombol di komputer Anda akan dikirim ke perangkat.
  • Untuk menyimulasikan gestur cubit, tahan Shift saat menarik.
  • Untuk men-scroll, gunakan trackpad atau roda mouse, atau ayunkan dengan kursor mouse.

Beberapa catatan tentang screencast:

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

Debug secara manual melalui Android Debug Bridge (adb)

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