Memulai Proses Debug Jarak Jauh di Perangkat Android

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

  • Menyiapkan perangkat Android untuk debug dari jarak jauh, dan menemukannya dari mesin pengembangan.
  • Memeriksa dan melakukan debug konten langsung di perangkat Android dari mesin pengembangan.
  • Melakukan screencast konten dari perangkat Android ke instance DevTools di mesin pengembangan.
Dengan Proses Debug dari Jarak Jauh, Anda dapat memeriksa halaman yang beroperasi di perangkat Android dari
            mesin pengembangan.
Gambar 1. Dengan Proses Debug dari Jarak Jauh, Anda dapat memeriksa halaman yang beroperasi di perangkat Android dari mesin pengembangan.

Langkah 1: Temukan perangkat Android

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

  1. Buka layar Developer Options di Android. Baca Konfigurasi Opsi Developer Di Perangkat.
  2. Pilih Enable USB Debugging.
  3. Di mesin pengembangan, buka Chrome.
  4. Buka DevTools.
  5. Di DevTools, klik Main Menu Menu Utama lalu pilih More tools > Remote devices.

    Membuka tab Perangkat Jarak Jauh melalui Menu Utama.
    Gambar 2. Membuka tab Perangkat Jarak Jauh melalui Menu Utama

  6. Di DevTools, buka tab Settings.

  7. Pastikan kotak centang Discover USB devices diaktifkan.

    Kotak centang Temukan Perangkat USB
       diaktifkan.
    Gambar 3. Kotak centang Temukan Perangkat USB diaktifkan

  8. Sambungkan perangkat Android secara langsung ke mesin pengembangan menggunakan kabel USB. Saat pertama kali melakukan ini, biasanya Anda melihat DevTools telah mendeteksi perangkat yang tidak dikenal. Jika Anda melihat titik hijau dan teks Connected di bawah nama model perangkat Android, DevTools berhasil membuat sambungan ke perangkat. Lanjutkan ke Langkah 2.

    Tab Perangkat Jarak Jauh berhasil mendeteksi
       perangkat yang tidak dikenal yang menunggu otorisasinya.
    Gambar 4. Tab Perangkat Jarak Jauh berhasil mendeteksi perangkat tidak dikenal yang menunggu otorisasi

  9. Jika perangkat muncul sebagai Tidak Dikenal, terima permintaan izin Allow USB Debugging di perangkat Android.

Pemecahan masalah: DevTools tidak mendeteksi perangkat Android

Pastikan hardware disiapkan dengan benar:

  • Jika Anda menggunakan hub USB, coba sambungkan 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 Allow USB Debugging di perangkat Android, coba:

  • Lepas dan sambungkan kembali kabel USB saat DevTools difokuskan di mesin pengembangan dan layar utama Android muncul. Dengan kata lain, kadang perintah tidak muncul jika layar Android atau mesin pengembangan terkunci.
  • Perbarui 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 Revoke USB Debugging Authorizations dari layar Developer Options di perangkat Android untuk menyetel ulang 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 atas pertanyaan Stack Overflow tersebut, atau buka masalah di repositori webfundamentals!

Langkah 2: Debug konten di perangkat Android dari mesin pengembangan

  1. Buka Chrome di perangkat Android.
  2. Di tab Remote Devices, klik tab yang cocok dengan nama model perangkat Android Anda. Di bagian atas halaman ini, Anda akan melihat nama model perangkat Android, diikuti dengan nomor serinya. Di bawahnya, Anda dapat melihat versi Chrome yang dijalankan di perangkat, beserta nomor versi dalam tanda kurung. Tiap tab Chrome yang dibuka akan mendapatkan bagiannya sendiri. Anda dapat berinteraksi dengan tab tersebut dari bagian ini. Jika ada aplikasi yang sedang menggunakan WebView, Anda juga akan melihat bagian untuk tiap aplikasi tersebut. Di Gambar 5 tidak ada tab atau WebView yang terbuka.

    Perangkat jarak jauh yang tersambung.
    Gambar 5. Perangkat jarak jauh yang tersambung

  3. Di kotak teks New tab, masukkan URL, lalu klik Open. Halaman akan dibuka di tab baru di perangkat Android.

  4. Klik Inspect di samping URL yang baru saja Anda buka. Instance baru DevTools akan terbuka. 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: muat ulang, fokus, atau tutup tab

Klik More Options Opsi Lainnya di samping tab yang ingin Anda muat ulang, fokuskan, atau tutup.

Menu untuk memuat ulang, menfokuskan, atau menutup tab.
Gambar 6. Menu untuk memuat ulang, menfokuskan, atau menutup tab.

Memeriksa elemen

Buka panel Elements di instance DevTools, dan arahkan kursor ke elemen untuk menandainya dalam viewport perangkat Android.

Anda juga dapat menge-tap sebuah elemen di layar perangkat Android untuk memilihnya di panel Elements. Klik Select Element Pilih
Elemen di instance DevTools, lalu tap elemen di layar perangkat Android Anda. Perlu diperhatikan, Select Element dinonaktifkan setelah sentuhan pertama, jadi Anda perlu mengaktifkannya kembali setiap kali ingin menggunakan fitur ini.

Screencast layar Android ke mesin pengembangan

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

Anda dapat berinteraksi dengan screencast dalam beberapa cara:

  • Klik diterjemahkan menjadi tap, yang akan mengaktifkan peristiwa sentuh yang sesuai di perangkat.
  • Penekanan tombol di komputer akan dikirimkan ke perangkat.
  • Untuk menyimulasikan gestur mencubit, tahan tombol Shift saat menarik.
  • Untuk scroll, gunakan trackpad atau roda mouse, atau gerakan membuang dengan pointer mouse.

Beberapa catatan mengenai screencast:

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

Masukan

Was this page helpful?
Yes
What was the best thing about this page?
It helped me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had the information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had accurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was easy to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
No
What was the worst thing about this page?
It didn't help me complete my goal(s)
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was missing information I needed
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It had inaccurate information
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
It was hard to read
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.
Something else
Thank you for the feedback. If you have specific ideas on how to improve this page, please create an issue.