Apakah Anda tahu bahwa ada fitur super keren pada browser Anda yang bernama inspect element. Atau bahkan mungkin Anda juga penasaran bagaimana cara inspect element pada browser Anda.
Dengan adanya fitur ini, Anda dapat memeriksa beragam elemen “tak kasat mata” pada suatu website. Hal lain yang menarik ialah cara untuk inspect element ini sangat mudah dan bisa langsung Anda praktekkan sambil mengikuti artikel kali ini. Penasaran? Tak perlu berlama-lama lagi, ikuti terus!
Apa Inspect Element Itu?
Inspect element merupakan fitur pada browser yang memungkinkan Anda memeriksa kode HTML serta CSS di suatu website. Hal ini berarti Anda dapat mengetahui beragam kode warna yang ada pada suatu website, jenis font dan ikon yang digunakan, serta masih banyak hal lainnya.
Sebagai contoh seperti ini cara inspect element dari suatu website. Di sisi kanan, terlihat barisan kode yang membentuk halaman dari website tersebut.
Tak hanya sebatas menampilkan kode, inspect element juga memungkinkan Anda dalam mengubah sementara seluruh kode HTML dan CSS pada halaman tersebut.
Dalam hal ini, Anda bebas untuk mengutak-atik tampilannya seperti mengganti teks, mengganti warna, menghapus gambar, dan lain-lain.
Akan tetapi sebelum Anda mengubah-ubah kode, tentu Anda perlu memahami dasar HTML dan CSS. Dengan begitu Anda dapat mengetahui perubahan yang Anda lakukan, mengingat fitur ubah inspect element ini sebenarnya ditujukan bagi web developer.
Perubahan yang dilakukan oleh Anda akan ditampilkan pada browser Anda secara real-time. Namun perubahan ini tak berpengaruh pada tampilan aslinya sebab hanya berlaku di halaman website yang tengah Anda buka.
Dengan demikian, ketika Anda me-refresh ataupun menutup browser sesudah melakukan perubahan pada inspect element, tampilan dari website tersebut pun nantinya kembali normal.
Fungsi dari Inspect Element
Tak hanya berguna untuk melihat beragam elemen di balik layar website, cara inspect element juga memiliki fungsi lainnya. Berikut pembahasan selengkapnya.
- Edit website. Web developer dapat melihat bagaimana perubahan pada desain website sebelum melakukannya secara permanen.
- Melakukan audit kode. Developer juga dapat mengecek kode atau link yang rusak pada halaman website.
- Berlatih coding. Untuk Anda yang tengah mempelajari coding, Anda dapat melakukan praktek tanpa perlu khawatir terhadap kesalahan yang mungkin dilakukan. Tak hanya itu, Anda pun dapat melihat hasilnya secara langsung.
- Melakukan riset keyword. Anda dapat melihat keyword (kata kunci) SEO apa yang digunakan oleh kompetitor pada halaman website mereka.
- Mencari inspirasi untuk desain. Mengetahui kode warna atau jenis font yang digunakan pada website tertentu dalam mencari inspirasi untuk desain yang menarik.
- Menjaga privasi. Anda dapat menyembunyikan info rahasia atau info pribadi ketika mengambil screenshot untuk membagikannya pada orang lain.
Cara Untuk Inspect Element
Terdapat dua cara inspect element praktis yang dapat Anda coba. Pertama, klik kanan di halaman website yang terbuka, kemudian pilih “Inspect”. Kedua, menggunakan shortcut inspect element dengan keyboard Anda yaitu dengan menekan tombol F12.
Kedua cara itu berlaku untuk browser Google Chrome, Opera, Mozilla Firefox, Brave, serta Microsoft Edge. Berikutnya, halaman inspect element pun akan terbuka dan menampilkan panel dengan beragam pengaturan. Pengaturan yang utama diantaranya:
- Panel DOM, merupakan panel yang fungsinya untuk melihat serta mengubah elemen HTML.
- Panel CSS, merupakan panel yang fungsinya untuk melihat serta mengubah kode CSS. Pada panel ini, Anda dapat mengubah tampilan halaman seperti warna, font, margin, dan lain-lain.
- Panel Console, merupakan panel yang isinya log (catatan) status kode pada halaman website.
Bila panel ini tak muncul secara otomatis, Anda bisa klik menu tiga titik lalu pilih “Show Console Drawer”.
Kemudian, hal apa saja yang dapat Anda lakukan ketika menerapkan cara inspect element?
1. Mencari kode tertentu
Saat ingin mencari kode yang dipakai pada suatu website dengan mudah, Anda bisa pilih tombol tiga titik di kanan atas lalu pilih Search. Contoh, Anda ingin mencari semua kode warna yang digunakan, Anda bisa mengetikkan “color” pada kolom, nantinya muncul seluruh kode warna yang digunakan pada halaman tersebut.
2. Mengganti teks
Untuk mengganti teks ataupun elemen lainnya, klik terlebih dahulu ikon kursor di panel DOM, lalu pilih teks yang ingin Anda ganti pada halaman website tersebut. Berikutnya, klik dua kali di halaman elemen serta ketik teks yang baru, lalu tekan Enter. Saat ini teks pada halaman telah berubah sesuai dengan keinginan Anda.
3. Mengganti gambar
Pilih ikon kursor pada panel DOM. Kemudian pilih gambar yang ingin diubah oleh Anda pada halaman website tersebut. Kemudian klik dua kali link sesudah srcset pada cara inspect elementAnda.
Berikutnya masukkan link gambar yang baru dan tekan tombol Enter. Sebagai hasilnya, gambar sebelumnya akan digantikan oleh gambar terbaru.
4. Mengganti warna
Mengubah peraturan di panel CSS harus Anda lakukan untuk mengganti warna. Caranya Anda bisa pilih bagian yang ingin diubah warnanya oleh Anda. Caranya di tab Styles pada panel CSS, cari baris kode yang sesuai.
Contohnya klik di kotak berwarna, kemudian pilihlah warna yang Anda suka pada palette yang tersedia. Warna pada bagian itu pun telah berubah sesuai dengan warna yang Anda pilih.
5. Mengganti font
Mengganti font juga menggunakan panel CSS di inspect element. Caranya pilih teks yang ingin diubah font-nya. Lakukan pencarian baris kode font family tab Styles pada panel CSS. Klik dua kali di nama font pada samping font family. Kemudian masukkan nama font pilihan Anda, tekan Enter.
Nantinya Anda bisa melihat font pada website itu telah berubah, selama font pengganti telah terinstall pada komputer Anda.
6. Debugging JavaScript
Cara inspect element juga bisa digunakan untuk mengecek log (catatan) status kode pada suatu website. Hal ini penting bila Anda ingin melakukan debugging JavaScript karena Anda akan memperoleh informasi bila terjadi error.
7. Mengecek website responsif
Tak hanya mengecek dan mengubah elemen website, Anda pun dapat menguji apakah website itu sudah responsif. Caranya Anda bisa pilih ikon device guna beralih dari menu desktop pada mobile atau sebaliknya. Jika tambilan pada versi mobile tampak baik, berarti website Anda telah mobile responsive.
Mencoba Inspect Element
Nyatanya, inspect element ini sangat keren bukan? Fitur satu ini memungkinkan Anda melihat kode di suatu website. Caranya juga cukup gampang, hanya dengan klik kanan pada halaman website yang tengah dikunjungi, kemudian klik Inspect.
