Mirza M. Haekal Mirza is a member of SEO Team at Niagahoster. He loves to learn something new everyday.

Cara Inspect Element Praktis [Tercepat dan Terlengkap]

4 min read

Staging WordPress di CyberPanel

Tahukah Anda kalau ada fitur super keren di browser Anda bernama inspect element

Dengan fitur ini, Anda bisa memeriksa berbagai elemen “tak kasat mata” dari sebuah website. Menariknya lagi, cara inspect element ini sangat mudah dan langsung bisa Anda praktekkan sembari membaca artikel ini, lho. 

Wah, penasaran, kan? Tanpa berlama-lama lagi, yuk mulai!

Apa Itu Inspect Element?

Inspect element adalah fitur browser yang memungkinkan Anda untuk memeriksa kode HTML dan CSS pada suatu website. Artinya, Anda bisa mengetahui berbagai kode warna yang digunakan website tersebut, jenis font atau ikon yang dipakai, dan masih banyak lainnya.

Contohnya seperti ini bila Anda melakukan inspect element pada blog Niagahoster:

contoh inspect element pada blog Niagahoster

Pada sisi sebelah kanan, tampak barisan kode yang membentuk halaman website tersebut. 

Nah, tak berhenti pada menampilkan kode saja, inspect element juga memungkinkan Anda untuk mengubah sementara semua kode HTML dan CSS di halaman tersebut. Dengan kata lain, Anda bebas mengutak-atik tampilannya. Mulai dari mengganti warna, mengganti teks, menghapus gambar, dan lainnya.

Namun, sebelum mengubah-ubah kodenya, Anda tentu perlu paham dasar HTML maupun CSS ya! Jadi, bisa tahu perubahan apa yang dilakukan. Sebab, fitur mengubah inspect element ini sebenarnya ditujukan untuk web developer.

Oh ya, perubahan yang Anda lakukan akan ditampilkan secara real-time pada browser Anda.

Akan tetapi, perubahan tersebut tak mempengaruhi tampilan aslinya karena hanya berlaku pada halaman website yang sedang Anda buka. Jadi, saat Anda me-refresh atau menutup browser setelah perubahan pada inspect element, tampilan website tersebut akan kembali normal.

Fungsi Inspect Element

Selain berguna untuk melihat berbagai elemen di balik layar website, inspect element juga mempunyai fungsi lain, lho. Berikut daftar lengkapnya:

  • Mengedit Website — Developer bisa melihat bagaimana perubahan desain website sebelum menerapkannya secara permanen.
  • Melakukan Audit Kode — Developer juga bisa mengecek link atau kode yang rusak pada halaman tersebut.
  • Berlatih  Coding — Bagi Anda yang sedang belajar coding, Anda bisa praktek tanpa perlu khawatir melakukan kesalahan. Plus, Anda juga bisa melihat langsung hasilnya.
  • Melakukan Riset Kata Kunci Anda bisa melihat kata kunci SEO apa yang dipakai oleh kompetitor di halaman mereka.
  • Mencari Inspirasi Desain Mengetahui jenis font atau kode warna yang dipakai di website tertentu yang membuat Anda tertarik.
  • Menjaga Privasi Anda bisa menyembunyikan info pribadi atau info rahasia saat mengambil screenshot untuk dibagikan ke orang lain.

Manfaat Inspect Element

Manfaat inspect element adalah untuk memastikan tampilan website sudah optimal. Lebih lengkapnya lagi, ini dia manfaat inspect element:

  • Melihat dan menyesuaikan tampilan website;
  • Memastikan website sudah responsive;
  • Mengukur kecepatan halaman website pada tab Network;
  • Mengetahui error code JavaScript (debugging JavaScript) lewat tab Console;
  • Mengukur performa memori dan CPU halaman website.

Cara Inspect Element

Ada dua cara menggunakan Chrome inspect element praktis yang bisa Anda coba. Pertama, klik kanan pada halaman website yang terbuka, lalu klik Inspect. Kedua, gunakan shortcut inspect element dengan menekan tombol F12 di keyboard Anda.

cara inspect element melalui klik kanan di halaman website

Kedua cara menggunakan Chrome Inspect Element tersebut berlaku untuk browser Google Chrome, Mozilla Firefox, Opera, Brave, dan Microsoft Edge. 

Setelah itu, halaman inspect element akan terbuka dan menunjukkan panel dengan berbagai pengaturan. Namun yang utama adalah:

  • Panel‌ ‌DOM‌ —‌ ‌ ‌panel ‌yang‌ ‌berfungsi‌ ‌untuk‌ ‌melihat‌ ‌dan‌ ‌mengubah‌ ‌elemen‌‌ HTML.‌ ‌
  • Panel‌ ‌CSS‌ —‌ ‌ ‌panel yang ‌berfungsi‌ ‌untuk‌ ‌melihat‌ ‌dan‌ ‌mengubah‌‌ kode‌ ‌CSS.‌ ‌Di‌ ‌sini,‌ ‌Anda‌ ‌bisa‌ ‌mengubah‌ ‌tampilan‌ ‌halaman‌ ‌seperti‌ ‌font,‌ ‌warna,‌ ‌margin,‌‌ dan‌ ‌semacamnya.‌ ‌
  • Panel‌ ‌Console‌ —‌ ‌panel yang berisi ‌catatan‌ ‌(log)‌ ‌status‌ ‌kode‌ ‌di‌ ‌halaman‌ ‌tersebut.‌ Kalau panel ini tidak muncul otomatis, Anda bisa klik tombol tiga titik dan pilih Show Console Drawer.
tiga panel yang ada di inspect element

Lalu, apa saja yang bisa Anda lakukan saat inspect element?

Mencari‌ ‌Kode‌ ‌Tertentu‌ ‌

Ketika ingin mencari kode yang digunakan di sebuah website dengan mudah, Anda cukup klik tombol tiga titik di kanan atas dan pilih Search seperti gambar di bawah:

mencari kode tertentu dengan inspect element

Sebagai contoh, Anda ingin mencari semua kode warna yang dipakai. Anda ketikkan saja “color” di kolom, maka akan muncul semua kode warna yang digunakan di halaman tersebut.

Mengganti Teks

Untuk mengganti teks atau elemen lain, klik dulu ikon kursor pada panel DOM:

Kemudian, pilih teks yang ingin diganti di halaman website tersebut. Setelah itu, klik dua kali pada halaman elemen dan ketikkan teks yang baru. Kemudian tekan Enter.

Sekarang, teks di halaman sudah berubah sesuai keinginan Anda.

Mengganti Gambar

Klik ikon kursor di panel DOM. Lalu, klik gambar yang ingin Anda ubah di halaman websitenya. Sebagai contoh, kami akan mengubah gambar di bawah ini:

Klik dua kali link setelah srcset di inspect element Anda. Lalu, masukkan URL gambar yang baru dan tekan tombol Enter.

Hasilnya, gambar sebelumnya akan tergantikan dengan gambar terbaru.

Mengganti Warna

Untuk mengganti warna, Anda perlu melakukan perubahan pada panel CSS. Caranya, Anda bisa klik bagian yang ingin Anda ubah warnanya. Sebagai contoh, kami akan mengubah button CTA ini menjadi merah.

Langkahnya, pada tab Styles di Panel CSS, carilah baris kode yang sesuai. Misalnya, seperti ini:

Klik pada kotak berwarna, lalu pilih warna yang Anda suka dari palette yang disediakan.

Voila, warna di bagian tersebut sudah berubah sesuai dengan pilihan warna Anda.

Mengganti Font

Penggantian font juga memanfaatkan panel CSS pada inspect element. Caranya, klik teks yang ingin Anda ubah font-nya. Sebagai contoh, kami akan mengubah font dari judul artikel di bawah ini:

Lakukan pencarian baris kode font-family tab Styles di Panel CSS seperti ini:

Klik dua kali pada nama font di samping font-family. Lalu, masukkan nama font pilihan Anda, dan tekan tombol Enter.

Anda akan melihat font di website tersebut berubah, selama font pengganti sudah terinstall di komputer Anda. 

Debugging JavaScript

Inspect element juga bermanfaat untuk melakukan pengecekan pada catatan (log) status kode di halaman tersebut. Hal ini penting kalau Anda ingin melakukan debugging JavaScript. Sebab, Anda akan mendapatkan informasi kalau ada error yang terjadi.

Melakukan Pengecekan Website Responsif

Selain pengecekan dan perubahan pada elemen website, Anda juga bisa menguji apakah website tersebut sudah responsif.

Caranya, Anda bisa klik pada ikon device untuk beralih dari menu desktop ke mobile dan sebaliknya.

Kalau tampilan di versi mobile terlihat baik, berarti website Anda sudah mobile responsive. 

Yuk, Coba Inspect Element Sekarang!

Ternyata, inspect element sangat keren, ya? Fitur ini memungkinkan Anda melihat kode pada sebuah website. 

Caranya pun cukup mudah, Hanya dengan klik kanan di halaman website yang sedang dikunjungi, lalu klik Inspect.

Fitur inspect element juga memiliki banyak manfaat. Mulai dari sebagai sumber inspirasi desain dan performa sebuah website hingga sarana berlatih coding bagi pemula.

Anda juga tak perlu takut website tersebut akan error. Sebab, perubahan yang terjadi hanya di browser Anda saja. Namun, pastikan Anda setidaknya paham dasar-dasar HTML atau CSS supaya tak kebingungan melakukan perubahan, ya!

Tak perlu khawatir, kami memiliki berbagai panduan belajar HTML dan CSS yang lengkap untuk Anda, kok. Ini dia artikel-artikelnya:

Semoga artikel ini bermanfaat bagi Anda. Jika Anda memiliki pertanyaan terkait inspect element, Anda bisa menuliskannya di kolom di bawah. Selamat bereksperimen dengan inspect element!

Mirza M. Haekal Mirza is a member of SEO Team at Niagahoster. He loves to learn something new everyday.

Leave a Reply

Your email address will not be published. Required fields are marked *