Cara Menggunakan Alat Pengembang Web Firefox untuk Melihat Struktur Situs Web dalam 3D

Daftar Isi:

Cara Menggunakan Alat Pengembang Web Firefox untuk Melihat Struktur Situs Web dalam 3D
Cara Menggunakan Alat Pengembang Web Firefox untuk Melihat Struktur Situs Web dalam 3D

Video: Cara Menggunakan Alat Pengembang Web Firefox untuk Melihat Struktur Situs Web dalam 3D

Video: Cara Menggunakan Alat Pengembang Web Firefox untuk Melihat Struktur Situs Web dalam 3D
Video: Cara Install/Update Driver Komputer dan Laptop Secara Manual - YouTube 2024, Maret
Anonim
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.
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.

Tilt - Visualisasi Situs 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 pada elemen tertentu.

Klik tombol "3D" pada bilah alat pengawas.
Klik tombol "3D" pada bilah alat pengawas.
Anda akan melihat struktur halaman setelah mengaktifkan mode 3D, tetapi akan terlihat rata hingga Anda memutarnya.
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.
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 membuka panel HTML atau Gaya, Anda dapat mengeklik elemen pada laman hte untuk melihat elemen HTML itu atau properti CSS.
Pandangan ini terintegrasi dengan alat-alat lain di inspektur. Jika Anda membuka panel HTML atau Gaya, Anda dapat mengeklik elemen pada laman hte untuk melihat elemen HTML itu atau properti CSS.
Image
Image

Lebih Banyak Fitur 3D

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 memasang add-on 3D Tilt. Setelah Anda selesai, Anda akan mendapatkan opsi "Tilt" baru di menu Pengembang Web.

Klik tombol Batal untuk menggunakan versi lama Tilt saat diminta.
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.
Anda akan menemukan kontrol untuk menyesuaikan visualisasi di sisi kiri jendela dan opsi lainnya, termasuk fitur ekspor, di bagian atas halaman.
Image
Image

Editor Gaya CSS

Untuk melihat dan mengedit lembar gaya CSS halaman, buka Editor Gaya dari menu Pengembang Web.

Editor Gaya mencantumkan stylesheet pada halaman saat ini. Aktifkan atau nonaktifkan stylesheet dengan mengeklik ikon mata di sebelah kiri nama stylesheet. Edit stylesheet dengan memilih dan memodifikasi kode.
Editor Gaya mencantumkan stylesheet pada halaman saat ini. Aktifkan atau nonaktifkan stylesheet dengan mengeklik 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.
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.
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.

Direkomendasikan: