Cara Inspect Element di Android Lewat Google Chrome Windows

Kategori : #PHP,   #Phone,  
mahendrawardana, 03 September 2016


Cara Inspect Element di Android Lewat Google Chrome Windows

Selamat siang teman2.

Untuk para designer web, tentunya mengetahui element-element pada tag htmlnya setelah di run adalah hal yang seharusnya diketahui. Karena sulit untuk menemukan tag htmlnya yang mungkin terjadi kesalahan atau design yang kurang pas jika di view pada desktop, mobile ataupun tablet. Pada desktop tentu saya bisa dengan mudah sekali dilakukan, yaitu menekan tombol pada keyboard crt + shift +c. Maka akan muncul fixed window di bawah atau windoow baru untuk inspect element pada website yang kita buka pada tab tersebut. Pada editor itulah kita bisa berkreasi lebih dalam pada design yang kita buat. Tetapi, bagaimana view design kita pada mobile atau tablet ? bagaimana caranya kita untuk inspect element design kita yang sudah online ?.

Ada cara untuk melakukannya, sedikit cerita, dari tadi pagi saya terus mencobanya mencari cara inspect element web yang ada di mobile android, sedangkan view editornya ada di google chrome pada desktop. Ternyata ada caranya, caranya tersebut official dari Google sendiri. Namun cara/tutorial ini hanya bisa dilakukan pada google chrome dan smarthphone android saja. Selain dari itu, teman-teman bisa browsing sendiri. hehe. So, berikut saya jelaskan cara-cara agar kita bisa inspect element web pada android dengan editornya pada Google Chrome Desktop.

  1. Kunjungi halaman resmi dari google ini, https://developers.google.com/web/tools/chrome-devtools/debug/remote-debugging/remote-debugging?utm_source=dcc&utm_medium=redirect&utm_campaign=2016q3
  2. Ikuti langkah-langkah yang ada disana, penjelasannya disana sudah lengkap. Jadi teman-teman hanya tinggal mengikutinya saja.
  3. Jika tidak mengerti, teman-teman bisa tinggalkan kolom komentar dibawah, saya akan membantu teman-teman sampai berhasil. *kalau ada waktu luang, hehe
  4. Kendala yang saya hadapi saat mengikuti tutorial itu adalah, device android saya dideteksi. Di tahap sanalah saya lama untuk mencari solusinya.
  5. Setelah sekian waktu, saya menemukan caranya. yaitu dengan mengikuti forum yang ada disini http://stackoverflow.com/questions/29983673/cant-see-my-device-of-chrome-inspect-devices
  6. inti permasalahannya adalah device kita belum ter-authorization untuk dapat digunakan pada laptop(windows) kita. cari kita harus allow device kita dulu agar dapat dideteksi oleh google chrome.
  7. Jadi, turuti langkah-langkah yang ada disana sampai di deteksi oleh Google Chrome.
  8. Jika sudah, maka teman-teman tinggal akses kembali url default Chrome = chrome://inspect/#devices
  9. Maka, akan terlihat daftar tab url yang teman-teman akses pada Android. 
  10. Klik salah satu halaman, maka akan muncul seperti thumbnail postingan ini.

Saya rasa teman-teman jika memiliki niat dan ketelitian yang besar, teman-teman bisa mengikuti tutorial ini. Maaf sebelumnya, jika tutorial ini kurang informatif dan mudah untuk di cerna, karena saya kekurangan waktu untuk mengulasnya lebih dalam dan mudah untuk dipahami oleh teman-teman (lagi ngerjain project, hehe). Jadi, jika teman-teman ada masalah, bisa tinggalkan pertanyaan/kendala yang dihadapai di kolom komentar dibawah ini.

Sekian dan Terima Kasih.

Salam koding, Laughing

Kategori : #PHP,   #Phone,