Bagaimana Menggunakan Alat Pembangun Web Firefox untuk Lihat Struktur Laman Web dalam 3D

Firefox 11 menambah dua alat pemaju web baru untuk senjata api yang telah mengagumkan Firefox. Ciri Tilt menggambarkan struktur laman web dalam 3D, sementara Editor Gaya boleh mengedit gaya CSS dengan cepat.

Ciri 3D, yang dikenali sebagai Tilt, adalah cara untuk menggambarkan laman web DOM. Ia mengintegrasikan dengan Pemeriksa Dokumen yang sedia ada dan menggunakan WebGL untuk memaparkan grafik 3D yang kaya di pelayar anda.

Tilt - Visualisasi Laman Web 3D

Anda boleh mengakses Tilt dari dalam Inspektor Halaman Firefox. Untuk memulakan, buka Inspektor Halaman dengan memilih "Periksa" dari menu Pembangun Web. Anda juga boleh klik kanan pada halaman semasa dan pilih "Periksa Unsur" untuk memulakan pemeriksa pada elemen tertentu.

Klik butang "3D" pada bar alat pemeriksa.

Anda akan melihat struktur halaman selepas mengaktifkan mod 3D, tetapi akan kelihatan rata sehingga anda memutarkannya.

Putar model dengan klik kiri, gerakkan imej sekitar dengan mengklik kanan, dan zum masuk dan keluar dengan menggunakan roda tetikus.

Pandangan ini disepadukan dengan alat lain dalam pemeriksa. Jika anda mempunyai panel HTML atau Gaya terbuka, anda boleh mengklik elemen pada halaman hte untuk melihat kod HTML elemen atau sifat CSS itu.

Lebih banyak Ciri 3D

Ciri visualisasi 3D didasarkan pada pelanjutan Tilt, tetapi ia tidak mempunyai semua ciri pelanjutan Tilt. jika anda mahu menyesuaikan warna atau mengeksport visualisasi sebagai fail model 3D untuk digunakan dengan program penyuntingan 3D, anda perlu memasang tambahan Tilt 3D. Sebaik sahaja anda ada, anda akan mendapat pilihan "Kecondongan" baru dalam menu Pembangun Web.

Klik butang Batal untuk menggunakan versi lama Tilt apabila digesa.

Anda akan mendapati kawalan untuk menyesuaikan visualisasi di sebelah kiri tetingkap dan pilihan lain, termasuk ciri eksport, di bahagian atas halaman.

Editor Gaya CSS

Untuk melihat dan mengedit helaian CSS CSS halaman, buka Editor Gaya dari menu Pembangun Web.

Editor Gaya menyenaraikan stylesheet pada halaman semasa. Togolkan lembaran gaya pada atau matikan dengan mengklik ikon mata di sebelah kiri nama lembaran gaya. Edit helaian gaya dengan memilih dan mengubah suai kod.

Perubahan dicerminkan pada halaman dengan segera. Sekiranya anda menukar halaman gaya, halaman akan kehilangan maklumat gayanya. Jika anda mengedit helaian gaya, anda akan melihat penyuntingan muncul pada halaman semasa anda menaip.

Anda boleh menyimpan salinan salah satu stylesheets ke komputer anda, mengimport lembaran gaya sedia ada dari komputer anda, atau menambah helaian gaya kosong baru dengan pautan Simpan, Import, atau Baru dalam tetingkap Gaya Editor.

Ciri visualisasi 3D mengawasi perubahan pada halaman semasa dan notis apabila perubahan berlaku. Apabila anda menggunakan Editor Gaya dengan pemeriksa 3D terbuka, perubahan anda akan tercermin serta-merta dalam paparan 3D. Ini juga berfungsi dengan sambungan pihak ketiga yang mengubah suai laman web, seperti Firebug.