MEMANFAATKAN INSPECT ELEMENT

Mendesain website terkadang membutuhkan inspirasi tersendiri, ada kalanya ide datang begitu saja namun ada saatnya memang benar-benar tidak mempunyai ide sama sekali. Salah satu hal yang kita lakukan untuk menyegarkan ide adalah mencari referensi pada website lain. Mudah saja bila kemudian sudah mendapat ide dari referensi yang kita lihat. Namun, dalam mendesain website terkadang hal yang gampang2 susah adalah bagaimana code2 yang dituliskan agar membentuk suatu tampilan yang kita inginkan sesuai dengan referensi yang kita rujuk. Solusi dari problem ini adalah melihat codenya secara langsung mungkin dengan cara menyimpan halaman tersebut ke komputer kita kemudian mengoprek-oprek code di dalamnya menggunakan web design tool. Cara lama ini agaknya mempunyai suatu permasalahan karena tidak semua elemen dalam web tersebut kita dapatkan. Misalnya pada sebuah elemen gambar yang digunakan dalam halaman tersebut. Terkadang gambar yang ditampilkan tidak berada dalam code html (<img src=”image”>) namun ditampilkan sebagai background sebuah tag class atau id dalam CSS. Gambar tersebut tidak akan terunduh bersama dengan file yang kita unduh. Ini hanya salah satu kendala mengoprek-oprek desain web dengan cara lama. Hal yang lain adalah mungkin dengan kompleknya code CSS pada halaman tersebut membuat kita lantas malas untuk mengoprek-oprek. Setidaknya inilah yang saya temui saat mendesain sebuah halaman web pada awal mulanya apalagi bagi seorang pemula seperti saya.

Kalau memang hanya ingin tahu bagaimana sang desainer halaman web tersebut menuliskan code untuk menghasilkan tampilan tertentu mengapa sesulit itu cara yang kita lakukan. Tidak adakah cara yang lebih mudah? Tentu saja ada. Dengan menggunakan fasilitas Inspect Element pada browser. Dengan menggunakan fasilitas ini kita dapat melihat struktur code sesuai yang ditampilkan pada halaman web. Namun code yang ditampilkan dalam inspect element tentunya merupakan code2 client-side, meliputi HTML, CSS dan JavaScript. Lantas apa yang akan kita lakukan melalui fasilitas ini. Melalui fasilitas ini kita dapat melihat struktur code sehingga menghasilkan tampilan yang kita lihat dalam browser. Browser2 populer saat ini seperti Mozilla Firefox, Opera, Google Chrome telah menyediakan fasilitas ini. Kecuali Mozilla Firefox, fasilitas ini sudah terdapat secara langsung saat pertama kali menginstal. Khusus Mozilla Firefox, untuk dapat menggunakan inspect element kita harus menambahkan sebuah add-on yaitu Firebug. Selain untuk melihat struktur code dari sebuah halaman, fasilitas ini memungkinkan kita untuk melakukan realtime test misalnya mencoba mengubah sebuah code tertentu atau bahkan menghilangkan code tertentu. Dengan mengubah beberapa code atau menghilangkan code menggunakan fasilitas inspect elemen ini, kita dapat melihat langsung keluaran yang ditampilkan dalam browser. Hal ini sangat membantu tentunya karena dapat memberi kita gambaran apa yang akan terjadi saat mengganti atau bahkan menghilangkan code tersebut.

Inspect Element

So, dengan langkah yang mudah kita dapat sedikit mencuri ide dari orang lain atau mungkin hanya sekedar mereview desain yang kita kerjakan dan ini hanya sebagian kegunaan Inspect Element pada browser. Is there another easy way, Please share it here. Thank You.