Memulai Proses Debugging Secara Live di Smartphone - Code Pelajar

Memulai Proses Debugging Langsung Melalui Perangkat Mobile - Banyak dari kita yang masih mengeluh membuat sebuah tampilan web yang responsive? sudah coba debug langsung developers tools kamu melalui Perangkat(smartphone android) ? Jika belum, mari simak tutorial berikut.



Ohya sebelum itu ini adalah tutorial ketiga dari tutorial series yang saya buat tentang Memaksimalkan Penggunaan Developer Tools Jadi tanpa basa-basi lagi yuk.


Mengatur Mode Pengembang pada Perangkat(Smartphone Android)

Pertama yang harus kalian lakukan adalah persiapkan Perangkat kalian terlebih dahalu.


  1. Masuk kedalam pengaturan, lalu cari About Phone.
  2. Jika sudah ketemu, cariBuild Number, Tap(click) sebanyak 7x.
  3. Jika sudah di Tap sebanyak 7 kali artinya smartphone sobat sudah berhasil mengubah permission menjadi mode pengembang(developers).
  4. Lalu sobat kembali ke menu utama Pengaturan, cari Developers Option.
  5. Jika sudah masuk, cari dan aktifkan USB DEBUGGING.
  6. Mengapa harus mengaktifkan USB DEBUGGING? USB DEBUGGING memungkinkan Android-SDK mengenali perangkat Sobat saat terhubung melalui USB, sehingga Sobat bisa menggunakan debugger dan alat lainnya.

Sampai pada tahap ini Perangkat sobat sudah cocok untuk mengikuti tutorial ini, jika masih ada yang dibingungkan silahkan tanyakan pada kolom komentar.


[#Cara 1]Memulai Proses Debugging Dengan Smartphone Android

Pastikan Smartphone & PC sobat membuka halaman Web yang sama agar lebih mudah proses singkronisasi.

  1. Buka Panel Developers Tools (CTRL+SHIFT+I)
  2. Dibagian pojok kanan atas ada klik itu -> lalu pilih More Option -> Klik Remote Device
  3. Jika sudah maka akan muncul sebuah tab baru pada bagian bawah devTools yaitu Remote Device, kalian tarik saja ke atas agar tampilannya seperti pada gambar diatas.
  4. Bisa kita lihat bahwa pada gambar diatas sudah ada tanda device yang terkoneksi dengan PC saya, Jika pada saat mencoba belum ada tanda-tanda perangkat yang terkoneksi coba periksa sambungan kabel USB & periksa apakah USB DEBUGGING sudah berhasil di aktifkan atau belum.
  5. Klik perangkat yang terkoneksi itu, lalu kalian bisa lihat tampilan seperti gambar dibawah ini.
  6. saya ingatkan sekali lagi, bahwa pastikan Halaman Web di Komputer & Smartphone sama agar proses singkronisasi lebih mudah dan cepat.
  7. disana terdapat button inspect untuk setiap baris url klik saja maka nanti akan tampil seperti ini :
  8. Gambar Proses live Debugging
  9. Pada tahap ini sobat sudah bisa langsung mengedit secara Live(langsung) versi mobile dengan langsung melihat preview dari smartphone kita sendiri.


[#Cara 2]Memulai Proses Debugging Dengan Smartphone Android

Pada cara kedua ini sebenarnya sama saja seperti cara 1 di atas, tapi saya ingin saja berbagi. Barangkali dari kalian ada yang bisa membandingkan cara mana yang lebih effisien dan simpel.

  1. Buka halaman ini : chrome://inspect/#devices.
  2. ketika Smartphone kalian sudah terkoneksi maka akan langsung tampil seperti gambar dibawah ini
  3. Jika kalian langsung ingin memulai proses debug, langsung saja klik inspect pada url yang sudah ada pada halaman tersebut.
  4. Pastikan Smartphone & PC sobat membuka halaman Web yang sama agar lebih mudah proses singkronisasi.

Masih ada yang dibingungin? yuk langsung tanyakan aja di kolom komentar semoga bermanfaat sob.



Table Of Content

    Contact Form

    Kirim