Cara Menggunakan Alat Pengembang Web Firefox

Daftar Isi:

Cara Menggunakan Alat Pengembang Web Firefox
Cara Menggunakan Alat Pengembang Web Firefox

Video: Cara Menggunakan Alat Pengembang Web Firefox

Video: Cara Menggunakan Alat Pengembang Web Firefox
Video: Kustomisasi MATE Desktop Environment | GTK | Linux Indonesia - YouTube 2024, April
Anonim
Menu Pengembang Web Firefox berisi alat untuk memeriksa halaman, mengeksekusi kode JavaScript acak, dan melihat permintaan HTTP dan pesan lainnya. Firefox 10 menambahkan alat Inspektur semua-baru dan Scratchpad yang diperbarui.
Menu Pengembang Web Firefox berisi alat untuk memeriksa halaman, mengeksekusi kode JavaScript acak, dan melihat permintaan HTTP dan pesan lainnya. Firefox 10 menambahkan alat Inspektur semua-baru dan Scratchpad yang diperbarui.

Fitur pengembang web Firefox yang baru, dalam kombinasi dengan add-on web-developer yang mengagumkan seperti Firebug dan Toolbar Pengembang Web, menjadikan Firefox sebagai browser ideal untuk pengembang web. Semua alat tersedia di bawah Pengembang Web di menu Firefox.

Inspektur Halaman

Periksa elemen tertentu dengan mengklik kanan dan memilih Memeriksa (atau menekan Q). Anda juga bisa 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 lain di halaman akan diredupkan.
Anda akan melihat bilah alat di bagian bawah layar, yang dapat Anda gunakan untuk mengontrol inspektur. Elemen yang Anda pilih akan disorot dan elemen lain di halaman akan diredupkan.
Image
Image

Jika Anda ingin memilih elemen baru, klik Memeriksa di bilah alat, arahkan mouse ke atas halaman dan klik elemen Anda. Firefox menyoroti elemen di bawah kursor Anda.

Anda dapat menavigasi antara elemen induk dan anak dengan mengeklik runut tautan di bilah alat.
Anda dapat menavigasi antara elemen induk dan anak dengan mengeklik runut tautan di bilah alat.

Inspektur HTML

Klik HTML tombol untuk melihat kode HTML dari elemen yang sedang dipilih.

Image
Image

Inspektur HTML memungkinkan Anda memperluas dan menciutkan tag HTML, sehingga mudah untuk memvisualisasikan dalam sekejap. Jika Anda ingin melihat HTML laman dalam file datar, Anda dapat memilih Lihat sumber halaman dari menu Pengembang Web.

Image
Image

Inspektur CSS

Klik Gaya tombol untuk melihat aturan CSS diterapkan pada elemen yang dipilih.

Image
Image

Ada juga panel properti CSS - beralih di antara keduanya dengan mengeklik Aturan dan Properties tombol. Untuk membantu Anda menemukan properti tertentu, panel properti menyertakan kotak pencarian.

Image
Image

Anda dapat mengedit CSS elemen dengan cepat dari panel Aturan. Hapus centang pada salah satu kotak centang 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 menjadi tebal.

Image
Image

Scratchpad JavaScript

Scratchpad juga melihat pembaruan dengan Firefox 10, dan sekarang berisi penyorotan sintaks. Anda dapat mengetikkan kode JavaScript untuk berjalan di halaman saat ini.

Image
Image

Setelah Anda selesai, klik Menjalankan menu dan pilih Menjalankan. Kode berjalan di tab saat ini.

Image
Image

Konsol Web

Konsol Web menggantikan Konsol Error lama, yang telah usang dan akan dihapus dalam versi Firefox yang akan datang.

Konsol menampilkan empat jenis pesan berbeda, yang Anda dapat mengubah visibilitas - permintaan jaringan, pesan kesalahan CSS, pesan kesalahan JavaScript, dan pesan pengembang web.
Konsol menampilkan empat jenis pesan berbeda, yang Anda dapat mengubah visibilitas - permintaan jaringan, pesan kesalahan CSS, pesan kesalahan JavaScript, dan pesan pengembang web.

Apa itu pesan pengembang web? Ini adalah pesan yang dicetak ke objek window.console. Misalnya, 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 dengan debugging.

Segarkan halaman dan Anda akan melihat permintaan jaringan yang dihasilkan dan pesan lainnya.
Segarkan halaman dan Anda akan melihat permintaan jaringan yang dihasilkan dan pesan lainnya.
Gunakan kotak pencarian untuk menyaring pesan; klik sebuah permintaan jika Anda ingin melihat detail lebih lanjut.
Gunakan kotak pencarian untuk menyaring pesan; klik sebuah permintaan jika Anda ingin melihat detail lebih lanjut.
Image
Image

Pada Firefox 10, Konsol Web dapat bekerja sama dengan Page Inspector. Variabel $ 0 mewakili objek yang dipilih saat ini di inspektur. Jadi, misalnya, jika Anda ingin menyembunyikan objek yang saat ini dipilih, Anda dapat menjalankannya $ 0.style.display = "tidak ada" di konsol.

Jika Anda tertarik untuk mempelajari lebih lanjut tentang menggunakan konsol dan fungsi yang ada di dalamnya, lihat halaman Konsol Web di situs web Jaringan Pengembang Mozilla.
Jika Anda tertarik untuk mempelajari lebih lanjut tentang menggunakan konsol dan fungsi yang ada di dalamnya, lihat halaman Konsol Web di situs web Jaringan Pengembang Mozilla.

Dapatkan Alat Lainnya

Itu Dapatkan Alat Lainnya pilihan 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 Toolbar Pengembang Web.

Jika Anda sudah menggunakan Firefox selama beberapa tahun, Anda mungkin ingat Inspektur DOM. Alat pengembang terintegrasi dari Firefox telah ada sejak saat itu.

Direkomendasikan: