Inspect Element: Manfaat dan Cara Menggunakannya
Inspect Element – Terciptanya tampilan halaman website yang ciamik, tidak terlepas dari script-script penyusun yang ada di belakang layarnya. Saat Anda menjumpai halaman website yang keren, Anda bisa saja meniru tampilannya. Caranya mudah, yaitu dengan memanfaatkan inspect element bawaan dari browser. Lalu, apa saja manfaat dan bagaimana cara menggunakannya di browser?
Apa itu Inspect Element?
Inspect element adalah senjata rahasia profesional web. Para pembuat atau desainer website, sering menggunakannya untuk memperbaiki bug, menyesuaikan antarmuka web yang dibangun, dan juga digunakan untuk mengintip balik layar web pesaing. Dengan menggunakan tools ini memungkinkan Anda untuk melihat script HTML dan CSS yang membentuk halaman web tersebut. Anda bisa juga bereksperimen dengan mengubah konten website secara temporary, misalnya mengubah warna background, jenis font, ataupun tata letaknya menggunakan inspect. Untuk mengembalikan ke keadaan semula, Anda cukup melakukan refresh halaman website-nya dan semua akan kembali seperti semula. Manfaat Inspect Element Lebih lanjut, berikut ini adalah manfaat-manfaat lainnya dari inspect element. 1. Untuk Mengolah Tampilan Website/ CSS Ketika Anda ingin melakukan penyesuaian pada tampilan website yang Anda miliki, khususnya pada code CSS, Anda bisa memanfaatkan tools ini.
Dengan menggunakannya browser, akan langsung mengeksekusinya dan menyajikan tampilan sesuai kode Anda. Fitur ini akan memudahkan Anda dalam menggunakan fitur-fitur seperti autocomplete, filter, color picker, visual model box, dan lainnya. Tampilan yang disajikan bersifat sementara, dan akan kembali ke tampilan asli ketika Anda refresh browser-nya. Maka, ketika sudah menemukan kode CSS yang pas, tinggal menyalin kodenya ke script CSS website Anda.
2. Uji Coba Tampilan Responsif
Inspect element juga digunakan untuk menentukan tampilan website Anda di versi mobile ataupun tab. Apabila ada tampilan yang kurang berkenan, Anda bisa menyesuaikan kode CSS-nya hingga memperoleh tampilan yang diinginkan.
3. Mengukur Kecepatan Website
Melalui tab Network, Anda bisa mengetahui seberapa lama halaman website dibuka oleh browser. Besarnya ukuran file yang di-download oleh browser akan membuat halaman web lebih lama untuk dibuka. Melalui tab Network ini Anda juga bisa mengetahui kecepatan akses halaman web tersebut.
4. Debugging Javascript
Anda bisa memantau bila ada error code Javascript dengan menggunakan inspect element. Melalui tab “Console” Anda akan mengetahui letak error-nya, dan bisa langsung melakukan perbaikan. Tanpa tools ini, maka saat terjadi error code Javascript tampilan browser yang sering kali ditemui adalah tampilan halaman kosong saja.
5. Audit Web
Di Google Chrome, Anda bisa temukan fitur ini di tab Audit. Tab Audit digunakan untuk mengetahui resource apa saja yang digunakan dan tidak digunakan oleh website Anda. Dengannya, kita bisa melakukan optimasi kinerja website.
6. Mengukur Performa Memori dan CPU
Anda bisa mengukur performa memori dan CPU halaman website ketika dibuka melalui menu Timelin jika Anda pengguna Google Chrome, dan melalui menu Performance untuk Anda pengguna Firefox.
Cara Menggunakan Inspect Element
Setelah mengetahui manfaat yang bisa didapatkan dari inspect element, berikut adalah penjelasan cara menggunakannya melalui browser.
Cara Inspect Element Chrome
- Buka browser Chrome, kemudian ketikkan alamat website hendak dicek.
- Klik kanan, kemudian pilih Inspect. Ada juga cara pintas untuk membukanya, yaitu gunakan Control + Shift + C untuk Anda pengguna Windows, dan gunakan Command + Option + C untuk pengguna Mac.
- Selanjutnya, Anda bisa klik tab kotak elemen sesuai dengan kebutuhan. Anda juga bisa mengubah tampilan kotak editor seperti dibagian kanan, kiri, bawah ataupun membuka dengan halaman sendiri, dengan cara klik titik tiga pada bagian kanan menu inspect.
