Cara Inspect Element Praktis [Tercepat dan Terlengkap]

 

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:

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.

Cara Inspect Element

Ada dua cara 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.

Kedua cara 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.

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:

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.