Di Mozilla banyak fitur baru dan canggih mempermudah web developer.
Informasi Tutorial
Program | Firefox |
Versi | 14 and above |
Tingkat Kesulitan | Pemula |
Estimasi Waktu | 15 Menit |
Download | Klik tautan ini |
Kenapa memakai Firefox? Karena, sejak Firefox memulai melakukan proses rapid development (yang menyebabkan cepatnya versi Firefox naik), banyak sekali fitur-fitur baru dan canggih yang ditujukan untuk mempermudah kerja web developer. Untuk memastikan Anda bisa mengikuti cara yang dijelaskan di tulisan kali ini, ada baiknya kalau Anda terlebih dahulu men-download Firefox versi terbaru. Sampai tulisan ini dibuat, versi terakhir dari Firefox adalah 15.
Berikutnya setelah Firefox versi terbaru sudah ter-install, silahkan buka website yang ingin Anda cek struktur document-nya. Di sini saya menggunakan website BisaKomputer.com sebagai contoh:
Setelah halaman yang dituju terbuka sempurna, langkah berikutnya adalah dengan melihat element yang Anda inginkan dengan cara klik kanan pada element tersebut dan pilih <code>inspect element</code>.
Hasilnya akan tampil seperti berikut:
Beberapa Opsi Mode Inspect Element
Seperti yang terlihat pada gambar di bawah ini, terdapat beberapa opsi yang bisa Anda jalankan, setelah mode inspect element aktif.Gambar [1] akan mengaktifkan mode pencarian element dengan menggunakan mouse. Pada mode ini, anda cukup menggerakkan mouse pada halaman target, untuk melihat seperti apa struktur element tersebut dibuat.
Gambar [2] digunakan untuk menampilkan seperti apa html markup dari element yang kita pilih.
Gambar [3] adalah representasi DOM level dari element yang terpilih.
Gambar [4] ini adalah mode yang paling keren, karena tombol ini akan mengaktifkan mode 3D. Dimana Anda bisa melihat seperti apa representasi DOM dari suatu halaman dalam bentuk tiga dimensi.
Gambar [5] digunakan untuk menampilkan seperti apa style CSS dari element yang terpilih.
Kini, menjadi web developer sudah cukup mudah. Cukup banyak tool dan tutorial yang siap membantu. Saatnya kita semua berkibar di dunia internasional. Selamat Mencoba
0 komentar:
Posting Komentar