Cara Mudah Melihat Struktur Dokumen dengan Firefox

Cara Mudah Melihat Struktur Dokumen dengan Firefox

Tutorial Information

ProgramFirefox
Version14 and above
DifficultyPemula
Estimated Time15 Menit
DownloadClick this link

Bagi Anda yang ingin belajar Html dan CSS, sangat penting sekali mengetahui bagaimana suatu halaman dibentuk. Karena, hal ini sangat berhubungan erat dengan bagaimana…

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

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

klik kanan dan pilih elemen

Klik Kanan dan Pilih Inspect Element

Hasilnya akan tampil seperti berikut:

Tampilan sesudah Inspect Elemen

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

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.

3d View

Tampilan 3D View

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

Mode style and markup panel

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 :)

Tag: , , , , ,

2 Comments

Leave Comment
  1. Cassie says:

    Your posting really stnhigatered me out. Thanks!

  2. I don't know you, and I've only just come across you here, and still I cry for your heartache. I hope you know that even us strangers out here really care, and will be sending you strength to get through this. I am so so very sorry for your loss, and I wish there were something I could do besides type those same old words you've read a hundred times.

Write Comment

Your email will not be published. The marked label is required.