Rumahweb Blog

Inspect Element: Manfaat dan Cara Menggunakannya

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?

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 inspect element 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 element. Untuk mengembalikan ke keadaan semula, Anda cukup melakukan refresh halaman website-nya dan semua akan kembali seperti semula.

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.

gambar 1 - Inspect Element Manfaat dan Cara Menggunakannya

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.

gambar 2 - Inspect Element Manfaat dan Cara Menggunakannya

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.

gambar 3 - Inspect Element Manfaat dan Cara Menggunakannya

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 inspect element, 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.

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

Cara menggunakan Inspect Element Chrome

  1. Buka browser Chrome, kemudian ketikkan alamat website hendak dicek.
  2. 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.
  3. 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 menggunakan Inspect Element Firefox

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

  1. Buka alamat website yang akan Anda cek menggunakan browser Firefox.
  2. Klik kanan >> Inspect Element (Q).

Selanjutnya Anda bisa melakukan pengecekan dan manipulasi tampilan melalui tools tersebut.

Kesimpulan

Inspect element merupakan 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.

Berikan Komentar

Anggit Puguh