Menggunakan Fitur Remote Device pada Developer Tools Chrome
Kita sering kesulitan untuk melihat log yang pada browser Mobile atau DOM HTML yang ter-render oleh browser mobile. Bagaimana kita melihat dom, bagaimana kita memanipulasi tampilan, dan yang biasanya kita gunakan untuk mendebug di Browser Desktop seakan terbatas di Browser Mobile. Browser mobile tidak menyediakan fitur selengkap yang ada pada browser desktop untuk alasan performa.
Sekarang kita bayangkan, jika kita bisa mengakses developer tools untuk smartphone Android kita. Kita bisa mengakses inspect element, network timeline, performance, dan mengecek cookie yang ada dalam halaman web yang diakses oleh smartphone kita. Terdengar keren bukan?
Untungnya Developer Tools Chrome menyediakan fitur remote device 🎉. Fitur ini yang memungkin kita meng-inspect halaman web yang diakses oleh Android yang menggunakan Chrome Mobile. Kita bisa menggunakannya dengan cara menyambungkan device android dengan laptop. Pada artikel ini, kita akan menyambungkan dengan menggunakan kabel USB.
Setting Smartphone Android 📱
Persyaratan pertama yang harus dipenuhi adalah Smartphone Android yang telah terinstall chrome, selanjutnya mengubah Android menjadi “Developer Mode” dan mengaktifkan USB Debugging. USB debugging harus diaktifkan untuk mengizinkan akses Developer Tools Chrome pada laptop yang digunakan development.
Setelah kita memastikan developer mode menyala dan mengizinkan untuk melakukan USB debugging, kita bisa menyiapkan laptop yang akan digunakan untuk melakukan development dan membuka browser Chrome tentunya 😁
Menggunakan Remote Device pada Developer Tools 💻
Untuk menggunakan fitur ini kita cukup mengaktifkan terlebih dahulu “Developer Tools” yang dimiliki oleh Browser Chrome. Buka terlebih dahulu Developer Tools pada Chrome.
Setelah masuk ke Bagian Remote Device anda akan melihat settings (Gambar pada kotak ungu). Settings ini secara default sudah menggunakan pilihan “Discover USB devices”. Jika anda telah melakukan setting dengan benar maka akan muncul device di bagian kiri.
Selanjutnya kita bisa membuka device yang telah dideteksi oleh browser Chrome. Pilih saja device yang akan digunakan. Jika sudah memilih, akan ditampilkan pilihan seperti pada gambar berikut ini:
Kita bisa memasukan URL yang akan kita “inspect”. Ketika kita memasukan URL, kita akan membuka halaman dengan menggunakan Chrome yang ada pada smartphone kita.
Sealnjutnya kita bisa melakukan inspect element menggunakan developer tools pada laptop kita dengan menekan tombol inspect di kanan halaman yang telah dibuka pada Chrome Android. Tadaaa 🎉 Kita bisa menggunakan Developer Tools untuk inspect halaman pada Chrome Android 😄
Developer Tools menampilkan tampilan yang ada pada browser Chrome Android secara Live. Kita bisa melakukan operasi-operasi dari Tampilan Developer Tools atau langsung dari Smartphone Android. Saya lebih suka langsung dari smartphone sehingga lebih terasa gesture atau operasi yang dilakukan.
Fitur pada Remote Device
Fitur yang disediakan juga cukup lengkap, sama seperti kita menggunakan untuk mengecek halaman web browser, tapi tampilan hanya diganti dengan menggunakan live view dari layar smartphone android. Untuk beberapa plugin di sini tidak dapat digunakan, seperti React Dev Tools. Fitur inspect element, performance, application dan sebagainya dapat berjalan seperti yang diinginkan.
Kesimpulan
Fitur Remote Device ini sangat membantu kita dalam melakukan development dan debugging khususnya dalam Mobile Web Page yang diakses menggunakan Chrome Android. Saya rangkum beberapa kesan positif dan negatif menurut subjektivitas saya.
Positif
- Fitur ini sangat membantu bagi anda yang menginginkan melihat proses yang terjadi pada Browser Mobile.
- Dengan melihat menggunakan Remote Device, kita bisa melakukan gesture-gesture yang tidak disediakan oleh touchpad anda (misalnya: drag, pinch, slide, dsb.).
- Tampilan live view juga membantu kita jika tetap ingin mengontrol dari laptop saja.
Negatif
- Tampilan live view yang kurang tajam karena menggunakan streaming, sehingga Google Chrome mengurangi kualitas gambar walaupun menggunakan Kabel USB.
Jika ada pertanyaan, kritik, maupun saran, anda bisa menyampaikannya melalui kolom komentar dibawah. Terimakasih 😄
