Dalam posting ini, kita akan melihat ke beberapa add-ons yang saya pikir sangat penting untuk diinstal jika Anda akan melakukan pengembangan web.
Juga kita akan mengungkap beberapa fitur dalam add-ons yang dapat membantu.
Pertama-tama, kita perlu menginstal Firebug.
Firebug
Firebug adalah add-on yang harus diinstall untuk pengembangan web. Dengan asumsi bahwa Anda tidak tahu di mana untuk mendapatkan Firebug, Anda dapat menginstall dari sini. Anda dapat menginstalnya di sini. Mungkin, Anda perlu me-restart Firefox Anda sebelum diaktifkan.Setelah itu, Anda dapat melihat Firebug melalui salah satu cara berikut: mengikuti menu Tools > Web Developers > Firebug, klik kanan pada halaman web dan pilih “Inspect Element with Firebug”.
Atau, Anda dapat menemukan ikon Firebug di Firefox dan klik di atasnya, ini akan menampilkan jendela firebug;
Firebug sangat identik dengan Chrome Developers Tools yang memiliki panel untuk melihat struktur HTML dan gaya, dan juga panel Konsol untuk melihat kesalahan, peringatan dan log. Tapi, saya punya beberapa tips yang mudah-mudahan Anda mungkin menemukan berguna. Menyesuaikan Kotak Sizing
Menyesuaikan Ukuran Kotak
Elemen HTML dibuat dengan CSS box model yang terdiri dari margin, padding dan dimensi benda (lebar / tinggi). Ada kalanya kita mungkin perlu memodifikasi sifat. Dalam hal ini, Anda dapat memilih salah satu dari elemen yang Anda ingin berubah, kemudian pergi ke panel Layout.
Computed styles
Dalam banyak situasi, Anda mungkin bertanya-tanya mengapa gaya tertentu tidak diterapkan. Salah satu cara mudah dan lebih cepat, terutama ketika Anda memiliki ribuan baris gaya, adalah dengan memeriksa itu dari panel Style Computed. Contoh ini menunjukkan bahwa tag anchor warna teks ditimpa oleh kelas tombol., Sedangkan latar belakang kelas tombol. Diganti oleh. Button.add.
Memeriksa Font Family (cara termudah)
Anda mungkin sering menemukan sesuatu seperti ini dalam font-family properti di CSS dengan berbagai font keluarga. Sayangnya, hal ini tidak akan memberitahu kita khusus yang font browser membutuhkan. Untuk membuat identifikasi lebih mudah kita dapat menginstal ekstensi Firebug ini yaitu FireFontFamily.Setelah instalasi selesai, memuat halaman web Anda, dan sekarang kita dapat dengan jelas melihat mana keluarga font diterapkan. Dalam kasus kami itu sebenarnya Helvetica Neue
Menganalisis Kinerja
Ini mungkin basa-basi, tapi SKecepatan Situs sekarang menjadi salah satu parameter Google (algoritma) dalam menentukan kualitas situs, situs web yang memuat lebih cepat dianggap berkembang dengan baik dan peringkat lebih tinggi dalam hal konten. Jadi kecepatan bukanlah sesuatu yang harus diabaikan.Net Panel
Tempat pertama yang Anda mungkin perlu untuk mengunjungi untuk memeriksa kinerja website Anda adalah Net Panel. Panel ini akan mencatat permintaan HTTP dari website Anda bila dimuat. Ini screenshot di bawah ini menunjukkan halaman web yang memuat 42 permintaan dan memakan waktu sekitar 4,36 detik untuk memuat.
Anda kemudian dapat mengurutkan permintaan HTTP pada jenis mereka seperti HTML, CSS, dan Gambar.
Yslow!
Selain itu, Anda juga dapat menginstal YSlow, sebuah ekstensi untuk Firebug dari Yahoo!. Setelah itu diaktifkan, Anda akan menemukan sebuah panel tambahan ekspresif disebut YSlow!.Serupa dengan panel Net, YSlow! akan merekam pertunjukan halaman web ketika sedang dimuat, tapi kemudian juga akan memberitahu Anda mengapa halaman web lambat dan apa yang bisa kita lakukan untuk menyelesaikannya. Dalam contoh ini, kami menjalankan tes untuk halaman web dan itu mencetak 86 untuk kinerja secara keseluruhan, yang dianggap OK.
Kecepatan Halaman
Atau, Anda juga dapat menginstalPage Speed dari Google. Mirip dengan YSlow!, Itu tes kinerja website kecepatan, meskipun hasil tes mungkin sedikit berbeda. Contoh ini menunjukkan bahwa halaman web yang sama mencetak 82 sesuai dengan Page Speed.
Web Developer Tools
Web Developers Tools adalah jelas untuk pengembang web dan memiliki banyak fitur dikemas dalam toolbar ini. Tapi ini satu di bawah ini adalah salah satu favorit saya. Gambar InspeksiImage Inspection
Ada kalanya kita mungkin perlu untuk mendapatkan informasi gambar dari halaman web. Saya sering melihat orang-orang melakukan ini dengan tersandung di browser atau dengan mengklik kanan gambar dan pilih View Info Gambar, seperti:
Namun cara ini tidak cukup efisien ketika kita perlu untuk mendapatkan informasi dari banyak gambar. Dalam hal ini, kita bisa memanfaatkan fitur Gambar dari add-on. Fitur ini mudah diakses dari menu Image dari toolbar.
Dan, contoh ini menunjukkan bagaimana kita menunjukkan dimensi gambar dan ukuran file gambar secara bersamaan:
Firefox Built-in Tools
Dalam versi terbaru, Firefox telah sangat meningkatkan built-in fitur untuk pengembang web, beberapa di antaranya adalah:Native Inspect Element
Elemen ini asli dari Firefox mungkin terlihat mirip dengan "Inspect Element di Firebug", tetapi sebenarnya bertindak dengan cara yang berbeda.
Kali ini, kita tidak akan melalui fitur ini lebih lanjut, karena pada dasarnya identik dengan Firebug HTML dan CSS panel, meskipun dengan perbedaan dalam tata letak dan desain. Tapi, ada satu ciri khas yang bernilai mencoba, tampilan 3D.
Menggunakan tampilan 3D Anda dapat melihat struktur halaman web secara mendalam. Untuk mengaktifkan tampilan ini, Anda dapat menemukan tombol di bagian kanan bawah "Asli Firefox Inspect Element". Ini adalah bagaimana tampilan 3D terlihat seperti.
Saya tidak menggunakannya sesering fitur lain, tapi itu cukup fitur inovatif dari Mozilla saya akui, dan tentu saja sangat berguna dalam situasi tertentu.
Web Design View
Karena meningkatnya popularitas dalam Desain Web Responsif, Firefox telah memulai Bookmarklet Tanggap terhadap Browser. Alat ini akan memungkinkan kita untuk menguji situs responsif kami dalam viewports berbeda tanpa mengubah ukuran jendela browser.Pandangan ini tersedia dari menu ini: Tools> Web Developer> Web Design View. Dan, ini bagaimana pandangan seperti.
Style Editor
Terakhir, jika Anda bekerja dengan CSS sering, Anda mungkin akan jatuh cinta dengan fitur ini. Sejak versi 11, Firefox telah menambahkan Style Editor dalam alat pengembang asli.Fitur ini adalah sedingin View Desain Web, memungkinkan Anda untuk mengedit CSS, melihat dampak langsung pada browser dan menyimpan perubahan yang secara langsung mempengaruhi file sumber CSS.
Editor Style ini tersedia dari menu berikut: Tools> Web Developer> Editor Style.
Kesimpulan
Ada banyak fitur dikemas dalam Firefox add-ons dan mereka dibahas di sini adalah beberapa fitur yang saya menggunakan cukup sering selama pengembangan web. Meskipun demikian, Anda mungkin memiliki beberapa tips lain yang mungkin berguna untuk meningkatkan produktivitas pengembangan web di Firefox.Sumber dan gambar hongkiat.com
Tools Firefox Untuk Pengembang Web
Tidak ada komentar:
Posting Komentar