Cara Menampilkan Inspect Element di Google Chrome Desktop & Android

Cara menampilkan Inspect Element di Google Chrome bisa membantu developer aplikasi, UI/UX designer, hingga digital marketers mendapatkan sumber inspirasi.

Karena, dengan melakukan inspect pada website, kamu bisa melihat element HTML/ CSS hingga Console melalui Chrome.

Bahkan caranya lebih mudah daripada cara menghapus riwayat pencarian Google. Kamu bisa melakukannya di desktop, laptop sampai Android.

Berikut kami sediakan tutorial cara menampilkan inspect element di Google Chrome. Markimak. Mari kita simak 😉 ~

Apa itu Inspect Element pada Website?

Mungkin mengulas sedikit tentang apa itu inspect element pada Website, ya? Biar bagi kamu yang belum paham, bisa sedikit tercerahkan.

Inspect atau inspeksi dalam hal ini adalah upaya melihat element apa yang digunakan dalam sebuah website.

Element yang dimaksud adalah seperti kode HTML dan CSS yang digunakan untuk membuat atau membangu sebuah website.

Lalu,apa fungsi dari inspect element? Sebenarnya banyak sekali fungsi dari melakukan inspect element, terutama untuk pengembang (developer) hingga UI/UX designer.

Misalnya saja, ketika browsing, seorang UI designer tertarik menggunakan warna tertentu dari website yang ia kunjungi.

Maka ia bisa melakukan inspect element untuk melihat kode warna yang digunakan tersebut kemudian bisa menggunakannya pada desain UI yang ia buat.

Cara Menampilkan Inspect Element di Google Chrome

Untuk melakukan inspect element di Google Chrome melalui laptop, ada dua cara yang bisa kamu lakukan berikut ini.

Eits.. Tapi, bagi kamu yang menggunakan Windows 7 atau 8.1, ada info sedih, nih. Karena Google Chrome akan berhenti dukung Windows 7 dan 8.1.

Tapi, kemungkinan besar cara berikut ini masih dapat digunakan, kok. Silakan dicoba!

1. Cara Inspect Element dengan Shortcut Ctrl

Jika kamu bingunginspect element Ctrl apa, ini jawabannya:

Cara pertama untuk inspect element di Google Chrome PC atau laptop kamu bisa dengan kombinasi shortcut tombol keyboard Ctrl + Shift + C. Tutorialnya sebagai berikut:

1. Buka Google Chrome;
2. Buka website yang ingin kamu lakukan inspect element-nya;
3. Tekan shortcut tombol Ctrl + Shift + C pada komputer dengan OS Windows atau tekan kombinasi Command + Option + C pada MacOS;
4. Atau, jika kamu tidak menggunakan tombol, bisa juga dengan ketuk titik tiga pada pojok kanan atas > pilih “More tools” > pilih “Developer Tools”;
5. Selesai, kamu sudah berhasil menampilkan Elements, Console dan fitur lainnya.

Selain menggunakan kombinasi tombol pada keyboard, kamu juga bisa melakukan inspect element tanpa menggunakan tombol keyboard.

2. Cara Memunculkan Inspect Element di Chrome (Alternatif)

Alternatif cara memunculkan inspect element Chrome lainnya adalah sebagai berikut:

1. Buka Google Chrome;
2. Buka website yang ingin kamu lakukan inspect element-nya;
3. Klik kanan pada halaman yang ingin di-inspect;
4. Pada pilihan yang paling bawah, klik opsi “Inspect”;
5. Selesai, kamu sudah bisa melakukan inspect Elements, Console, Sources, Network dan yang lainnya.

Oh, ya! Jika kamu sudah melakukan inspect element, kamu juga bisa mengedit element pada website tersebut, loh. Tapi, apakah inspect bisa permanen? Tidak bisa.

Setelah melakukan editing pada website tersebut, jika kamu tidak memiliki akses masuk, maka hasil editing kamu setelah inspect element tidak permanen.

Oh, ya. Sembari melakukan inspect element, jika kamu pengguna Windows 11, kamu juga bisa baca cara mengecilkan taskbar Windows 11.

Yaaa.. Benar! Taskbar di Windows 11 bisa dikecilkan, loh. Meski caranya tidak semudah cara repair Windows 10. Namun patut dicoba, ya!

Nah, jika kamu menggunakan HP Android dan ingin melakukan inspect element, ada dua cara yang bisa kamu coba.

Cara Inspect Element di HP Android

Banyak tutorial kami yang berkaitan dengan Android, seperti cara menyambungkan CCTV ke HP Android yang tentu bisa menjadi lifehack kamu.

Namun, karena sekarang topiknya adalah inspect element, maka berikut ini kami sediakan panduannya yang dapat dilakukan di Android dengan aplikasi maupun tanpa aplikasi.

1. Cara Inspect Element Android tanpa Aplikasi

Untuk memulai cara Inspect Element Google Chrome Android, masuk ke Google Chrome di HP Android kamu;

1. Buka website yang ingin kamu lakukan inspect element-nya;
2. Jika sudah, masukkan kata “view-source:” di bagian awal link URL web;
3. Contohnya seperti “view-source:https://pluginongkoskirim.com/”;
4. Tekan tombol Enter untuk melakukan inspect;
5. Selesai, kamu sudah berhasil melakukan inspect element di HP Android.

Bagaimana? Caranya sangat mudahkan? Lebih mudah daripada cara memindahkan kontak dari Android ke iPhone.

Lalu, cara lainnya yakni dengan menggunakan aplikasi. Berikut tutorial lengkapnya:

2. Cara Inspect Element dengan Aplikasi Edit Webpage

Cara menggunakan aplikasi Edit Webpage untukinspect element di HP, kamu perlu mengunduh aplikasinya dulu. Jika belum mengunduh, ikuti langkah berikut:

1. Buka Playstore dan Install aplikasi Edit Webpage;
2. Buka aplikasi jika sudah selesai diinstall;
3. Masukkan link URL halaman website yang ingin dilakukan inspect elements;
4. Ketuk ikon “Edit” di pojok kanan atas;
5. Selesai, kamu sudah berhasil melakukan Inspect Elements menggunakan aplikasi Edit Webpage.

Dengan menggunakan aplikasi itu, kamu juga bisa melihat kode HTML dan CSS yang digunakan pada website tersebut.

Jika kamu sudah menggunakan aplikasi tersebut dan ingin membersihkan pencarian di Play Store tadi, kamu bisa menggunakan cara menghapus history pencarian di Play Store.

Sudah Berhasil Menampilkan Inspect Elements di Google Chrome?

Itulah penjelasan lengkap tentang cara menampilkan inspect elements di Google Chrome yang bisa membantu kamu melihat kode HTML dan CSS dalam website.

Perlu kamu pahami juga, untuk bisa mempraktikannya, perangkat kamu harus sudah terhubung dengan internet, ya!

Apabila belum, kamu bisa membeli paket data atau menghubungkan internet dengan cara mengetahui password WiFi tetangga dengan Android.

Jika ada pendapat, masukan, kritik konstruktif atau saran apapun, bisa kamu sampaikan ke meninggalkan pesan di kolom komentar atau email kami di contact@tonjoo.com.

Baca juga artikel menarik seputar teknologi di Pintar Tekno yang terkait dengan Berita, Internet, Windowsatau artikel lainnya dari Moch. Nasikhun Amin. Untuk informasi lebih lanjut atau kebutuhan lainnya, kamu bisa menghubungi kami melalui admin@pintartekno.id.

Sumber:

• How to Inspect Element in Chrome – https://www.browserstack.com/guide/inspect-element-in-chrome#:~:text=Alternatively%2C%20you%20can%20use%20the%20Chrome%20inspect%20element%20shortcut%20Key.&text=Windows%20%E2%80%93%20Control%20%2B%20Shift%20%2B%20C.
• How to Use Inspect Element in Chrome, Safari, and Firefox – https://blog.hubspot.com/website/how-to-inspect