Firefox 11 menambahkan dua alat pengembang web baru ke Persenjataan Firefox sudah mengesankan . Fitur Tilt memvisualisasikan struktur situs web dalam 3D, sedangkan Editor Gaya dapat mengedit lembar gaya CSS dengan cepat.
Fitur 3D, yang dikenal sebagai Tilt, adalah cara untuk memvisualisasikan DOM situs web. Ini terintegrasi dengan Pemeriksa Dokumen 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 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 di elemen tertentu.
Klik tombol "3D" pada bilah alat inspektur.
Anda akan melihat struktur halaman setelah mengaktifkan mode 3D, tetapi akan terlihat datar sampai Anda memutarnya.
Putar model dengan mengklik kiri, gerakkan gambar dengan mengklik kanan, dan perbesar dan perkecil menggunakan roda mouse.
Tampilan ini terintegrasi dengan alat lain di inspektur. Jika Anda membuka panel HTML atau Gaya, Anda dapat mengklik elemen di halaman hte untuk melihat kode HTML atau properti CSS elemen tersebut.
Lebih Banyak Fitur 3D
Fitur visualisasi 3D didasarkan pada ekstensi Tilt, tetapi tidak memiliki semua fitur dari ekstensi Tilt. jika Anda ingin menyesuaikan warna atau bahkan mengekspor visualisasi sebagai file model 3D untuk digunakan dengan program pengeditan 3D, Anda perlu memasang Add-on Miringkan 3D . Setelah Anda melakukannya, Anda akan mendapatkan opsi "Miring" 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.
Editor Gaya CSS
Untuk melihat dan mengedit lembar gaya CSS halaman, buka Editor Gaya dari menu Pengembang Web.
Editor Gaya mencantumkan stylesheet di halaman saat ini. Nyalakan atau matikan stylesheet dengan mengklik ikon mata di sebelah kiri nama stylesheet. Edit lembar gaya dengan memilihnya dan mengubah kodenya.
Perubahan segera terlihat di halaman. Jika Anda menonaktifkan lembar gaya, 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 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 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 memodifikasi halaman web, seperti Firebug.
