Pengertian, Manfaat dan Fungsi Inspect Element

Pengertian Inspect Element

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

Perubahan yang bisa dilakukan oleh inspect element tool ini hanya bersifat sementara. Jadi tidak perlu khawatir akan merusak desain dan konten dari website tersebut saat menggunakan alat ini. Walaupun sebenarnya inspect element tool tersedia di semua browser populer, disini akan membahas tool yang dimiliki oleh Google Chrome.

Manfaat Inspect Element Chrome

Ada banyak manfaat yang bisa didapatkan dari inspect element tool chrome, diantaranya :

• Temporary changes

Bisa menggunakan alat ini untuk membuat perubahan yang bersifat sementara pada sebuah halaman website. Fitur ini bisa memudahkan web designer dalam perencanaan design.

• Hide personal details

Bisa menggunakan inspect element tool untuk menyembunyikan informasi personal yang ada di halaman web saat mengambil tangkapan layar. Fitur ini akan sangat membantu blogger dan content writers.

• Diagnose bugs and broken links

Jika seorang web developer bisa menggunakan alat ini untuk menemukan link yang rusak dan menemukan bugs pada website yang sedang dikerjakan.

• Find hidden items

Bisa menggunakan alat ini untuk menemukan konten tersembunyi di dalam halaman website. Fitur ini sangat berguna untuk digital marketer dalam mencari keywords atau kata kunci tersembunyi dari sebuah blog.

• Coding experiment

Jika tertarik untuk belajar coding HTML dan CSS, alat ini bisa menjadi sarana eksperimen. Tidak perlu khawatir melakukan untuk kesalahan karena semua perubahan akan hilang setelah memencet tombol refresh pada browser.

Fungsi Inspect Element

Selain berguna untuk melihat berbagai elemen di balik layar website, inspect element juga mempunyai fungsi lain. 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 yang sedang belajar coding bisa praktek tanpa perlu khawatir melakukan kesalahan. Selain itu juga bisa melihat langsung hasilnya.

• Melakukan Riset Kata Kunci

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 tertarik.

• Menjaga Privasi

Bisa menyembunyikan info pribadi atau info rahasia saat mengambil screenshoot untuk dibagikan ke orang lain.

Alasan Harus Menggunakan Inspect Element

Jika tidak pernah mengintip kode situs web karena penasaran mungkin bertanya-tanya mengapa harus belajar cara menggunakan Inspect Element.

• Desainer

Ingin melihat dulu bagaimana desain situs akan terlihat di seluler? Atau ingin melihat bagaimana warna hijau yang berbeda akan terlihat pada tombol pendaftaran? dapat melakukan keduanya dalam detik dengan Inspect Element.

• Pemasar

Ingin tahu kata kunci apa yang digunakan pesaing dalam tajuk situs mereka, atau ingin melihat apakah pemuatan situs terlalu lambat untuk uji PageSpeed Google? Inspect Element dapat menunjukkan keduanya.

• Penulis

Lelah mengaburkan nama dan email di tangkapan layar? Dengan Inspect Element dapat mengubah teks apa pun di laman web dalam sedetik.

• Agen Pendukung

Perlu cara yang lebih baik untuk memberi tahu pengembang apa yang perlu diperbaiki di situs? Inspect Element memungkinkan untuk membuat contoh perubahan cepat untuk menunjukkan apa yang dibicarakan.

Cara Menggunakan Inspect Element

Setelah mengetahui manfaat yang bisa didapatkan dari inspect element, berikut adalah penjelasan menggunakan melalui browser.

1. Cara Inspect Element Chrome

• Untuk coba kode html

Ini yang paling basic dan sering digunakan untuk screenshoot terus upload di sosmed.

• • Pergi ke page atau halaman web yang diinginkan, disini misal ke trending youtube indonesia.
  • Klik kanan di bagian yang diinginkan, terus pilih inspect element. Atau gunakan CTRL + SHIFT + I (Windows) dan Command + OPTION + I (MacOs).
  • Selanjutnya edit sesuai yang diinginkan.
  • Jika sudah Enter dan selesai.
• Untuk coba kode CSS

Berikut merupakan cara inspect element dengan kode CSS, yaitu :

• • Tekan tombol CTRL + SHIFT + I atau bisa langsung dengan F12 pada keyboard.
  • Selain itu juga bisa klik kanan pada halaman yang akan tampil. Nantinya akan melihat menu bertuliskan inspect lalu klik.
  • Setelah itu akan melihat tampilan yang mana diharuskan untuk melakukan pengaturan tampilan tombol dengan CSS. Bisa memilih tombol seleksi, yang akan berada pada jendela seleksi elemen. Untuk memudahkan bisa menggunakan cara rumus di keyboard dengan CTRL+SHFT+C. Lalu pilihlah this is button dan lanjutkan proses.
  • Setelah selesai bisa menambahkan sebuah style rule yang diinginkan. Bisa menambahkannya dengan cara klik ikon tambah yang mana berada di bagian kanan. Lalu nantinya akan muncul style rule CSS. Untuk itu bisa menambahkan class dengan kode CSS.
  • Lalu bisa mengetik sendiri bagaimana style yang diinginkan. Namun ingat, jangan untuk melakukan copy paste.
  • Setelah itu akan melihat kotak yang mana memiliki warna dan juga memiliki kode yang dapat digunakan. Kotak tersebut juga mencakup background dan juga warna. Bisa memilih kotak tersebut, untuk yang ingin mengganti warna yang diinginkan dan sesuai dengan yang disukai.
  • Nantinya juga akan muncul kotak color picker, yang mana bisa memilih warna lain yang diinginkan dan berasal dari halaman web yang ada. Cara ini dapat di lakukan dengan mengarahkan langsung kursor, pada objek yang memiliki warna. Klik warna tersebut untuk dapat menggunakannya.
  • Untuk yang ingin mengatur dimana letak jendela inspeksi berada, bisa klik option, lalu nantinya di bagian kanan akan ada tombol close. Dalam hal ini dapat memilih jenis tampilan apapun yang diinginkan.
  • Lalu dapat dengan bebas, menyalin kode CSS yang ada dan telah dibuat, dengan hanya klik bagian inspector stylesheer dan nantinya akan langsung di tampilkan kode CSS.

2. Cara Inspect Element Firefox

Cara penggunaan pada browser Firefox hampir dengan dengan Google Chrome, yaitu :

• Buka alamat website yang akan dicek menggunakan browser Firefox.
• Klik kanan >> Inspect Element (Q).