salah satu keunggulan yang dimiliki oleh browser milik google yaitu chrome...
browser ini memiliki fasilitas inspect element yang berfungsi untuk menelusuri atau mengamati elemen-elemen apa saja yang terdapat dalam website yang sedang berjalan pada browser tersebut.
elemen-elemen yang di maksud di sini adalah elemen interface sebuah halaman web.
Awal kisah saya menulis artikel ini ketika saya ingin mengambil sebuah gambar background pada sebuah web yang menurut saya sangat menarik namun saat itu saya mengalami kendala pada saat ingin mencari source gambar tersebut. saya sudah melihat source halaman tapi hasilnya tetap saja nihil. source gambar tidak di temukan karena tersimpan di dalam file .css yang saat itu tidak menyertakan detail source.
Alhasil dengan fasilitas ini saya bisa mendapatkan gambar idaman saya tersebut.
nah bagaimana cara menggunakannya?
gampang koq... syaratnya cukup mudah saja... cukup dengan menginstal browser chrome di komputer anda... di sarankan supaya menggunakan versi terbaru.
untuk membuka fasilitas ini tinggal klik kanan dalam halaman kemudia pilih inspect element
akan muncul tampilan seperti berikut ini.
- Elements : pada menu elements kita dapat melihat struktur disain dari suatu halaman web yang di tampilkan dalam bentuk script atau kode dimana pada menu ini setiap elemen telah disusun berdasarkan posisi script dan setiap elemen halaman telah dikelompokkan masing2. jelas terlihat struktur desain dari halaman tersebut meskipun tidak sesuai dengan coding asli yang telah di buat oleh programmer.
- Resources : Recources di sini merupakan tampilan detail dari elemen-elemen halaman web seperti gambar dan style CSS yang digunakan (lebih mengarah ke interface web). nah pada menu kita dapat melihat source lengkap dari setiap elemen gambar dalam halaman web. mulai dari gambar background, header, widget, icon, banner, dsb. jika anda berminat untuk mendownload elemen tersebut anda tinggal menuju ke source yang ditunjukkan oleh gambar. kelebihannya adalah pada menu ini setiap gambar dapat di preview secara langsung bahkan resolusi sebenarnya dari gambar tersebut juga akan ditampilkan.
- Scripts : isi menu ini sama saja dengan isi halaman yang muncul pada saat kita melakukan view source pada halaman web.
Semoga artikel ini bisa mempermudah anda dalam melakukan penelusuran elemen-elemen website
Mungkin hanya itu yang saya bisa jelaskan dan mohon maaf apabila kurang jelas...
mohon dikoreksi jika ada kesalahan semoga artikel ini makin sempurna.
Posted in: Tips n Trick
Tidak ada komentar:
Posting Komentar