klinikbisnis.id – Bagi seorang developer website ataupun blogger, inspect element merupakan hal yang sangat penting untuk dipahami. Karena dari inspect element tersebut Anda dapat dengan mudah melihat struktur HTML yang membangun sebuah website.

Mulai dari template CSS, javascript, berbagai tag HTML semua dapat Anda lihat dan pelajari di halaman inspect element. Maka dari itu penting bagi Anda untuk mengetahui Cara Inspect Element di Chrome Android.

Fitur inspect element ini secara umum tersedia otomatis apabila Anda menggunakan web browser di PC. Namun fitur ini disembunyikan ketika Anda menggunakan web browser mobile. Walaupun terrsembunyi, kali ini saya akan membuka trik khususnya ya guys.

Baca Juga: Cara Mengubah Video Youtube Menjadi Teks

Apa itu Inspect Element?

Inspect Element adalah fitur yang terdapat dalam browser web, seperti Google Chrome, Mozilla Firefox, dan Safari, yang memungkinkan pengguna untuk melihat, mengedit, dan memahami struktur kode HTML, CSS, dan JavaScript pada halaman web. Fitur ini sering digunakan oleh developer web untuk menguji perubahan, memperbaiki kesalahan, atau menganalisis bagian kode tertentu pada suatu situs.

Untuk mengakses Inspect Element, Anda dapat mengklik kanan pada elemen tertentu pada halaman web dan memilih “Inspect” atau “Inspect Element” dari menu konteks. Alternatif lain, Anda juga bisa menggunakan pintasan keyboard seperti “Ctrl + Shift + I” atau “Cmd + Shift + I” (untuk Mac) untuk membuka Developer Tools dan langsung masuk ke tab Elements atau Inspect Element.

Saat Inspect Element terbuka, Anda dapat memilih elemen HTML, melihat gaya CSS yang diterapkan pada elemen tersebut, dan bahkan memodifikasi kode langsung di browser. Perlu diingat bahwa perubahan yang Anda buat di Inspect Element hanya bersifat sementara dan tidak akan disimpan, sehingga saat Anda me-refresh halaman, semua perubahan yang telah dibuat akan hilang.

Manfaat Inspect Element

Inspect Element memiliki berbagai manfaat, terutama bagi pengembang web, desainer, dan mereka yang tertarik untuk belajar lebih lanjut tentang cara kerja situs web. Berikut adalah beberapa manfaat utama menggunakan Inspect Element:

  1. Debugging dan troubleshooting: Inspect Element memungkinkan pengembang untuk memperbaiki kesalahan dalam kode HTML, CSS, dan JavaScript dengan menemukan dan mengidentifikasi masalah secara real-time.
  2. Uji desain dan layout: Dengan Inspect Element, pengembang dan desainer dapat menguji perubahan desain atau gaya pada halaman web langsung di browser tanpa perlu menyunting kode asli.
  3. Belajar dan eksplorasi: Inspect Element merupakan alat yang hebat untuk mereka yang ingin mempelajari lebih lanjut tentang struktur dan gaya situs web yang mereka kunjungi. Ini dapat membantu pemula dalam pengembangan web untuk memahami bagaimana elemen-elemen HTML, CSS, dan JavaScript bekerja bersama-sama.
  4. Analisis kinerja: Inspect Element juga menyediakan informasi tentang kinerja situs web, seperti waktu pemuatan, penggunaan sumber daya, dan ketergantungan eksternal. Ini membantu pengembang mengoptimalkan situs web mereka untuk memastikan pengalaman pengguna yang lebih baik.
  5. Responsif dan pengujian perangkat: Inspect Element memungkinkan pengguna untuk menguji tampilan dan fungsionalitas situs web pada berbagai ukuran layar dan perangkat, seperti ponsel, tablet, dan desktop. Ini membantu memastikan bahwa situs web responsif dan berfungsi dengan baik di semua perangkat.
  6. Keamanan dan privasi: Inspect Element dapat membantu mengidentifikasi dan menganalisis potensi masalah keamanan dan privasi pada situs web, seperti skrip yang mencurigakan atau pelacakan yang tidak diinginkan.

Perlu diingat bahwa perubahan yang dilakukan melalui Inspect Element hanya bersifat sementara dan tidak akan disimpan pada server. Setelah halaman web dimuat ulang, semua perubahan akan hilang. Jadi, Inspect Element sebaiknya digunakan untuk pengujian dan eksplorasi daripada perubahan permanen.

Cara Inspect Element di Google Chrome

Untuk mengakses Inspect Element di Chrome pada perangkat Android dan iPhone, Anda harus mengaktifkan fitur Developer Tools pada Chrome. Berikut adalah langkah-langkah untuk mengaktifkannya:

  1. Buka aplikasi Google Chrome pada perangkat Android Anda.
  2. Di kolom URL, ketik: chrome://flags, lalu tekan Enter.
  3. Di halaman “Chrome Flags”, Anda akan melihat kotak pencarian di bagian atas. Ketik “devtools” di dalam kotak pencarian.
  4. Anda akan melihat opsi “Enable Developer Tools experiments”. Klik pada dropdown di bawah opsi tersebut, lalu pilih “Enabled”.
  5. Anda akan diminta untuk merestart Chrome. Klik “Relaunch” untuk melanjutkan.
  6. Setelah Chrome di-restart, buka halaman yang ingin Anda inspeksi elemennya.
  7. Klik pada kolom URL lagi, dan ketik chrome://inspect, lalu tekan Enter.
  8. Di halaman “chrome://inspect”, Anda akan melihat daftar tab yang terbuka. Klik “inspect” di bawah tab yang ingin Anda inspeksi elemennya.
  9. Developer Tools akan terbuka dalam mode mobile. Anda dapat melihat dan mengedit elemen HTML, CSS, dan JavaScript pada halaman tersebut.

Apabila cara di atas tidak work, tenang ssaja kami masih memiliki cara alternatif yaitu dengan menggunakan bantuan javascript. Ikuti langkah-langkah berikut ini:

Cara Inspect Element di Chrome Android
  1. Buka aplikasi Google Chrome pada perangkat smartphone Anda
  2. Salin dan simpan alamat javascript di bawah ke bookmark Google Chrome Anda
    javascript:(function () { %C2%A0%C2%A0%C2%A0 var script =%C2%A0 document.createElement('script'); %C2%A0%C2%A0%C2%A0 script.src="//cdn.jsdelivr.net/npm/eruda"; %C2%A0%C2%A0%C2%A0 document.body.appendChild(script); %C2%A0%C2%A0%C2%A0 script.onload = function () { %C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0%C2%A0 eruda.init() %C2%A0%C2%A0%C2%A0 } })();
  3. Silahkan buka halaman situs web yang ingin Anda inspect element
  4. Kemudian di address bar ketikan nama javascript yang telah Anda simpan, lalu Go
  5. Maka di pojok kanan bawah akan tampil ikon pengaturan, silahkan Anda klik ikon tersebut
  6. Maka halaman developer tools akan tampil, silahkan Anda bebas berkreasi menggunakan inspect element

Meskipun menggunakan Inspect Element di Chrome Android mungkin tidak sepraktis di desktop, fitur ini tetap dapat membantu Anda dalam memeriksa, mengedit, dan memahami kode halaman web di perangkat mobile.