Firefox 11 menambahkan dua alat pengembang web baru ke arsenal Firefox yang sudah mengesankan. Fitur Tilt memvisualisasikan struktur situs web dalam 3D, sedangkan Editor Gaya dapat mengedit stylesheet CSS dengan cepat.
Fitur 3D, yang dikenal sebagai Tilt, adalah cara memvisualisasikan DOM situs web. Ini terintegrasi dengan Inspektur Dokumen yang ada dan menggunakan WebGL untuk menampilkan grafik 3D yang kaya di browser Anda.
Anda dapat mengakses Tilt dari dalam Page Inspector Firefox. Untuk memulai, buka Page Inspector dengan memilih "Inspect" dari menu Web Developer. Anda juga dapat mengklik kanan di halaman saat ini dan memilih "Inspect Element" untuk memulai inspektur pada elemen tertentu.
Klik tombol "3D" pada bilah alat pengawas.
Anda akan melihat struktur halaman setelah mengaktifkan mode 3D, tetapi akan terlihat rata hingga Anda memutarnya.
Putar model dengan mengklik kiri, gerakkan gambar ke sekeliling dengan mengklik kanan, dan perbesar dan perkecil 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 elemen itu kode HTML atau properti CSS.
Fitur visualisasi 3D didasarkan dari 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 3D kemiringan. Setelah Anda memilikinya, Anda akan mendapatkan opsi "Tilt" baru di menu Pengembang Web.
Klik tombol Batal untuk menggunakan versi lama Tilt saat diminta.
Anda akan menemukan kontrol untuk menyesuaikan visualisasi di sisi kiri jendela dan opsi lainnya, termasuk fitur ekspor, di bagian atas halaman.
Untuk melihat dan mengedit lembar gaya CSS halaman, buka Editor Gaya dari menu Pengembang Web.
Editor Gaya mencantumkan stylesheet pada halaman saat ini. Alihkan stylesheet aktif atau nonaktif dengan mengklik ikon mata di sebelah kiri nama stylesheet. Edit stylesheet dengan memilih dan memodifikasi kode.
Perubahan tercermin pada halaman dengan segera. Jika Anda menonaktifkan stylesheet, halaman akan kehilangan informasi gayanya. Jika Anda mengedit stylesheet, Anda akan melihat hasil edit muncul di halaman saat Anda mengetik.
Anda dapat menyimpan salinan salah satu stylesheet ke komputer Anda, mengimpor stylesheet yang ada dari komputer Anda, atau menambahkan stylesheet kosong baru dengan tautan Simpan, Impor, atau Baru di jendela Style Editor.
Fitur visualisasi 3D memperhatikan perubahan pada halaman saat ini dan pemberitahuan ketika perubahan terjadi. Saat Anda menggunakan Editor Gaya dengan inspektur 3D terbuka, perubahan Anda akan langsung tercermin dalam tampilan 3D. Ini juga berfungsi dengan ekstensi pihak ketiga yang mengubah halaman web, seperti Firebug.
