LABTekno.com – Cara menampilkan inspect element di Google Chrome bisa kalian gunakan untuk melihat sebuah code html, javascript, css di sebuah website.
Mengintip sebuah website dengan inspect element ini biasanya juga dilakukan seseorang untuk berlatih coding.
Fungsi ini sangat berguna bagi pengembang web dan desainer, namun juga bisa digunakan oleh pengguna biasa untuk memahami cara suatu halaman web dibangun atau untuk melakukan perubahan sementara pada tampilan atau perilaku halaman tersebut.
Bagi pengguna PC, inspect element tentu lebih mudah. Cukup dengan klik tombol F12, maka fitur inspect element akan muncul di paling bawah.
Berbeda dengan cara menampilkan inspect element di Google Chrome versi Android.
Berikut adalah penjelasan mengenai cara menggunakan Inspect Element baik melalui perangkat Android maupun PC:
Cara Menampilkan Inspect Element di Google Chrome Melalui PC
Cara menampilkan Inspect Element di Google Chrome melalui perangkat PC sebenarnya sangat mudah. Seperti yang telah disebutkan secara singkat di atas. Berikut ini langkah-langkahnya:
- Buka Google Chrome: Pastikan Anda telah menginstall dan membuka peramban Google Chrome di komputer Anda.
- Kunjungi halaman web yang ingin Anda inspeksi: Buka halaman web yang ingin Anda analisis atau ubah.
- Buka Inspect Element:
- Gunakan pintasan keyboard: Tekan tombol F12 atau Ctrl+Shift+I (Cmd+Option+I di Mac) untuk membuka Inspect Element.
- Kemudian klik kanan di mana saja di halaman web, lalu pilih opsi “Inspect” atau “Inspect Element” dari menu konteks.
- Setelah Anda membuka Inspect Element, Anda akan melihat panel terpisah di bagian bawah atau samping layar. Di sini Anda akan melihat tab-tab yang memungkinkan Anda untuk mengakses dan mengedit kode HTML, CSS, dan JavaScript, serta alat-alat lain yang berguna dalam pengembangan web.
- Menggunakan Inspect Element:
- Klik pada elemen halaman web yang ingin Anda inspeksi. Ini akan menyorot kode HTML yang berkaitan dengan elemen tersebut di panel Inspect Element.
- Anda dapat mengklik dua kali pada kode HTML untuk mengedit teks atau mengubah atribut.
- Di tab “Elements”, Anda juga dapat mengeksplorasi struktur halaman web dan mengubah elemen yang ada.
Untuk menutup panel Inspect Element, caranya sama seperti menutup software pada umumnya.
Cukup klik tombol “X” di pojok kanan atas panel atau bisa juga dengan menekan kembali pintasan keyboard (F12 atau Ctrl+Shift+I).
Melalui Perangkat Android
Cara menampilkan inspect element di Google Chrome juga perlu dipelajari oleh pengguna Android. Sedikit lebih repot dari pengguna PC, berikut ini cara inspect element melalui perangkat Android:
- Buka Aplikasi Google Chrome di Perangkat Android: Pastikan Anda telah menginstal dan membuka peramban Google Chrome di perangkat Android Anda.
- Kunjungi halaman web yang ingin Anda inspeksi: Buka halaman web yang ingin Anda analisis atau ubah.
- Buka Inspect Element:
- Ketuk ikon tiga titik vertikal di sudut kanan atas layar untuk membuka menu Chrome.
- Pilih “Settings” (Pengaturan) dari menu tersebut.
- Gulir ke bawah dan pilih opsi “Developer tools” di bawah kategori “Advanced” (Lanjutan).
- Di layar berikutnya, aktifkan opsi “Enable developer tools” dengan menggeser tombol ke posisi “On“.
- Kembali ke halaman web: Kembali ke halaman web yang ingin Anda inspeksi.
- Buka Inspect Element di Android:
- Tap ikon tiga titik di sudut kanan atas layar.
- Pilih “Developer tools” dari menu yang muncul.
- Anda akan melihat panel Inspect Element yang muncul di bagian bawah layar.
- Menggunakan Inspect Element di Android: Anda dapat menyentuh elemen halaman web untuk memeriksanya dan mengedit kode HTML, CSS, atau JavaScript yang berkaitan dengan elemen tersebut di panel Inspect Element yang terbuka.
- Menutup Inspect Element di Android: Untuk menutup panel Inspect Element di Android, cukup geser panel ke atas atau tekan tombol kembali di perangkat Anda.
Dengan menggunakan Inspect Element, Anda dapat memahami dan mengedit kode halaman web untuk berbagai tujuan, termasuk analisis, debugging, atau penyesuaian tampilan.
Namun, perlu diingat bahwa perubahan yang Anda buat hanyalah sementara dan tidak akan mempengaruhi halaman web untuk pengguna lain atau setelah Anda me-refresh halaman tersebut.
Cara Inspect Element di Google Chrome HP Android
Sebenarnya bagi pengguna HP Android, saat ini tersedia 2 cara untuk membuka tools developer, yakni lewat google chrome dan kiwi browser.
Nah, jika kalian sudah menginstall aplikasi Google Chrome, berikut ini cara Inspect Element dari HP:
- Buka aplikasi Google Chrome di HP Android Anda.
- Kemudian pergi ke Pengaturan.
- Silakan salin copy script Inspect Element berikut:
javascript:(function () {
var script = document.createElement(‘script’);
script.src=”//cdn.jsdelivr.net/npm/eruda”;
document.body.appendChild(script);
script.onload = function () {
eruda.init()
}
})();
- Jika sudah, langsung saja paste atau tempelkan script tersebut ke Bookmark. Caranya, klik ikon︙, Edit, Paste Code di atas pada kolom Bookmark, dan beri nama Inspect Element, Lalu Simpan.
Melalui Kiwi Browser di HP Android
Bagi pengguna Kiwi Browser, kalian bisa mengikuti cara berikut ini agar bisa inspect element di hp android:
Pertama, bagi yang belum mengunduh, silakan download aplikasi Kiwi Browser terlebih dahulu.
Jika sudah terinstall, langsung saja buka aplikasi tersebut.
Silakan kunjungi website yang ingin ditelusuri dengan fitur Inspect Element.
Ubah view browser ke mode desktop terlebih dahulu agar hasilnya lebih optimal.
Kini saatnya untuk mengaktifkan developer tools. Caranya adalah dengan klik Icon ︙» Klik Developer Tools.
Setelah opsi Developer Tools aktif, aplikasi kiwi browser akan otomatis membukakan tab baru dari hasil inspect element pada halaman yang telah digunakan.
Demikian beberapa cara menampilkan inspect element di Google Chrome, baik itu melalui PC maupun HP. Selamat mencoba!
