Lutfi HanifTerciptanya 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 melihat format CSS atau stylesheet pada websitenya. Inspect element adalah tools yang bisa Anda andalkan untuk melihat script yang berada dalam layar.
Lalu, apa itu Inspect element dan bagaimana cara menggunakan Inspect element di HP dan di laptop? Untuk mengetahui hal tersebut, simak informasi berikut ini.
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.
Cara Inspect Element Chrome di HP Android
- Buka aplikasi chrome pada HP Android yang Anda gunakan
- Akses ke halaman website yang ingin Anda cek inspect
- Tambahkan view-source: di awal link URL websitenya. Contoh view-source:https://rumahweb.com
- Setelah itu tekan enter. Nantinya akan muncul kode script seperti screenshot berikut:
Anda juga bisa menggunakan aplikasi tambahan di Google Play Store untuk mendapatkan tampilan inspect element yang lebih baik.
Cara Inspect Element Firefox
Cara penggunaan pada browser Firefox hampir dengan dengan Google Chrome, yaitu :
- Buka alamat website yang akan Anda cek menggunakan browser Firefox.
- Klik kanan >> Inspect Element (Q).
Selanjutnya Anda bisa melakukan pengecekan dan manipulasi tampilan melalui tools tersebut.
Kesimpulan
Inspect element adalah tools yang sangat bermanfaat dalam menyesuaikan tampilan website. Anda tidak perlu takut dalam bereksperimen dengannya, karena tampilan yang berubah hanyalah tampilan di sisi browser Anda, dan tidak berpengaruh pada script website Anda. Ketika Anda sudah mendapatkan formula yang tepat, baru terapkan ke script website Anda.
