Pandangan Ke Alat Firefox Penting Untuk Pengembang Web

Firefox telah lama menjadi peramban pilihan untuk pengembangan web. Ada sejumlah add-on yang berguna untuk melakukan pekerjaan itu. Dalam posting ini, kita akan melihat beberapa add-on yang saya pikir sangat penting untuk diinstal jika Anda akan melakukan pengembangan web. Kami juga akan mengungkap beberapa fitur dalam pengaya ini yang dapat membantu.

Pertama-tama, kita perlu menginstal Firebug.

Pembakar

Firebug adalah add-on yang harus dipasang untuk pengembangan web. Dengan asumsi bahwa Anda tidak tahu di mana mendapatkan Firebug, Anda dapat menginstalnya di sini. Mungkin, Anda harus memulai ulang Firefox Anda sebelum diaktifkan.

Setelah itu, Anda dapat melihat Firebug melalui salah satu cara berikut: ikuti menu ini Alat> Pengembang Web> Firebug, klik kanan pada halaman web dan pilih “Periksa Elemen dengan Firebug”.

Atau, Anda dapat menemukan ikon Firebug di Firefox dan mengkliknya, ini akan menampilkan jendela firebug;

Firebug cukup identik dengan Alat Pengembang Chrome. ini memiliki panel untuk melihat struktur HTML dan gaya, dan juga panel Konsol untuk melihat kesalahan, peringatan dan log. Tapi, saya punya beberapa tips lagi yang semoga bermanfaat bagi Anda.

Menyesuaikan Ukuran Kotak

Elemen HTML dibuat dengan model kotak CSS yang terdiri dari margin, bantalan dan dimensi objek (lebar / tinggi). Ada saatnya kita perlu memodifikasi properti ini. Dalam hal ini, Anda dapat memilih salah satu elemen yang ingin Anda ubah, lalu buka Tata letak panel.

Di panel ini, Anda akan menemukan ilustrasi model kotak CSS beserta informasinya, termasuk lebar dan tinggi. Meskipun kedua properti ini tidak ditentukan dalam CSS, alat ini cukup pintar untuk menentukan nilainya. Jika Anda perlu memodifikasinya, Anda cukup mengeklik nilainya dan menggunakan tombol panah naik atau turun untuk menambah atau mengurangi nilainya.

Gaya yang dihitung

Dalam banyak situasi, Anda mungkin bertanya-tanya mengapa gaya tertentu tidak diterapkan. Salah satu cara yang lebih mudah dan lebih cepat, terutama ketika Anda memiliki ribuan garis gaya, adalah dengan memeriksanya dari Internet Gaya yang Dihitung panel. Contoh ini menunjukkan bahwa warna teks tag jangkar ditimpa oleh .tombol kelas, sedangkan latar belakang .tombol kelas ditimpa oleh .button.add.

Memeriksa Keluarga Huruf (cara mudah)

Anda mungkin sering menemukan sesuatu seperti ini di font-keluarga properti di CSS dengan berbagai keluarga font. Sayangnya, ini tidak akan memberi tahu kami secara spesifik font apa yang digunakan browser. Untuk memudahkan identifikasi, kita dapat menginstal ekstensi Firebug ini FireFontFamily.

Setelah instalasi selesai, muat halaman web Anda, dan sekarang kita dapat dengan jelas melihat font yang diterapkan. Dalam kasus kami sebenarnya Helvetica Neue (lihat gambar).

Menganalisis Kinerja

Ini mungkin basi, tetapi Kecepatan Situs sekarang menjadi salah satu parameter Google (algoritma) dalam menentukan kualitas situs web; situs web yang memuat lebih cepat dianggap berkembang dengan baik dan berperingkat lebih tinggi dalam hal konten. Jadi kecepatan bukanlah sesuatu yang harus dilupakan.

Panel Net

Tempat pertama yang perlu Anda kunjungi untuk memeriksa kinerja situs web Anda adalah Bersih panel. Panel ini akan mencatat permintaan HTTP situs web Anda ketika dimuat. Tangkapan layar di bawah ini menunjukkan halaman web yang memuat 42 permintaan dan membawa sekitar 4,36 detik untuk memuat.

Anda kemudian dapat mengurutkan permintaan HTTP berdasarkan jenisnya seperti HTML, CSS, dan Gambar.

Yslow!

Selanjutnya, Anda juga dapat menginstal YSlow, ekstensi untuk Firebug dari Yahoo !. Setelah diaktifkan, Anda akan menemukan panel tambahan secara eksplisit yang disebut Yslow!.

Mirip dengan Bersih panel, Yslow! akan merekam kinerja laman web saat dimuat, tetapi kemudian juga akan memberi tahu Anda mengapa laman web lambat dan apa yang dapat kami lakukan untuk menyelesaikannya. Dalam contoh ini, kami menjalankan tes ke halaman web dan diberi skor 86 untuk kinerja keseluruhan, yang dianggap OK.

Kecepatan Halaman

Atau, Anda juga dapat menginstal Kecepatan Halaman dari Google. Mirip dengan Yslow!, itu menguji kinerja kecepatan situs web, meskipun hasil tes mungkin sedikit berbeda. Contoh ini menunjukkan halaman web yang sama mencetak 82 berdasarkan Kecepatan Halaman.

Alat Pengembang Web

Alat Pengembang Web jelas untuk pengembang web dan memiliki banyak fitur yang dikemas dalam toolbar ini. Tapi yang di bawah ini adalah salah satu favorit saya.

Inspeksi Gambar

Ada saat-saat ketika kita mungkin perlu mendapatkan informasi gambar dari halaman web. Saya biasanya melihat orang melakukan ini dengan tersandung di browser atau dengan mengklik kanan gambar dan memilih Lihat Info Gambar, seperti itu:

Tetapi cara ini tidak cukup efisien ketika kita perlu mendapatkan informasi dari banyak gambar. Dalam hal ini, kita dapat memanfaatkan Gambar fitur dari add-on. Fitur ini mudah diakses dari menu Gambar dari bilah alat.

Dan, contoh ini menunjukkan bagaimana kami menampilkan dimensi gambar dan ukuran file gambar secara bersamaan:

Alat Bawaan Firefox

Dalam versi terbaru, Firefox telah sangat meningkatkan fitur bawaan untuk pengembang web, beberapa di antaranya adalah:

Elemen Inspeksi Asli

Asli ini Memeriksa elemen dari Firefox mungkin terlihat mirip dengan “Periksa Elemen di Firebug”, tetapi sebenarnya bertindak dengan cara yang berbeda.

Kali ini, saya tidak akan membahas fitur ini lebih lanjut, karena pada dasarnya identik dengan Firebug HTML dan panel CSS, walaupun dengan perbedaan dalam tata letak dan desain. Tapi, ada satu fitur khas yang patut dicoba, yaitu Tampilan 3D.

Menggunakan Tampilan 3D Anda dapat melihat struktur halaman web secara mendalam. Untuk mengaktifkan tampilan ini, Anda dapat menemukan tombol di kanan bawah jendela “Firefox Native Inspect Element”. Ini adalah bagaimana Tampilan 3D seperti.

Saya tidak menggunakannya sesering fitur lainnya, tetapi ini adalah fitur inovatif dari Mozilla saya akui, dan tentu saja sangat berguna dalam situasi tertentu.

Tampilan Desain Web

Sejak meningkatnya popularitas dalam Desain Web Responsif, Firefox telah memprakarsai Bookmarklet Responsif ke Browser. Alat ini akan memungkinkan kami untuk menguji situs web responsif kami di berbagai viewports tanpa mengubah ukuran jendela browser.

Tampilan ini tersedia dari menu ini: Alat> Pengembang Web> Tampilan Desain Web. Dan, seperti inilah tampilan.

Editor Gaya

Terakhir, jika Anda sering menggunakan CSS, Anda mungkin akan jatuh cinta dengan fitur ini. Sejak versi 11, Firefox telah menambahkan Editor Gaya dalam alat pengembang aslinya.

Fitur ini sama kerennya dengan Tampilan Desain Web, itu memungkinkan Anda untuk mengedit CSS, melihat dampaknya langsung di browser dan menyimpan perubahan yang secara langsung mempengaruhi file sumber CSS.

Editor Gaya tersedia dari menu berikut: Alat> Pengembang Web> Editor Gaya.

Pemikiran Akhir

Ada banyak fitur yang dikemas dalam add-on Firefox ini dan yang dibahas di sini hanyalah beberapa fitur yang saya manfaatkan cukup sering selama pengembangan web. Meskipun demikian, Anda mungkin memiliki beberapa tips lain yang mungkin berguna untuk meningkatkan produktivitas pengembangan web di Firefox.

Fitur apa yang sering Anda gunakan? Anda dapat membagikan pemikiran Anda di kotak komentar di bawah ini.