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.
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:
- Belajar HTML Lengkap untuk Pemula
- 25+ Contoh Coding HTML untuk Pemula
- Daftar Kode Warna Pada HTML & CSS
- Apa Perbedaan Inline CSS, Internal CSS, dan External CSS?
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!
The post Cara Inspect Element Praktis [Tercepat dan Terlengkap] appeared first on Niagahoster Blog.
source https://www.niagahoster.co.id/blog/inspect-element/
