Cara Menggunakan Alat Pengembang Web Firefox
Menu Pengembang Web Firefox berisi alat untuk memeriksa halaman, mengeksekusi kode JavaScript yang berubah-ubah, dan melihat permintaan HTTP dan pesan lainnya. Firefox 10 menambahkan alat Inspektur yang semuanya baru dan Scratchpad yang diperbarui.
Fitur-fitur pengembang web baru Firefox, dikombinasikan dengan add-on web-developer yang mengagumkan seperti Firebug dan Web Developer Toolbar, menjadikan Firefox browser yang ideal untuk pengembang web. Semua alat tersedia di bawah Pengembang Web di menu Firefox.
Inspektur Halaman
Periksa elemen tertentu dengan mengklik kanan dan memilihnya Memeriksa (atau menekan Q). Anda juga dapat meluncurkan Inspektur dari menu Pengembang Web.
Anda akan melihat bilah alat di bagian bawah layar, yang dapat Anda gunakan untuk mengontrol inspektur. Elemen yang Anda pilih akan disorot dan elemen lainnya pada halaman tersebut akan diredupkan.
Jika Anda ingin memilih elemen baru, klik Memeriksa pada bilah alat, arahkan mouse Anda ke atas halaman dan klik elemen Anda. Firefox menyoroti elemen di bawah kursor Anda.
Anda dapat menavigasi antara elemen induk dan anak dengan mengklik remah roti pada toolbar.
Inspektur HTML
Klik tautan HTML untuk melihat kode HTML elemen yang dipilih saat ini.
Inspektur HTML memungkinkan Anda untuk memperluas dan menciutkan tag HTML, sehingga mudah untuk divisualisasikan dengan cepat. Jika Anda ingin melihat halaman HTML dalam file datar, Anda dapat memilih Lihat sumber halaman dari menu Pengembang Web.
Inspektur CSS
Klik tautan Gaya untuk melihat aturan CSS yang diterapkan pada elemen yang dipilih.
Ada juga panel properti CSS - beralih di antara keduanya dengan mengklik Aturan dan Properti tombol. Untuk membantu Anda menemukan properti tertentu, panel properti menyertakan kotak pencarian.
Anda dapat mengedit CSS elemen dengan cepat dari panel Aturan. Hapus centang pada kotak centang mana pun untuk menonaktifkan aturan, klik teks untuk mengubah aturan, atau tambahkan aturan Anda sendiri ke elemen di bagian atas panel. Di sini, saya telah menambahkan font-weight: bold; Aturan CSS, membuat teks elemen tebal.
Scratchpad JavaScript
Scratchpad juga melihat pembaruan dengan Firefox 10, dan sekarang berisi penyorotan sintaksis. Anda dapat mengetikkan kode JavaScript untuk dijalankan di halaman saat ini.
Setelah Anda miliki, klik Menjalankan menu dan pilih Menjalankan. Kode berjalan di tab saat ini.
Konsol Web
Konsol Web menggantikan Konsol Kesalahan lama, yang telah usang dan akan dihapus di versi Firefox yang akan datang.
Konsol menampilkan empat jenis pesan yang berbeda, yang dapat Anda alihkan visibilitasnya - permintaan jaringan, pesan kesalahan CSS, pesan kesalahan JavaScript dan pesan pengembang web.
Apa itu pesan pengembang web? Ini pesan yang dicetak ke objek window.console. Sebagai contoh, kita bisa menjalankan window.console.log ("Hello World"); Kode JavaScript di Scratchpad untuk mencetak pesan pengembang ke konsol. Pengembang web dapat mengintegrasikan pesan-pesan ini ke dalam kode JavaScript mereka untuk membantu debugging.
Refresh halaman dan Anda akan melihat permintaan jaringan yang dihasilkan dan pesan lainnya.
Gunakan kotak pencarian untuk memfilter pesan; klik permintaan jika Anda ingin melihat detail lebih lanjut.
Pada Firefox 10, Konsol Web dapat bekerja bersama dengan Inspektur Halaman. Variabel $ 0 mewakili objek yang saat ini dipilih di inspektur. Jadi, misalnya, jika Anda ingin menyembunyikan objek yang dipilih saat ini, Anda bisa menjalankannya $ 0.style.display = ”tidak ada” di konsol.
Jika Anda tertarik mempelajari lebih lanjut tentang cara menggunakan konsol dan fungsi bawaannya, lihat halaman Web Console di situs web Jaringan Pengembang Mozilla.
Dapatkan Lebih Banyak Alat
Itu Dapatkan Lebih Banyak Alat Opsi membawa Anda ke koleksi add-on Toolbox Pengembang Web di situs web Mozilla Add-Ons. Ini berisi beberapa add-on terbaik untuk pengembang web, termasuk Firebug dan Bilah Alat Pengembang Web.
Jika Anda telah menggunakan Firefox selama beberapa tahun, Anda mungkin ingat Inspektur DOM. Alat pengembang terintegrasi Firefox telah berkembang sejak saat itu.
