Lompat ke konten

Cara Inspect Element di Hp Android yang Mudah

Jika kamu seorang pengembang web, mungkin akrab dengan Alat Pengembang yang ada di hampir semua browser web desktop modern. Toolkit ini berguna untuk membantu memecahkan masalah dan mengubah kode HTML, CSS, dan JavaScript yang digunakan di halaman web.

Saat ini, ada lebih banyak pengguna smartphone dibandingkan dengan pengguna desktop, jadi sama pentingnya untuk menguji situs web pada berbagai elemen. Developer Tools yang dibangun ke dalam browser web desktop seperti Chrome memungkinkan untuk meniru berbagai layar ponsel dan agen pengguna untuk melihat bagaimana situs web dirender pada jenis layar dan faktor elemen tersebut.

Untuk mensimulasikan perangkat apa pun di Chrome, tekan F12 dengan Chrome terbuka untuk membuka Developer Tools, lalu klik Toggle Device Toolbar dari sudut kiri atas jendela Alat Dev untuk menyalakannya. Sekarang kembali ke layar utama dan ubah perangkat, dimensi, dan batasi kinerja untuk mengetahui bagaimana situs web kamu berperilaku pada perangkat yang berbeda.

Namun terkadang, simulasi perangkat mungkin tidak akurat, dan kamu mungkin ingin men-debug perilaku situs web dengan Inspect Element di smartphone khususnya Android.

Pada artikel ini, kita akan menjelajahi cara menggunakan Inspect Element di perangkat Android.

Cara Menggunakan Inspect Element di Android Tanpa PC

Cara Inspect Element di Chrome Android

Ada dua opsi praktis untuk memanggil Dev Tools guna memeriksa elemen secara langsung di perangkat Android tanpa memerlukan komputer. Untuk mengetahuinya lebih lengkap, silahkan ikuti panduan yang kami berikan ini.

Inspect Element di Chrome

Tidak seperti Chrome PC, Chrome Android tidak memiliki opsi Inspect Element, Web Inspector, atau Dev Tools di dalamnya. Tetapi kami memiliki solusi pihak ketiga yang dapat mengaktifkan fitur ini di Chrome dengan bantuan bookmarklet berbasis JavaScript, yang disebut Eruda.

Kode untuk bookmarklet ini bersifat open-source dan tersedia di GitHub. Oleh karena itu, dapat diaudit oleh pengembang independen untuk masalah, kerentanan, dan bahkan perilaku jahat (jika ada). Jika ingin memeriksa kode sebelum menggunakannya di Hp Android, silakan ikuti panduan berikut.

Untuk menginstal dan menggunakan bookmarklet, ikuti langkah-langkah di bawah ini.

  1. Luncurkan Chrome di perangkat Android.
  2. Ketuk tiga titik dari sudut kanan atas.
  3. Ketuk ikon Bintang (Bookmark) dua kali. kamu akan melihat layar Edit bookmark.
  4. Berikan Nama yang cocok untuk bookmark, misalkan “Inspect Element”.
  5. Di kolom URL, masukkan kode berikut:
    javascript:(function() { var script = document.createElement('script'); script.src=”//cdn.jsdelivr.net/npm/eruda”; document.body.appendChild(script); script.onload = function() { eruda.init() } })();
  6. Pilih Folder untuk menyimpan bookmark tersebut.
  7. Ketuk tombol Kembali dari sudut kiri atas. Bookmark tersebut sekarang telah disimpan di Chrome.
  8. Sekarang, kunjungi halaman web tempat kamu ingin memeriksa suatu elemen.
  9. Setelah web terbuka, ketuk bilah alamat dan cari nama bookmark yang baru saja dibuat misalnya, “Inspeksi Elemen”.
  10. Pilih bookmark dari hasil pencarian. kamu harus dapat mengidentifikasinya dengan pratinjau kode JavaScript yang telah ditambahkan ke URL bookmark.
  11. Sekarang akan muncul ikon seperti roda gigi semi-transparan di sudut kanan bawah layar. Ketuk untuk mengaktifkan inspektur web.

Web Inspector memiliki fitur umum yang tersedia di Alat Pengembang yang terpasang di browser web berbasis desktop modern, termasuk, Konsol, Inspect Element, Jaringan, Sumber Daya, Info, Cuplikan, dan Sumber. Ada juga tab Pengaturan untuk mengonfigurasi beberapa opsi

Untuk menutup inspektur web, cukup ketuk ikon seperti roda gigi dari sudut kanan bawah, atau segarkan halaman untuk menyembunyikannya. Kalian dapat memanggilnya lagi dengan mencari dan mengetuk bookmarklet saat halaman web dibuka.

Inspect Element di browser web pihak ketiga

Meskipun Chrome untuk Android tidak menyediakan fitur web inspector, beberapa browser web pihak ketiga yang tersedia di Play Store melakukannya.

Di sini, kita akan menggunakan salah satu browser web pihak ketiga, yang disebut Web Inspector besutan pengembang SacredWits.

  1. Download dan Instal Web Inspector dari Play Store.
  2. Buka aplikasi dan ketuk ikon Tautan dari sudut kiri bawah.
  3. Berikan URL yang ingin kamu periksa di perangkat Android, dan ketuk tombol Go.
  4. Saat halaman telah dimuat, ketuk ikon Roda Gigi dari bagian bawah layar untuk membuka alat pemeriksa web.

Mirip dengan alat sebelumnya yang ditampilkan dalam artikel ini, Web Inspector menyertakan fitur atau tab berikut: Console, Inspect Element, Network, Resources, Info, Snippets, Sources, dan Settings.

Untuk menutup inspektur, cukup ketuk ikon Roda Gigi dari bagian bawah layar. Kamu bahkan dapat membuka beberapa situs web atau halaman di banyak tab dan beralih di antar tab dengan mudah saat memeriksanya.

Ada banyak aplikasi Inspect Element lain yang juga tersedia di Play Store. Jika mau, cukup cari dan jelajahi berbagai aplikasi yang tersedia, dan pilih salah satu yang paling cocok.

Cara Inspect Element di Android dengan Komputer

Menggunakan komputer untuk inspect element di situs web mungkin lebih disukai, karena menampilkan layar yang lebih besar untuk digunakan. Jika ingin men-debug situs web kamu di komputer tetapi merender halaman web di perangkat Android asli, langkah-langkah berikut akan memandu kamu untuk melakukannya.

Langkah 1: Aktifkan USB Debugging di perangkat Android.

  1. Pastikan opsi Pengembang diaktifkan. Untuk melakukan ini, buka aplikasi Pengaturan, gulir ke bawah dan periksa apakah opsi Pengembang tersedia. Jika tidak, buka About phone, dan ketuk Build Number 5 – 7 kali dengan cepat, hingga kamu melihat pesan You are now a developer ditampilkan di bagian bawah.
  2. Buka Pengaturan >> Opsi pengembang, dan aktifkan USB Debugging.
  3. Ketuk Izinkan di pop-up konfirmasi.

Langkah 2: Hubungkan perangkat Android ke PC Windows

  1. Hubungkan ponsel ke komputer melalui USB.
  2. Di ponsel, ketuk notifikasi sistem, dan ubah mode koneksi dari Pengisian ke Transfer File.
  3. Ketuk Izinkan di ponsel untuk pop-up USB Debugging.

Langkah 3: Periksa Elemen di Android dari Komputer

  1. Di komputer, buka Chrome dan navigasikan ke chrome://inspect.
  2. Pada halaman yang terbuka, pada tab Perangkat, situs web yang dibuka pada perangkat Android yang terhubung akan terdaftar di bawah bagian Target Jarak Jauh.
  3. Ketuk ikon periksa di bawah halaman terkait yang ingin dicek.

Alat Pengembang Chrome sekarang memungkinkan kamu memeriksa atau men-debug situs web dengan alat Inspect Element bawaan.

Jadi, begitulah cara Inspect Element situs web langsung dari perangkat Android, serta menggunakan komputer.