Melakukan debug konten langsung dari jauh di perangkat Android dari komputer Windows, Mac, atau Linux. Tutorial ini mengajarkan cara:
- Siapkan perangkat Android untuk proses debug dari jarak jauh, dan temukan dari mesin pengembangan Anda.
- Periksa dan debug konten langsung di perangkat Android dari mesin pengembangan Anda.
- Melakukan screencast konten dari perangkat Android ke instance DevTools di mesin pengembangan.
Langkah 1: Temukan perangkat Android
Alur kerja di bawah ini berfungsi untuk sebagian besar pengguna. Lihat Pemecahan masalah: DevTools tidak mendeteksi perangkat Android untuk mendapatkan bantuan lebih lanjut.
- Buka layar Opsi Developer di Android. Lihat Mengonfigurasi Opsi developer di perangkat.
- Pilih Aktifkan Proses Debug USB.
- Di mesin pengembangan, buka Chrome.
- Buka
chrome://inspect#devices
. Pastikan Temukan perangkat USB diaktifkan.
Hubungkan perangkat Android secara langsung ke mesin pengembangan menggunakan kabel USB.
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.
Jika Anda melihat nama model perangkat Android, DevTools telah berhasil membuat koneksi ke perangkat Anda.
Lanjutkan ke Langkah 2.
Pemecahan masalah: DevTools tidak mendeteksi perangkat Android
Pastikan hardware disiapkan dengan benar:
- Jika Anda menggunakan hub USB, coba hubungkan 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 mesin pengembangan 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 dicolok.
Jika Anda tidak melihat perintah Izinkan Proses Debug USB di perangkat Android, coba:
- Memutuskan sambungan, lalu menghubungkan kembali kabel USB saat DevTools difokuskan di mesin pengembangan dan layar utama Android muncul. Dengan kata lain, terkadang perintah tidak muncul saat layar Android atau mesin pengembangan terkunci.
- Memperbarui 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 Cabut Otorisasi Proses Debug USB dari layar Opsi Developer di perangkat Android untuk meresetnya 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 ke pertanyaan Stack Overflow tersebut, atau buka masalah di repositori developer.chrome.com.
Langkah 2: Debug konten di perangkat Android dari mesin pengembangan
- Buka Chrome di perangkat Android.
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 dijalankan di perangkat, dengan nomor versi dalam tanda kurung.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 akan 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.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 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: 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 Elemen di instance DevTools, lalu arahkan kursor ke elemen untuk menandainya di tampilan yang terlihat pada perangkat Android.
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. Perhatikan bahwa Pilih Elemen dinonaktifkan setelah sentuhan pertama, jadi Anda perlu mengaktifkannya kembali setiap kali ingin menggunakan fitur ini.
Melakukan screencast layar Android ke mesin pengembangan
Klik Toggle Screencast untuk melihat konten perangkat Android di instance DevTools.
Anda dapat berinteraksi dengan screencast dalam beberapa cara:
- Klik diterjemahkan menjadi ketukan, yang akan memicu peristiwa sentuh yang sesuai di perangkat.
- Penekanan tombol di komputer Anda akan dikirim ke perangkat.
- Untuk menyimulasikan gestur mencubit, tahan Shift saat menarik.
- Untuk men-scroll, gunakan trackpad atau roda mouse, atau gerakan membuang dengan pointer mouse.
Beberapa catatan tentang screencast:
- Screencast hanya menampilkan konten halaman. Bagian transparan siaran layar menampilkan antarmuka perangkat, seperti kolom URL Chrome, status bar Android, atau keyboard Android.
- Screencast secara negatif memengaruhi kecepatan bingkai. Nonaktifkan screencast saat mengukur scroll atau animasi untuk mendapatkan gambaran performa halaman yang lebih akurat.
- Jika layar perangkat Android terkunci, konten screencast Anda akan menghilang. Buka kunci layar perangkat Android 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):
- Pastikan untuk mengaktifkan Opsi developer dan Proses debug USB di perangkat Android Anda.
- Buka Chrome di Perangkat Android Anda.
Hubungkan perangkat Android ke mesin pengembangan Anda melalui:
- Kabel USB (sederhana).
- Atau, koneksi Wi-Fi adb.
Di command line mesin pengembangan, jalankan
adb devices -l
dan periksa apakah perangkat Anda ada dalam daftar.Teruskan soket CDP di perangkat ke port lokal komputer Anda, misalnya,
9222
. Untuk melakukannya, jalankan:adb forward tcp:9222 localabstract:chrome_devtools_remote
Setelah berhasil terhubung, pastikan:
http://localhost:9222/json
mencantumkan targetpage
Anda.http://localhost:9222/json/version
mengekspos endpoint targetbrowser
, 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: