Ada apa

12 Pengaya Firefox untuk Pengembang & Desainer

Anonim

Baru-baru ini, kami merilis postingan tentang 12 Ekstensi Google Chrome untuk Pengembang & Desainer dan sementara beberapa ekstensi tersebut tersedia di Firefox , saya tidak akan mengulangi apa pun di sini.

Dengan cara yang sama, beberapa ekstensi yang tercantum di bawah ini tersedia di Chrome jadi pertimbangkan aplikasi tersebut sebagai bonus untuk masing-masing browser.

1. Validator HTML

Validator HTML menjalankan kode Anda untuk memastikannya mengikuti konvensi standar HTML. Ini menampilkan jumlah kesalahan yang terlihat pada ikon di bilah alat.

HTML Validator Addon Firefox

2. Octotree

Sebagai pengembang, saya menjalankan beberapa halaman kode di GitHub sesekali saat mencari untuk melihat bagaimana pengembang lain memecahkan masalah tertentu . Jika Anda seperti saya maka Anda akan menemukan Octotree berguna.

Octotree menampilkan kode GitHub dalam format pohon. Dengan begitu, Anda dapat menelusuri baris kode tanpa mengunduh file sumber.

Octotree Menampilkan Kode GitHub dalam Format Pohon

3. HTTPS Di Mana Saja

HTTPS Di Mana Saja mengenkripsi data yang Anda tukarkan dengan semua halaman web utama bahkan jika mereka tidak menggunakan HTTPS.

Jadi jika Anda diarahkan ke halaman yang tidak menggunakan https, Anda dapat yakin bahwa komunikasi online Anda aman.

4. Tes Performa Halaman

Pengujian Kinerja Halaman memberi Anda statistik pada halaman web Anda dengan mengukur kecepatan dan kinerja pemuatannya. Anda dapat menyimpan hasil grafik untuk membandingkannya dengan tes berikutnya.

Tes Kinerja Halaman

5. Penggunasnap

Usersnap memungkinkan Anda mengambil tangkapan layar situs web dan menganotasinya dengan menambahkan gambar markup dan komentar. Itu juga dilengkapi dengan penggaris piksel dan dapat diintegrasikan langsung dengan berbagai alat manajemen proyek termasuk Slac, Trello, dan JIRA.

Daftar ini tidak akan lengkap tanpa Usersnap karena memungkinkan proses umpan balik yang efektif. Ini adalah layanan berbayar, dengan uji coba gratis 14 hari.

Usersnap

6. Nonaktifkan JavaScript

Nonaktifkan JavaScript, seperti namanya, memberi Anda kemampuan untuk mematikan JavaScript di situs web atau hanya tab tertentu. Anda dapat menyesuaikannya agar memiliki status JS aktif/nonaktif, dan perilaku penonaktifan default berdasarkan domain/tab, dll.

Nonaktifkan JavaScript

7. Daftar Periksa Pengembang Web

Ekstensi Daftar Periksa Pengembang Web memberi Anda ikhtisar tentang seberapa berguna situs Anda menurut praktik desain dan pengembangan terbaik.

Mengklik ikon akan memberi tahu Anda tentang SEO situs Anda, URL ramah, favicon, dll. dengan tanda centang di sebelahnya untuk menunjukkan izin.

Daftar Periksa Pengembang Web

8. Bereaksi Alat Pengembang

Dengan peningkatan popularitas React yang tampaknya tak ada habisnya, pengembang React lahir hampir setiap hari dan tim React telah meliputnya.

Alat Pengembang React memberi Anda kemampuan untuk memeriksa pohon React beserta statusnya, props, hierarki, dll. Untuk mengaktifkannya , luncurkan Firefox devtools dan alihkan ke tab React.

Terdapat juga versi untuk Vue developer dalam bentuk Vue.js devtools.

Bereaksi Alat Pengembang

9. ColorZilla

ColorZilla adalah alat yang sangat baik bagi pengembang dan desainer grafis untuk memilih warna dari halaman web yang berbeda.

Ini juga berisi pipet, generator gradien, browser palet, dan riwayat warna.

ColorZilla

10. Pemotong Web Evernote

Evernote Web Clipper memungkinkan Anda untuk mengambil tangkapan layar halaman web dan secara otomatis menyimpannya ke Evernote Andaakun tempat Anda dapat membuat anotasi dan berbagi dengan anggota tim.

Kliping Web Evernote

11. Manajer Cookie

Pengelola Cookie adalah ekstensi sadar keamanan yang memungkinkan Anda untuk melihat, menambahkan, mengedit, menghapus, dan mencari cookie di mana saja domain.

Yang lebih keren dari Pengelola Cookie adalah Anda dapat mengekspor dan mengimpor cookie antar domain.

Pengelola Cookie

12. Editor Langsung untuk CSS dan LESS

Live Editor untuk CSS dan LESS memungkinkan Anda untuk menulis kode CSS/KURANG langsung ke browser Anda. Kode Anda segera berlaku dan akan disimpan di tingkat situs di penyimpanan lokal browser Anda.

Editor dalam halamannya memiliki fitur pelengkapan otomatis, mempercantik, linter, dll. Anda harus memeriksanya.

Editor langsung untuk CSS

Apakah Anda menyukai salah satu ekstensi yang terdaftar atau apakah Anda memiliki daftar yang dapat kami gunakan? Bagian komentar ada di bawah.