Cara Mudah Melihat Struktur Dokumen dengan Firefox

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

Bagi Anda yang ingin belajar Html dan CSS, sangat penting sekali mengetahui bagaimana suatu halaman dibentuk. Karena, hal ini sangat berhubungan erat dengan bagaimana membuat suatu style CSS dari halaman tersebut. Ada banyak sekali tools yang bisa digunakan. Pada tulisan kali ini, saya akan menunjukkan bagaimana cara melihat struktur dokumen dengan menggunakan Firefox.
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:

Halaman Utama BisaKomputer.com

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>.

Klik Kanan dan Pilih Inspect Element

Hasilnya akan tampil seperti berikut:

Tampilan setelah Inspect Elemen

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.

Beberapa Pilihan Mode

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.

Tampilan 3D View

Gambar [5] digunakan untuk menampilkan seperti apa style CSS dari element yang terpilih.

Tampilan Mode Style and Markup Panel

Kini, menjadi web developer sudah cukup mudah. Cukup banyak tool dan tutorial yang siap membantu. Saatnya kita semua berkibar di dunia internasional. Selamat Mencoba