Cara Menggunakan Alat Pengembang Web Firefox untuk Melihat Struktur Situs Web dalam 3D
Firefox 11 menambahkan dua alat pengembang web baru ke gudang Firefox yang sudah mengesankan. Fitur Tilt memvisualisasikan struktur situs web dalam 3D, sedangkan Style Editor dapat mengedit stylesheet CSS dengan cepat.
Fitur 3D, yang dikenal sebagai Tilt, adalah cara memvisualisasikan DOM situs web. Ini terintegrasi dengan Document Inspector yang ada dan menggunakan WebGL untuk menampilkan grafik 3D yang kaya di browser Anda.
Tilt - Visualisasi Situs Web 3D
Anda dapat mengakses Tilt dari dalam Inspektur Halaman Firefox. Untuk memulai, buka Page Inspector dengan memilih "Inspect" dari menu Web Developer. Anda juga dapat mengklik kanan di halaman saat ini dan memilih "Elemen Inspeksi" untuk memulai inspektur pada elemen tertentu.
Klik tombol "3D" pada bilah alat inspektur.
Anda akan melihat struktur halaman setelah mengaktifkan mode 3D, tetapi akan terlihat rata sampai Anda memutarnya.
Putar model dengan mengklik kiri, pindahkan gambar ke sekitar dengan mengklik kanan, dan memperbesar dan memperkecil menggunakan roda mouse.
Pandangan ini terintegrasi dengan alat-alat lain di inspektur. Jika Anda memiliki panel HTML atau Style terbuka, Anda dapat mengklik elemen pada halaman hte untuk melihat kode HTML atau properti CSS elemen itu.
Lebih Banyak Fitur 3D
Fitur visualisasi 3D didasarkan pada ekstensi Tilt, tetapi tidak memiliki semua fitur ekstensi Tilt. jika Anda ingin menyesuaikan warna atau bahkan mengekspor visualisasi sebagai file model 3D untuk digunakan dengan program pengeditan 3D, Anda harus menginstal add-on Tilt 3D. Setelah melakukannya, Anda akan mendapatkan opsi "Tilt" baru di menu Pengembang Web.
Klik tombol Batal untuk menggunakan versi Tilt yang lama saat diminta.
Anda akan menemukan kontrol untuk menyesuaikan visualisasi di sisi kiri jendela dan opsi lain, termasuk fitur ekspor, di bagian atas halaman.
Editor Gaya CSS
Untuk melihat dan mengedit lembar gaya CSS halaman, buka Editor Gaya dari menu Pengembang Web.
Editor Gaya mencantumkan lembar gaya pada halaman saat ini. Mengaktifkan atau menonaktifkan stylesheet dengan mengklik ikon mata di sebelah kiri nama stylesheet. Edit lembar gaya dengan memilihnya dan memodifikasi kode.
Perubahan segera tercermin pada halaman. Jika Anda menonaktifkan lembar gaya, halaman akan kehilangan informasi gayanya. Jika Anda mengedit lembar gaya, Anda akan melihat hasil edit muncul di halaman saat Anda mengetik.
Anda dapat menyimpan salinan salah satu lembar gaya ke komputer Anda, mengimpor lembar gaya yang ada dari komputer Anda, atau menambahkan lembar gaya kosong baru dengan tautan Simpan, Impor, atau Baru di jendela Editor Gaya.
Fitur visualisasi 3D mengawasi perubahan pada halaman saat ini dan pemberitahuan ketika perubahan terjadi. Saat Anda menggunakan Editor Gaya dengan inspektur 3D terbuka, perubahan Anda akan segera tercermin dalam tampilan 3D. Ini juga berfungsi dengan ekstensi pihak ketiga yang memodifikasi halaman web, seperti Firebug.
